- let items = [{
-   "name": "Inbox",
-   "link": "#inbox",
-   "icon": "fa-inbox",
-   "active": true,
-   "count": 1,
-   "isFolder": false
- }, {
-   "name": "Drafts",
-   "link": "#drafts",
-   "icon": "fa-edit",
-   "active": false,
-   "count": 2,
-   "isFolder": false
- }, {
-   "name": "Sent",
-   "link": "#sent",
-   "icon": "fa-paper-plane",
-   "active": false,
-   "count": 3,
-   "isFolder": false
- }, {
-   "name": "Important",
-   "link": "#important",
-   "icon": "fa-exclamation-triangle",
-   "active": false,
-   "count": 4,
-   "isFolder": false
- }, {
-   "name": "Trash",
-   "link": "#trash",
-   "icon": "fa-trash",
-   "active": false,
-   "count": 5,
-   "isFolder": false
- }, {
-   "name": "Spam",
-   "link": "#spam",
-   "icon": "fa-ban",
-   "active": false,
-   "count": 1001,
-   "isFolder": false
- }, {
-   "name": "Folder 1",
-   "link": "#folder1",
-   "icon": "fa-folder-open",
-   "active": false,
-   "count": 1000,
-   "isFolder": true
- }, {
-   "name": "Folder 2",
-   "link": "#folder2",
-   "icon": "fa-folder-open",
-   "active": false,
-   "count": 0,
-   "isFolder": true
- }, {
-   "name": "Folder 3",
-   "link": "#folder3",
-   "icon": "fa-folder-open",
-   "active": false,
-   "count": 6,
-   "isFolder": true
- }];

nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.shadow
  a(href="#").navbar-brand TwBS-Mailer-v2
  button(
    type="button"
    data-target="#topbar"
    data-toggle="collapse"
    aria-controls="topbar"
    aria-expanded="false"
    aria-label="Toggle navigation"
  ).bg-dark.navbar-toggler
    span.navbar-toggler-icon
  #topbar.collapse.navbar-collapse
    form.mr-auto
      .input-group.mt-2.mt-lg-0
        input(
          type="search"
          placeholder="Search"
          aria-label="Search"
        ).form-control
        .btn-group.input-group-append
          button(type="button").btn.btn-dark.d-none.d-lg-block
            i.fas.fa-search
          button(
            type="button"
            aria-expanded="false"
            aria-haspopup="true"
            data-toggle="dropdown"
          )#searchFolder.btn.btn-dark.dropdown-toggle.d-none.d-lg-block
          .dropdown-menu(aria-labelledby="searchFolder")
            - for (let i in items)
              - let item = items[i]
                a(href=item.link).dropdown-item
                  i(class="fa " + item.icon)
                  span.ml-2 #{item.name}
          button(type="button").btn.btn-dark.d-block.d-lg-none
            i.fas.fa-search
            span.ml-2 Search
    ul.navbar-nav
      li.nav-item.mt-2.mt-lg-0.mr-lg-1
        a(
          title="User Profile"
          data-placement="left"
          data-toggle="tooltip"
        ).nav-link.btn.btn-dark.text-white.px-lg-3.px-0
          i.fas.fa-user
          span.d-lg-none.ml-2 User Profile
      li.nav-item.mt-2.mt-lg-0.mr-lg-1
        a(
          title="Account Settings"
          data-placement="left"
          data-toggle="tooltip"
        ).nav-link.btn.btn-dark.text-white.px-lg-3.px-0
          i.fas.fa-cog
          span.d-lg-none.ml-2 Account Settings
      li.nav-item.mt-2.mt-lg-0
        a(
          title="Sign out"
          data-placement="left"
          data-toggle="tooltip"
        ).nav-link.btn.btn-danger.text-white.px-lg-3.px-0
          i.fas.fa-sign-out-alt
          span.d-lg-none.ml-2 Sign out
