<h1 class="screenreader-only">{{#t "pages_title"}}Pages{{/t}}</h1>
{{#if CAN.VIEW_TOOLBAR}}
<div class="header-bar-outer-container">
  <div class="sticky-toolbar-with-right-side" data-sticky>
    <div class="header-bar">
      <div class="header-bar-right">
        {{#if BULK_DELETE_ENABLED}}
          {{#if CAN.MANAGE}}
            <button class="btn delete_pages" tabindex="0" aria-label="{{#t}}Delete selected pages{{/t}}" disabled>
              <i class="icon-trash" role="presentation" />
            </button>
          {{/if}}
        {{/if}}
        {{#if CAN.CREATE}}
          <a class="btn btn-primary icon-plus new_page" role="button" tabindex="0" aria-label="{{#t 'buttons.new_page_label'}}Add a page{{/t}}">{{#t 'buttons.new_page'}}Page{{/t}}</a>
          {{#if hasWikiIndexPlacements}}
            <div class="inline-block">
              <a class="al-trigger btn" role="button" aria-haspopup="true" aria-owns="toolbar-1" href="#">
                <i class="icon-more" aria-hidden="true"></i>
                <span class="screenreader-only">{{#t}}Pages Settings{{/t}}</span>
              </a>

              <ul id="toolbar-1" class="al-options" role="menu" aria-hidden="true" aria-expanded="false">
                {{>ExternalTools/external_tools_menu wikiIndexPlacements}}
              </ul>
            </div>
          {{/if}}
        {{/if}}
      </div>
    </div>
  </div>
</div>
{{/if}}

<div id="external-tool-mount-point"></div>
<div id="copy-to-mount-point" />
<div id="send-to-mount-point" />
<div class="index-content-container">
  <div class="index-content">
    {{#if fetched}}
      {{#if collection.length}}
        <div class="pages-mobile-header" aria-hidden="true">
          <div class="pages-mobile-header-left">
            {{#t}}Pages{{/t}}
          </div>
          <a class="al-trigger al-trigger-gray pages-mobile-header-right" href="#" role="button" data-popup-within="#application">
            {{#t}}Sort By{{/t}}
            <i class="icon-mini-arrow-down" aria-hidden="true"></i>
          </a>
          <ul class="al-options">
            <li><a href="#" data-sort-mobile-field="title" data-sort-mobile-key="asc" title="{{#t}}Page title: Ascending{{/t}}">
              {{#t}}Page title: Ascending{{/t}}
            </a></li>
            <li><a href="#" data-sort-mobile-field="title" data-sort-mobile-key="desc" title="{{#t}}Page title: Descending{{/t}}">
              {{#t}}Page title: Descending{{/t}}
            </a></li>
            <li><a href="#" data-sort-mobile-field="created_at" data-sort-mobile-key="asc" title="{{#t}}Created: Ascending{{/t}}">
              {{#t}}Created: Ascending{{/t}}
            </a></li>
            <li><a href="#" data-sort-mobile-field="created_at" data-sort-mobile-key="desc" title="{{#t}}Created: Descending{{/t}}">
              {{#t}}Created: Descending{{/t}}
            </a></li>
            <li><a href="#" data-sort-mobile-field="updated_at" data-sort-mobile-key="asc" title="{{#t}}Last Edit: Ascending{{/t}}">
              {{#t}}Last Edit: Ascending{{/t}}
            </a></li>
            <li><a href="#" data-sort-mobile-field="updated_at" data-sort-mobile-key="desc" title="{{#t}}Last Edit: Descending{{/t}}">
              {{#t}}Last Edit: Descending{{/t}}
            </a></li>
            {{#if collectionHasTodoDate}}
              <li><a href="#" data-sort-mobile-field="todo_date" data-sort-mobile-key="asc" title="{{#t}}To-Do Date: Ascending{{/t}}">
              {{#t}}To-Do Date: Ascending{{/t}}
              </a></li>
              <li><a href="#" data-sort-mobile-field="todo_date" data-sort-mobile-key="desc" title="{{#t}}To-Do Date: Descending{{/t}}">
                {{#t}}To-Do Date: Descending{{/t}}
              </a></li>
            {{/if}}
          </ul>
        </div>
        <table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row wiki-page-table" role="grid">
          <thead>
            <tr class="header-row" role="row">
              {{#if BULK_DELETE_ENABLED}}
                {{#if CAN.DELETE}}
                  <th width="2%" role="columnheader">
                    <span class="screenreader-only">{{#t}}Select page{{/t}}</span>
                  </th>
                  {{/if}}
              {{/if}}
              <th scope="col" width="{{#if CAN.MANAGE}}{{#if CAN.PUBLISH}}42%{{else}}46%{{/if}}{{else}}60%{{/if}}" role="columnheader">
                <span class="mobile-screenreader-only">
                  <a href="#" data-sort-field="title" tabindex="0" role="button" class="sort-field">{{#t 'headers.page_title'}}Page title{{/t}} <i></i></a>
                </span>
              </th>
              <th scope="col"  style="width: 20%" role="columnheader">
                <span class="mobile-screenreader-only">
                  <a href="#" data-sort-field="created_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.creation_date'}}Creation date{{/t}} <i></i></a>
                </span>
              </th>
              <th scope="col" style="width: 20%" role="columnheader">
                <span class="mobile-screenreader-only">
                  <a href="#" data-sort-field="updated_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.last_edit'}}Last edit{{/t}} <i></i></a>
                </span>
              </th>
              {{#if collectionHasTodoDate}}
                <th scope="col" style="width: 20%" role="columnheader">
                  <span class="mobile-screenreader-only">
                    <a href="#" data-sort-field="todo_date" tabindex="0" role="button" class="sort-field">{{#t 'headers.todo_date'}}To-Do Date{{/t}} <i></i></a>
                  </span>
                </th>
              {{/if}}
              {{#if CAN.OPEN_MANAGE_OPTIONS}}
                <th scope="col" style="width: 5%" role="columnheader">
                  <span class="screenreader-only">{{#t}}Master Lock{{/t}}</span>
                </th>
                {{#if CAN.PUBLISH}}
                  <th scope="col" style="width: 5%" role="columnheader">
                    <span class="screenreader-only">{{#t}}Publish{{/t}}</span>
                  </th>
                {{/if}}
                <th scope="col" style="width: 5%" role="columnheader">
                  <span class="screenreader-only">{{#t}}Manage{{/t}}</span>
                </th>
              {{/if}}
            </tr>
          </thead>
          <tbody class="collectionViewItems"></tbody>
        </table>
      {{/if}}
    {{/if}}
    {{#unless fetchedLast}}
      <div class="loading {{#unless fetched}}loading{{else}}loading-more{{/unless}}">
        <img src="/images/ajax-reload-animated.gif">
        {{#unless fetched}}{{#t 'loading'}}Loading ...{{/t}}{{else}}{{#t 'loading_more'}}Loading more ...{{/t}}{{/unless}}
      </div>
    {{/unless}}
    {{#if fetched}}
      {{#unless collection.length}}
        <div style="text-align: center">{{#t 'no_pages'}}No pages created yet.{{/t}}{{#if CAN.CREATE}} <a class="new_page" href="#">{{#t 'add_page'}}Add one!{{/t}}</a>{{/if}}</div>
      {{/unless}}
    {{/if}}
  </div>
</div>
