{% extends 'base.html' %}

{% block body %}

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

  <hr>

  {% set count = itemsArr|length %}

  {% if count == 0 and searchType != '' %}
      {{ "Sorry. I couldn't find anything :("|trans|msg('ko', false) }}
  {% elseif count == 0 and searchType == '' and not App.Session.get('is_anon') and not App.Request.query.get('offset') %}
      {{ "Welcome to eLabFTW. Use the 'Create new' button to get started!"|trans|msg('ok', false) }}
  {% else %}
      {% if pinnedArr and not searchPage %}
        <div 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' style='display:inline'>
        <a href='#' id='expandAll' data-status='closed' data-expand='{{ 'Expand all'|trans }}' data-collapse='{{ 'Collapse all'|trans }}'>{{ 'Expand all'|trans }}</a> - <a href='#' id='selectAllBoxes'>{{ 'Select all'|trans }}</a>
        <span id='advancedSelectOptions' style='display:none'> - <a href='#' id='unselectAllBoxes'>{{ 'Clear selection'|trans }}</a> -
          <a href='#' id='invertSelection'>{{ 'Invert selection'|trans }}</a></span>
      </p>

      <p id='withSelected' style='display:none'>{{ 'With selected:'|trans }}
          <select autocomplete='off' id='catChecked'>
              <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>

          <select autocomplete='off' id='visChecked'>
            <option selected disabled>{{ 'Change visibility'|trans }}</option>
            {% for key, value in visibilityArr %}
              <option value='{{ key }}'>{{ value }}</option>
            {% endfor %}
          </select>

          <select autocomplete='off' id='exportChecked'>
            <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='json'>{{ 'Make JSON'|trans }}</option>
          </select>
          <button id='deleteChecked' class='button btn btn-danger'>{{ 'Delete'|trans }}</button>
      </p>
      <div class='row display-flex'>
      {% for item in itemsArr|slice(0, DisplayParams.limit) %}
        {% include('show-item.html') %}
      {% endfor %}
      </div>

      <div class='text-center pageButtons mt-2'>
        {% if DisplayParams.offset != 0 %}
          <button class='button btn btn-neutral previousPage'>{{ 'Previous page'|trans }}</button>
        {% endif %}
        {% if DisplayParams.limit < itemsArr|length %}
          <button class='button btn btn-primary nextPage'>{{ '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 }}'
      data-offset='{{ DisplayParams.offset }}'>
  </div>
  <div id='type' data-type='{{ Entity.type }}'></div>

{% endblock body %}