.container-fluid
  .row
    .col-12.col-md-4.col-xl-3.my-3
      ul.list-group.shadow
        li.list-group-item.d-flex.justify-content-between.align-items-center
          button(
            type="button"
            data-toggle="modal"
            data-target="#compose_modal"
          ).btn.btn-dark.btn-lg.btn-block
            i.fas.fa-edit
            span.ml-2 Compose
        - let folderShown = false
        - for (let i in items) {
          - let item = items[i]
          - let active = ""
          - if (item.active) {
            - active = " active disabled";
          - }
          - if (folderShown === false && item.isFolder === true) {
            - folderShown = true
            li.list-group-item.d-flex.justify-content-between.align-items-left Folders
          - }
          a(
            href=item.link
            class="list-group-item d-flex justify-content-between align-items-center" + active
          )
            span
              i(class="fa " + item.icon)
              span.ml-2 #{item.name}
            span
              - if (item.count > 0) {
                - let badge = "badge badge-secondary badge-pill"
                - let count = item.count
                - if (item.active) {
                  - badge = " badge badge-light badge-pill";
                - }
                - if (count > 1000) {
                  - count = "1000+"
                - }
                  span(class=badge) #{count}
              - }
        - }
    .col-md-8.col-xl-9
      .row
        .col-12.pt-md-3
          nav(aria-label="breadcrumb")
            ol.breadcrumb.bg-light.shadow
              li.breadcrumb-item
                a(href="#")
                  i.fas.fa-home
                  span.ml-2 Home
              li(aria-current="page").breadcrumb-item.active
                span
                  i.fas.fa-inbox
                  span.ml-2 Inbox
        .col-12.mb-4
          .card.shadow
            .card-header.bg-primary.text-white
              i.fas.fa-inbox
              span.ml-2 Inbox
            ul.list-group.list-group-flush
              li.list-group-item
                button(
                  type="button"
                  title="Check all"
                  data-placement="top"
                  data-toggle="tooltip"
                )#check-all.btn.btn-secondary
                  i.fas.fa-square
                button(
                  type="button"
                  title="Mark selected as read"
                  data-placement="top"
                  data-toggle="tooltip"
                ).btn.btn-dark
                  i.fas.fa-envelope-open
                button(
                  type="button"
                  title="Mark selected as unread"
                  data-placement="top"
                  data-toggle="tooltip"
                ).btn.btn-dark
                  i.far.fa-envelope
                button(
                  type="button"
                  title="Delete selected"
                  data-placement="top"
                  data-toggle="tooltip"
                ).btn.btn-danger
                  i.fas.fa-trash
                .btn-group(
                  title="Move to"
                  data-placement="top"
                  data-toggle="tooltip"
                )
                  button(
                    type="button"
                    aria-expanded="false"
                    aria-haspopup="true"
                    data-toggle="dropdown"
                  ).btn.btn-secondary.dropdown-toggle
                    i.fas.fa-share-square
                  .dropdown-menu
                    a(href="#").dropdown-item
                      i.fas.fa-exclamation-triangle
                      span.ml-2 Important
                    .dropdown-divider
                    a(href="#").dropdown-item
                      i.far.fa-folder-open
                      span.ml-2 Folder 1
                    a(href="#").dropdown-item
                      i.far.fa-folder-open
                      span.ml-2 Folder 2
                    a(href="#").dropdown-item
                      i.far.fa-folder-open
                      span.ml-2 Folder 3
            .card-body
              .table-responsive
                table.table.table-striped.table-hover
                  tbody#mail_tbody
#compose_modal.modal.fade(
  tabindex="-1"
  role="dialog"
  aria-labelledby="compose_modal_label"
  aria-hidden="true"
)
  .modal-dialog.modal-dialog-centered.modal-dialog-scrollable
    .modal-content
      .modal-header.bg-primary.text-white
        h5.modal-title Compose Message
        button.btn.btn-danger.btn-sm(
          type="button"
          data-dismiss="modal"
          aria-label="Close"
        )
          i.fas.fa-times
      .modal-body
        .form-group
          label#txt_to To
          input#txt_to.form-control(
            type="text"
            placeholder="Enter e-mail address here"
          )
          small.form-text.text-muted
            | Multiple addresses are separated with comma
        .form-group
          label#txt_subject Subject
          input#txt_subject.form-control(type="text")
        .form-group
          label#txt_message Message
          textarea#txt_message.form-control(rows="10")
      .modal-footer.text-right
        button.btn.btn-light(data-dismiss="modal")
          i.fas.fa-times
          span.ml-2 Close
        button.btn.btn-primary(data-dismiss="modal")
          i.fas.fa-paper-plane
          span.ml-2 Send
  

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

* {
  font-family: "Open Sans", sans-serif;
}

$(function() {
  $('[data-toggle="tooltip"]').tooltip();

  $('#check-all').on('click', function() {
    var elm = this;

    if ($(elm).find('i').hasClass('fa-square')) {
      $('input[type="checkbox"][mail-checkbox]').each(function() {
        this.checked = true;
        $(elm).find('i').removeClass('fa-square');
        $(elm).find('i').addClass('fa-check-square');
      });
    }
    else {
      $('input[type="checkbox"][mail-checkbox]').each(function() {
        this.checked = false;
        $(elm).find('i').addClass('fa-square');
        $(elm).find('i').removeClass('fa-check-square');
      });
    }
  });

  $('input[type="checkbox"][mail-checkbox]').on('change', function() {
    if (!this.checked) {
      $('#check-all i').addClass('fa-square');
      $('#check-all i').removeClass('fa-check-square');
    }
    else {
      var allChecked = true;
      $('input[type="checkbox"][mail-checkbox]').each(function() {
        if (!this.checked) {
          allChecked = false;
          return false;
        }
      });
      if (allChecked) {
        $('#check-all i').removeClass('fa-square');
        $('#check-all i').addClass('fa-check-square');
      }
    }
  });
});

// Just to populate the table
for (var i = 0; i < 15; i++) {
  var tableRow = '';

  tableRow += '<tr' + ((i <= 3) ? ' class="font-weight-bold"' : '') + '>';
  tableRow += '<td>';
  tableRow += '<div class="custom-control custom-checkbox">';
  tableRow += '<input type="checkbox" class="custom-control-input" id="check' + i + '" mail-checkbox>';
  tableRow += '<label class="custom-control-label" for="check' + i + '">&nbsp;</label>';
  tableRow += '</div>';
  tableRow += '</td>';
  tableRow += '<td>Title of message</td>';
  tableRow += '<td>Content of the message</td>';
  tableRow += '<td>dd/mm/yyyy</td>';
  tableRow += '</tr>';

  $("#mail_tbody").append(tableRow);
}