{% extends 'base.html' %}

{% block body %}

  {% if not searchPage %}
    {% include 'show-view-edit.html' %}
  {% endif %}
  {% include 'filter-order-sort.html' %}

  <hr>

  {% set count = itemsArr|length %}

  <div id='showModeContent'>

  {% if count == 0 and searchType != '' %}
    <div class='row display-flex' id='itemList'>
      {{ "Sorry. I couldn't find anything :("|trans|msg('ko', false) }}
    </div>
  {% elseif count == 0 and searchType == '' and not App.Session.get('is_anon') and not App.Request.query.get('offset') %}
    <div class='row display-flex' id='itemList'>
      {{ "Welcome to eLabFTW. Use the 'Create new' button to get started!"|trans|msg('ok', false) }}
    </div>
  {% else %}
      {% if pinnedArr and not searchPage %}
        <div id='pinned-entities' class='row display-flex'>
          {% set isPinned = true %}
          {% for item in pinnedArr|slice(0, DisplayParams.limit) %}
            {% include 'show-item.html' %}
          {% endfor %}
          {% set isPinned = false %}
        </div>
        <hr>
      {% endif %}
      <p class='smallgray d-inline'>
        <a href='#' data-action='expand-all-entities' data-status='closed' data-expand='{{ 'Expand all'|trans }}' data-collapse='{{ 'Collapse all'|trans }}'>{{ 'Expand all'|trans }}</a>
        - <a href='#' data-action='select-all-entities'>{{ 'Select all'|trans }}</a>
        <span id='advancedSelectOptions' class='d-none'>
          - <a href='#' data-action='unselect-all-entities'>{{ 'Clear selection'|trans }}</a>
          - <a href='#' data-action='invert-entities-selection'>{{ 'Invert selection'|trans }}</a>
        </span>
      </p>

      <div id='withSelected' class='row mx-0 form-inline d-none'>
        <p class='mr-1 mb-2'>{{ 'With selected:'|trans }}</p>
        <!-- Change category -->
        <select data-action='update-category-selected-entities' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled>
            {% if Entity.type == 'experiments' %}
                {{ 'Change status'|trans }}
            {% else %}
                {{ 'Change item type'|trans }}
            {% endif %}
            </option>

            {% for category in categoryArr %}
                <option value='{{ category.category_id }}'>{{ category.category }}</option>
            {% endfor %}
        </select>

        <!-- Change visibility -->
        <select data-action='update-visibility-selected-entities' autocomplete='off' class='mr-1 mb-2 form-control'>
          <option selected disabled>{{ 'Change visibility'|trans }}</option>
          {% for key, value in visibilityArr %}
            <option value='{{ key }}'>{{ value }}</option>
          {% endfor %}
        </select>

        <!-- Export -->
        <select data-action='export-selected-entities' autocomplete='off' class='mr-1 mb-2 form-control'>
          <option selected disabled>{{ 'Export'|trans }}</option>
          <option value='zip'>{{ 'Make Zip'|trans }}</option>
          <option value='csv'>{{ 'Make Csv'|trans }}</option>
          <option value='multiPdf'>{{ 'Make PDF'|trans }}</option>
          <option value='qrPdf'>{{ 'Make QR codes PDF'|trans }}</option>
          <option value='json'>{{ 'Make JSON'|trans }}</option>
        </select>

        <!-- Add a tag -->
        <input type='text' id='createTagInputMultiple' class='createTagInputMultiple mr-1 mb-2 form-control' data-autocomplete='tags' placeholder='{{ 'Add a tag'|trans }}' />

        <!-- Add a link -->
        <div class='input-group mb-2 mr-2'>
          <input type='text' id='linkInputMultiple' data-autocomplete='links' class='form-control' placeholder='{{ 'Add a link'|trans }}' />
          <div class='input-group-append'>
            <select id='addLinkCatFilter' class='brl-none form-control'>
              <option selected value=''>{{ 'Any category'|trans }}</option>
              {% for cat in itemsCategoryArr %}
                <option value='{{ cat.category_id }}'>{{ cat.category }}</option>
              {% endfor %}
            </select>
          </div>
        </div>

        <button data-action='lock-selected-entities' class='button btn btn-primary mr-1 mb-2'>{{ 'Lock'|trans }}</button>
        {% if Entity.type == 'experiments' %}
          <button data-action='timestamp-selected-entities' class='button btn btn-primary mr-1 mb-2'>{{ 'Timestamp'|trans }}</button>
        {% endif %}
        {% if (deletableXp and (Entity.type == 'experiments')) or Entity.type == 'items' %}
          <button data-action='destroy-selected-entities' class='button btn btn-danger mr-1 mb-2'>{{ 'Delete'|trans }}</button>
        {% endif %}
      </div>
      {% if App.Users.userData.display_mode == 'it' %}
        <div class='row display-flex' id='itemList'>
        {% for item in itemsArr|slice(0, DisplayParams.limit) %}
          {% include 'show-item.html' %}
        {% endfor %}
        </div>
      {% elseif App.Users.userData.display_mode == 'tb' %}
      <div id='itemList'>
        <table class='item-table'>
          <tr>
            <th>
              {{ 'Date'|trans }} <a href='#' data-action='reorder-entities' data-orderby='date'><i class='fas fa-sort'></i></a>
            </th>
            <th class='title-item-table'>
              {{ 'Title'|trans }} <a href='#' data-action='reorder-entities' data-orderby='title'><i class='fas fa-sort'></i></a>
            </th>
            <th class='step-item-table'>
              {{ 'Next step'|trans }}
            </th>
            <th class='category-item-table'>
              {{ 'Category'|trans }} <a href='#' data-action='reorder-entities' data-orderby='cat'><i class='fas fa-sort'></i></a>
            </th>
            <th class='tags-item-table'>
              {{ 'Tags'|trans }}
            </th>
            <th class='actions-item-table'>
              {{ 'Actions'|trans }}
            </th>
            <th class='actions-item-rating'>
              {{ 'Rating'|trans }} <a href='#' data-action='reorder-entities' data-orderby='rating'><i class='fas fa-sort'></i></a>
            </th>
            <th class='actions-item-owner'>
              {{ 'Owner'|trans }} <a href='#' data-action='reorder-entities' data-orderby='user'><i class='fas fa-sort'></i></a>
            </th>
          </tr>
        {% for item in itemsArr|slice(0, DisplayParams.limit) %}
          {% include 'show-item-table.html' %}
        {% endfor %}
        </table>
      </div> <!-- end itemList -->
      {% endif %}

      <!-- PREVIOUS/NEXT PAGE buttons -->
      <div class='text-center page-buttons mt-2'>
        {% if DisplayParams.offset != 0 %}
          <button class='button btn btn-neutral previousPage' data-action='previous-page'>{{ 'Previous page'|trans }}</button>
        {% endif %}
        {% if DisplayParams.limit < itemsArr|length %}
          <button class='button btn btn-primary nextPage' data-action='next-page'>{{ 'Next page'|trans }}</button>
        {% endif %}
      </div>

  {% endif %}

  <div id='shortcuts' data-create='{{ Entity.Users.userData.sc_create }}'></div>
  <div id='info'
      data-page='show'
      data-type='{{ Entity.type }}'
      data-locale='{{ App.Users.userData.lang }}'
      data-limit='{{ DisplayParams.limit }}'>
  </div>
</div>

{% endblock body %}