<section class="table-workspace">
  <header class="workspace-header">
    <div>
      <p class="eyebrow">Wijmo Angular Sample</p>
      <h1>Smart Sales Data Table</h1>
    </div>
    <div class="status-panel">
      <span>{{ visibleCount }} rows</span>
      <span>{{ pageLabel }}</span>
    </div>
  </header>

  <div class="toolbar" aria-label="Grid controls">
    <label class="search-field">
      <span>Search</span>
      <div #searchHost class="grid-search-host"></div>
    </label>

    <div class="button-group">
      <input
        #importFile
        id="importFile"
        class="file-input"
        type="file"
        accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        (change)="load(importFile)" />
      <label class="button secondary" for="importFile">Import</label>
      <button class="button primary" type="button" (click)="save()">Export</button>
    </div>
  </div>

  <div #gridHost class="sales-grid" role="grid" aria-label="Recent sales"></div>

  <footer class="grid-footer">
    <div class="pager" aria-label="Pagination">
      <button class="icon-button" type="button" (click)="previousPage()" [disabled]="!salesView || salesView.pageIndex === 0" aria-label="Previous page">&lsaquo;</button>
      <span>{{ pageLabel }}</span>
      <button class="icon-button" type="button" (click)="nextPage()" [disabled]="!salesView || salesView.pageIndex >= salesView.pageCount - 1" aria-label="Next page">&rsaquo;</button>
    </div>
    <p>{{ status }}</p>
  </footer>
</section>
