<div
  class="uk-flex uk-overflow-hidden uk-height-max-1 uk-height-1-1"
  data-test-document-view
>
  <div
    class="uk-width-1 uk-flex uk-flex-column uk-overflow-hidden uk-height-max-1"
  >
    <div class="uk-flex uk-flex-middle uk-padding-small">
      <Search @search={{@filters.query}} />

      <DocumentViewToggle
        @viewList={{this.listView}}
        data-test-toggle-side-panel
        {{on "click" this.toggleView}}
      />
    </div>

    <div class="uk-padding-small uk-height-1-1 uk-overflow-auto" ...attributes>
      <div class="document-view">
        {{! List & Grid View }}

        {{#if this.listView}}
          <DocumentList
            @columns={{this.tableColumns}}
            @loading={{this.fetchedDocuments.isPending}}
            @fetchedDocuments={{this.fetchedDocuments.value}}
            @setSort={{this.setSort}}
            @selectedDocuments={{this.documents.selectedDocuments}}
            @onDoubleClickDocument={{this.openDocument.perform}}
          />
        {{else}}
          <DocumentGrid
            @displayLink={{true}}
            @loading={{this.fetchedDocuments.isPending}}
            @fetchedDocuments={{this.fetchedDocuments.value}}
            @selectedDocuments={{this.documents.selectedDocuments}}
            @onDoubleClickDocument={{this.openDocument.perform}}
          />
        {{/if}}
      </div>
    </div>
  </div>
</div>