<!-- Mobile toggle button -->
<a
  [ngClass]="showSidebar ? 'ti-close' : 'ti-menu'"
  class="btn btn-success show-left-part d-block d-lg-none"
  href="javascript:void(0)"
  (click)="mobileSidebar()"
></a>
<div class="main-part" style="height: calc(100vh - 175px)">
  <div
    class="left-part bg-white fixed-left-part"
    [ngClass]="{ 'show-panel': showSidebar }"
  >
    <div class="position-relative" style="height: 100%">
      <div
        class="p-l-15 p-r-25 py-3 d-flex align-items-center mt-1 border-bottom"
      >
        <div>
          <img
            src="assets/images/users/8.jpg"
            width="45"
            alt="user"
            class="rounded-circle"
          />
        </div>
        <div class="text-dark m-b-0 m-l-15 font-18">
          Bruce Banner
          <p class="m-b-0 font-12">
            <i class="fa fa-circle text-success font-10 m-r-5"></i>
            <span>Online</span>
          </p>
        </div>
      </div>
      <div class="p-3">
        <button
          type="button"
          class="btn btn-info btn-block"
          (click)="openModal(content)"
        >
          Compose
        </button>
      </div>
      <ul class="mailbox list-style-none">
        <li>
          <div
            class="message-center"
            style="height: calc(100vh - 340px)"
            [perfectScrollbar]="config"
          >
            <div class="p-3">
              <h6 class="font-weight-normal text-muted text-uppercase mb-0">
                Mailbox
              </h6>
            </div>
            <div *ngFor="let mail of mailboxes">
              <a
                class="message-item border-0 d-flex align-items-center py-3"
                (click)="mailboxesChanged(mail.name)"
              >
                <span>
                  <i [class]="mail.icon"></i>
                </span>
                <h5 class="ml-3 mb-0 font-weight-normal">{{ mail.name }}</h5>
                <div class="ml-auto">
                  <span
                    *ngIf="mail.name === 'Inbox'"
                    class="badge badge-info badge-pill font-medium px-3 d-flex align-items-center"
                    >{{ ms.inboxCount }}</span
                  >
                  <span
                    class="badge badge-danger font-medium badge-pill px-3 d-flex align-items-center"
                    *ngIf="mail.name === 'Draft'"
                    >{{ ms.draftCount }}</span
                  >
                  <span
                    class="badge badge-warning text-white font-medium badge-pill px-3 d-flex align-items-center"
                    *ngIf="mail.name === 'Spam'"
                    >{{ ms.spamCount }}</span
                  >
                </div>
              </a>
            </div>
            <div class="p-3 border-top">
              <h6 class="font-weight-normal text-muted text-uppercase mb-0">
                FILTERS
              </h6>
            </div>
            <div *ngFor="let fil of filters">
              <a
                class="message-item border-0 d-flex align-items-center py-3"
                (click)="filtersClick(fil.name)"
              >
                <span>
                  <i [class]="fil.icon"></i>
                </span>
                <h5 class="ml-3 mb-0">{{ fil.name }}</h5>
              </a>
            </div>
            <div class="p-3 border-top">
              <h6 class="font-weight-normal text-muted text-uppercase mb-0">
                LABELS
              </h6>
            </div>
            <div *ngFor="let lab of labels">
              <a
                class="message-item border-0 d-flex align-items-center py-3"
                (click)="labelChange(lab.name)"
              >
                <span>
                  <i [class]="lab.icon" [style.color]="lab.color"></i>
                </span>
                <h5 class="ml-3 mb-0">{{ lab.name }}</h5>
              </a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="right-part">
    <div class="card mb-0">
      <div class="row no-gutters">
        <div class="col-lg-6 col-md-12 col-xl-4 border-right">
          <div class="position-relative" style="height: 100%">
            <div
              class="d-flex align-items-center justify-content-between px-3 py-4 border-bottom"
            >
              <div>
                <span class="font-16 font-medium">{{ ms.topLable }}</span>
              </div>

              <div class="mail-pagination">
                <ngb-pagination
                  [collectionSize]="ms.collectionSize"
                  [(page)]="ms.page"
                  [pageSize]="ms.pageSize"
                >
                </ngb-pagination>
              </div>
            </div>

            <div
              class="position-relative"
              style="height: calc(100vh - 258px)"
              [perfectScrollbar]="config"
            >
              <div
                *ngFor="
                  let mail of ms.mailList
                    | slice
                      : (ms.page - 1) * ms.pageSize
                      : (ms.page - 1) * ms.pageSize + ms.pageSize;
                  let i = index
                "
                (click)="mailSelected(mail)"
              >
                <div class="p-3 border-bottom cursor-pointer">
                  <div class="d-flex align-items-start">
                    <img
                      [src]="ms.users[i].imagePath"
                      class="rounded-circle"
                      alt="* *"
                      width="35"
                      height="35"
                    />
                    <div class="ml-3">
                      <div class="d-flex align-items-center">
                        <h5 class="mb-0">{{ ms.users[i].name }}</h5>
                        <span
                          *ngIf="mail.filter.indexOf('Important') !== -1"
                          class="ml-2"
                        >
                          <i class="fas fa-bookmark font-12 text-warning"></i>
                        </span>
                        <span
                          *ngIf="mail.filter.indexOf('Star') !== -1"
                          class="ml-2"
                        >
                          <i class="fas fa-star font-12 text-warning"></i>
                        </span>
                      </div>

                      <p class="text-muted">
                        {{ mail.Subject | slice: 0:25 }}..
                      </p>
                    </div>
                    <div class="ml-auto">
                      <div class="text-right">
                        <span class="text-muted d-block">{{
                          mail.date | date: "dd-MMMM"
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <p class="mb-0">
                    <span class="font-weight-bold" *ngIf="!mail.seen">
                      {{ mail.Message | slice: 0:200 }}..
                    </span>
                    <span *ngIf="mail.seen">
                      {{ mail.Message | slice: 0:200 }}..
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="col-lg-6 col-md-12 col-xl-8 detail-part"
          [class.movetodetail]="ms.addClass"
        >
          <div *ngIf="ms.selectedMail === null" class="h-100 d-none d-lg-block">
            <div class="d-flex align-items-center justify-content-center h-100">
              <div class="text-center">
                <i class="far fa-envelope display-5"></i>
                <h3>Select to read.</h3>
              </div>
            </div>
          </div>

          <div *ngIf="ms.selectedMail != null">
            <div
              class="position-relative"
              style="height: calc(100vh - 180px)"
              [perfectScrollbar]="config"
            >
              <router-outlet></router-outlet>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ----------------------------------------------------------------------------- -->
<!-- Compose Modal -->
<!-- ----------------------------------------------------------------------------- -->
<ng-template #content let-modal>
  <div class="modal-header bg-info">
    <h4 class="modal-title text-white">New Message</h4>

    <button
      type="button"
      class="close"
      aria-label="Close"
      (click)="modal.dismiss('Cross click')"
    >
      <span aria-hidden="true" class="text-white">&times;</span>
    </button>
  </div>

  <div class="modal-body">
    <form action="">
      <div class="form-group">
        <label for="toEmail">To</label>
        <input type="text" class="form-control" id="toEmail" name="toEmail" />
      </div>

      <div class="form-group">
        <label for="subject">Subject</label>
        <input type="text" class="form-control" id="subject" name="subject" />
      </div>

      <div class="form-group">
        <textarea
          class="form-control"
          rows="5"
          id="comment"
          placeholder="Insert text here..."
        ></textarea>
      </div>

      <div
        class="d-flex align-items-center justify-content-between py-2 px-3 bg-light"
      >
        <div>
          <a href="javascript:void(0)" class="link"
            ><i class="icon-link font-16"></i
          ></a>
          <a href="javascript:void(0)" class="link"
            ><i class="fas fa-smile font-16 ml-3"></i
          ></a>
          <a href="javascript:void(0)" class="link"
            ><i class="fas fa-camera font-16 ml-3"></i
          ></a>
        </div>

        <div>
          <button type="button" class="btn btn-danger ml-3">
            <i class="fas fa-trash mr-1"></i>Discard
          </button>
          <button type="button" class="btn btn-warning ml-3">
            <i class="fa-box fas mr-1"></i>Save as draft
          </button>
          <button type="button" class="btn btn-secondary ml-3" disabled>
            Send
          </button>
        </div>
      </div>
    </form>
  </div>
</ng-template>

<!--  -->
