<app-page-header title="Dashboard" subTitle="Welcome to paperless-ng!">
  <img src="assets/logo.svg" height="80" class="m-2 d-none d-md-block">
</app-page-header>

<div class='row'>
  <div class="col-lg">
    <ng-container *ngFor="let v of savedDashboardViews">

      <div class="card mb-3 shadow">
        <div class="card-header">
          <h5 class="card-title mb-0">{{v.viewConfig.title}}</h5>
        </div>
        <div class="card-body text-dark">

          <table class="table table-sm table-hover table-borderless">
            <thead>
              <tr>
                <th>Created</th>
                <th scope="col">Title</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let doc of v.documents" routerLink="/documents/{{doc.id}}">
                <td>{{doc.created | date}}</td>
                <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="savedDashboardViews.length == 0">
      <div class="card mb-3 shadow">
        <div class="card-header">
          <h5 class="card-title mb-0">Saved views</h5>
        </div>
        <div class="card-body text-dark">
          <p class="card-text">This space is reserved to display your saved views. Go to your documents and save a view
            to have it displayed
            here!</p>
        </div>
      </div>

    </ng-container>

  </div>
  <div class="col-lg">

    <div class="card mb-3 shadow">
      <div class="card-header">
        <h5 class="card-title mb-0">Statistics</h5>
      </div>
      <div class="card-body text-dark">
        <p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
        <p class="card-text">Total documents: {{statistics.documents_total}}</p>
      </div>
    </div>

    <div class="card mb-3 shadow">
      <div class="card-header">
        <h5 class="card-title mb-0">Upload new documents</h5>
      </div>
      <div class="card-body text-dark">
        <form>
          <ngx-file-drop 
            dropZoneLabel="Drop documents here or" (onFileDrop)="dropped($event)"
            (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"
            dropZoneClassName="bg-light card"
            multiple="true"
            contentClassName="justify-content-center d-flex align-items-center p-5"
            [showBrowseBtn]=true
            browseBtnClassName="btn btn-sm btn-outline-primary ml-2">

          </ngx-file-drop>
        </form>
      </div>
    </div>

  </div>
</div>