<h1 class="screenreader-only">{{#t "pages_title"}}Pages{{/t}}</h1>
{{#if CAN.VIEW_TOOLBAR}}
<div class="header-bar-outer-container">
  <div class="header-bar-container sticky-toolbar-with-right-side" data-sticky>
    <div class="header-bar">
      <div class="header-bar-right">
        {{#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">
    <table class="ic-Table ic-Table--condensed ic-Table--striped ic-Table--hover-row" role="grid">
      <thead>
        <tr class="header-row" role="row">
          <th scope="col" width="{{#if CAN.MANAGE}}{{#if CAN.PUBLISH}}42%{{else}}46%{{/if}}{{else}}60%{{/if}}" role="columnheader">
            <a href="#" data-sort-field="title" tabindex="0" role="button" class="sort-field">{{#t 'headers.page_title'}}Page title{{/t}} <i></i></a>
          </th>
          <th scope="col" width="20%" role="columnheader">
            <a href="#" data-sort-field="created_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.creation_date'}}Creation date{{/t}} <i></i></a>
          </th>
          <th scope="col" width="20%" role="columnheader">
            <a href="#" data-sort-field="updated_at" tabindex="0" role="button" class="sort-field">{{#t 'headers.last_edit'}}Last edit{{/t}} <i></i></a>
          </th>
          {{#if collectionHasTodoDate}}
            <th scope="col" width="20%" role="columnheader">
              <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>
            </th>
          {{/if}}
          <th scope="col" width="5%" role="columnheader">
            <span class="screenreader-only">{{#t}}Master Lock{{/t}}</span>
          </th>
          <th scope="col" width="5%" role="columnheader">
            <span class="screenreader-only">{{#t}}Publish{{/t}}</span>
          </th>
          <th scope="col" width="5%" role="columnheader">
            <span class="screenreader-only">{{#t}}Manage{{/t}}</span>
          </th>
        </tr>
      </thead>
      <tbody class="collectionViewItems">
        {{#if fetched}}
          {{#unless collection.length}}
          <tr class="no-pages{{#if CAN.CREATE}} clickable{{/if}}"><td class="no-pages-cell" colspan="{{#if CAN.MANAGE}}{{#if CAN.PUBLISH}}5{{else}}4{{/if}}{{else}}3{{/if}}">{{#t 'no_pages'}}No pages created yet.{{/t}}{{#if CAN.CREATE}} <a class="new_page" href="#">{{#t 'add_page'}}Add one!{{/t}}</a>{{/if}}</td></tr>
          {{/unless}}
        {{/if}}
      </tbody>
    </table>
    {{#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}}
  </div>
</div>
