{% extends 'base.html' %}

{% block title %}
<div class='d-flex align-content-center'>
  <h1 id='pageTitle' {% if hideTitle %}hidden{% endif %}>{{ pageTitle }}</h1>
  <div class='ml-auto'>
    {% include 'create-new.html' %}
  </div>
</div>
{% endblock %}

{% block body %}
  {% include 'search-help-modal.html' %}
  {% include 'show-view-edit.html' %}
  {% include 'request-actions-show.html' %}

  <hr>

  <div class='d-flex'>
    {# SEARCH BAR #}
    {% set pageName = scriptName|replace({'.php': ''}) %}
    {% set searchTarget = pageName %}
    {% if pageName == 'database' %}
      {% set searchTarget = 'resources'|trans %}
    {% endif %}
    <form id='mainSearchForm' aria-label='{{ 'Search %s'|trans|format(searchTarget) }}' class='mb-2 flex-fill' method='get'>
      {# next div is wrapper to position pre below textarea #}
      <div class='input-group' style='position:relative;'>
        <input
          id='extendedArea'
          name='q'
          type='text'
          class='form-control'
          placeholder="{{ 'Search %s'|trans|format(searchTarget) }}"
          spellcheck='false'
          aria-label="{{ 'Search %s'|trans|format(searchTarget) }}"
          value='{{ App.Request.query.get('q') ? App.Request.query.get('q')|trim|e('html_attr') }}' />
        <pre id='search-highlighting' class='form-control d-none' aria-hidden='true'><code></code></pre>
        <div class='input-group-append'>
          <button class='btn btn-secondary' type='submit' aria-label='{{ 'Search'|trans }}' title='{{ 'Search'|trans }}'><i class='color-white fas fa-magnifying-glass'></i></button>
        </div>
      </div>
    </form>
    {# wrap button into a div or it appears too tall #}
    <div>
      <button type='button' class='btn btn-secondary bg-medium border-secondlevel ml-2' aria-label='{{ 'Show full syntax'|trans }}' title='{{ 'Show full syntax'|trans }}' data-action='toggle-modal' data-target='advancedSearchModal'><i class='color-white fas fa-circle-question'></i></button>
    </div>
  </div>
  {# END SEARCH BAR #}

  {# QUERY FILTERS #}
  <div class='d-flex flex-column'>

  {# FIRST LINE: ALWAYS ON FILTERS: CATEGORY, STATUS, OWNER, TAGS #}
    <div class='d-flex form-group form-inline'>
      <form id='queryForm' aria-label='{{ 'Query filters'|trans }}'>
        <input type='hidden' name='q' value='{{ DisplayParams.queryString|e('html_attr') }}' />
        {% if App.Request.query.get('related') %}
          <input type='hidden' name='related' value='{{ App.Request.query.get('related')|number_format }}' />
          <input type='hidden' name='related_origin' value='{{ App.Request.query.getAlpha('related_origin') }}' />
        {% endif %}

        <div id='visibleFiltersDiv' class='mt-1 flex-fill'>
          {# CATEGORY #}
          <select name='category' class='mr-1 form-control filterHelper filterAuto' aria-label='{{ 'Filter category'|trans }}'>
            <option value='' class='dropdown-header' data-action='clear'>{{ 'Filter category'|trans }}</option>
            {% for category in categoryArr %}
              <option value='{{ category.id }}'
                {{- App.Request.query.get('category') == category.id ? ' selected' -}}
              >
              {{ category.title }}</option>
            {% endfor %}
          </select>

          {# STATUS #}
          <select name='status' class='mr-1 form-control filterHelper filterAuto' aria-label='{{ 'Filter status'|trans }}'>
            <option value='' data-action='clear'>{{ 'Filter status'|trans }}</option>
            {% for status in statusArr %}
              <option value='{{ status.id }}'
                {{- App.Request.query.get('status') == status.id ? ' selected' -}}
              >
              {{ status.title }}</option>
            {% endfor %}
          </select>

          {# OWNER filter #}
          <select name='owner' class='form-control filterHelper filterAuto' aria-label='{{ 'Filter owner'|trans }}'>
            <option value='' data-action='clear'>{{ 'Filter owner'|trans }}</option>
            {% for user in usersArr %}
              <option value='{{ user.userid }}' {{- App.Request.query.get('owner') == user.userid ? ' selected' }}>{{ user.fullname }}</option>
            {% endfor %}
          </select>

          {# SEARCH WITH TAG #}
          {# select is hidden to avoid showing the raw list and a layout change, it shows up with TomSelect #}
          <input placeholder='{{ 'Tags'|trans }}' id='tagFilterPlaceholder' class='form-control' aria-label='placeholder for tags input' />
          {% if App.Config.configArr.debug -%}
            <!-- [html-validate-disable-block input-missing-label, prefer-native-element: suppress error from tom-select] -->
          {%- endif %}
          <select hidden
            id='tagFilter'
            multiple
            name='tags[]'
            class='form-control'
            aria-label='{{ 'Tags'|trans }}'
            placeholder='{{ 'Tags'|trans }}'
          >
            {% for tag in tagsArrForSelect %}
              <option value='{{ tag.tag|e('html_attr') }}' {{- tag.tag in App.Request.query.all('tags') ? ' selected' }}>{{ tag.tag }}</option>
            {% endfor %}
          </select>
          {# END SEARCH WITH TAG #}
        </div>
      </form>

      {# TOGGLE MORE FILTERS BUTTON #}
      <div class='ml-auto'>
        <button class='btn btn-secondary btn' type='button' data-action='toggle-next' data-toggle-target='filtersDiv' data-closed-icon='fa-sliders' data-opened-icon='fa-xmark' aria-label='{{ 'Toggle filters'|trans }}' aria-expanded='false' aria-controls='filtersDiv'>
          <i class='fas fa-sliders color-white'></i>
        </button>
      </div>
    {# END ALWAYS VISIBLE FILTERS #}
    </div>

    {# START HIDDEN FILTERS #}
    <div id='filtersDiv' hidden data-save-hidden='filtersDiv' class='form-group form-inline'>
      {# METADATA SEARCH #}
      <div class='d-flex'>
        <div class='input-group d-flex flex-nowrap'>
          {% if App.Config.configArr.debug -%}
            <!-- [html-validate-disable input-missing-label, prefer-native-element: suppress errors from tom-select] -->
          {%- endif %}
          <select
            aria-label='{{ 'Name of field'|trans }}'
            class='form-control filterHelper'
            data-filter='extrafield'
            id='metakey'
            name='metakey'
          >
            <option value='' disabled>{{ 'Name of field'|trans }}</option>
            <option value='**' {{- '**' == App.Request.query.get('metakey') ? ' selected' }}>{{ 'All fields'|trans }}</option>
            {% for metakey in metakeyArrForSelect %}
              <option value='{{ metakey }}' {{- metakey == App.Request.query.get('metakey') ? ' selected' }}>{{ metakey|raw }}</option>
            {% endfor %}
          </select>
          {% if App.Config.configArr.debug -%}
            <!-- [html-validate-enable input-missing-label, prefer-native-element: suppress errors from tom-select] -->
          {%- endif %}
          <div class='input-group-text px-1 brl-none brr-none' style='margin-left:-1px;margin-right:-1px;'>:</div>
          <input
            aria-label='{{ 'Value'|trans }}'
            class='form-control filterHelper'
            data-filter='extrafield'
            id='metavalue'
            name='metavalue'
            placeholder='{{ 'Value'|trans }}'
            type='text'
            value='{{ Request.query.get('metavalue') != '' ? Request.query.get('metavalue') }}'
          />
        </div>
        <div id='autocompleteAnchorDiv_extra_fields_keys'></div>
      </div>
          <!-- TODO add to help modal >
          <p class='mt-1 text-muted'>{{ "Tip: you can use '%' as wildcard in value"|trans }}</p-->
          {# METADATA SEARCH END #}

      {# GROUPS filter: disabled because not working FIXME #}
      <!--select name='group' class='mx-1 form-control filterHelper filterAuto' aria-label='{{ 'Filter group'|trans }}'>
        <option value='' data-action='clear'>{{ 'Select group'|trans }}</option>
        {% for group in scopedTeamgroupsArr %}
          <option value='{{ group.name|e('html_attr') }}' {{- Request.query.get('searchonly') == 'group:' ~ group ? ' selected' }}>{{ group.name }}</option>
        {% endfor %}
      </select-->

      {# VISIBILITY filter #}
      <select name='visibility' class='mx-1 form-control filterHelper filterAuto' aria-label='{{ 'Filter visibility'|trans }}'>
        <option value=''>{{ 'Filter visibility'|trans }}</option>
        {% for vis in visibilityArr %}
        <option value='visibility:"{{ vis|e('html_attr') }}"'{{ App.Request.query.get('extended') == 'visibility:"' ~ vis|raw ~ '"' ? ' selected' }}>
          {{ vis }}</option>
        {% endfor %}
      </select>

      <input type='hidden' name='mode' value='show' />

      <div>
        {# STATE #}
        <select name='state' aria-label='{{ 'State'|trans }}' class='form-control filterAuto'>
          <option value='' data-action='clear'>{{ 'Select state'|trans }}</option>
          <option value='1' {{- Request.query.get('state') == '1' ? ' selected' }}>{{ 'Normal'|trans }}</option>
          <option value='2' {{- Request.query.get('state') == '2' ? ' selected' }}>{{ 'Archived'|trans }}</option>
          <option value='3' {{- Request.query.get('state') == '3' ? ' selected' }}>{{ 'Deleted'|trans }}</option>
          <option value='1,2' {{- Request.query.get('state') == '1,2' ? ' selected' }}>{{ 'Normal or Archived'|trans }}</option>
          <option value='1,2,3' {{- Request.query.get('state') == '1,2,3' ? ' selected' }}>{{ 'Any'|trans }}</option>
        </select>
        {# END STATE #}

        {# LOCK #}
        <select name='locked' aria-label='{{ 'Select lock status'|trans }}' class='form-control filterHelper'>
          <option value='' data-action='clear'>{{ 'Select lock status'|trans }}</option>
          <option value='1' {{- Request.query.get('locked') == 'yes' ? ' selected' }}>{{ 'Yes'|trans|lower }}</option>
          <option value='0' {{- Request.query.get('locked') == 'no' ? ' selected' }}>{{ 'No'|trans|lower }}</option>
        </select>
        {# END LOCK #}

        {# TIMESTAMPED #}
        <select aria-label='{{ 'Timestamped'|trans }}' name='timestamped' class='form-control filterHelper' data-filter='timestamped'>
          <option value='' data-action='clear'>{{ 'Select timestamp status'|trans }}</option>
          <option value='1' {{- Request.query.get('timestamped') == 'yes' ? ' selected' }}>{{ 'Yes'|trans|lower }}</option>
          <option value='0' {{- Request.query.get('timestamped') == 'no' ? ' selected' }}>{{ 'No'|trans|lower }}</option>
        </select>
        {# END TIMESTAMPED #}

        {# RATING #}
        <select id='rating' name='rating' data-filter='rating' class='form-control filterHelper'>
          <option value='' data-action='clear'>{{ 'Select number of stars'|trans }}</option>
          <option value='unrated' {{- Request.query.get('rating') == 'unrated' ? ' selected' }}>{{ 'Unrated'|trans }}</option>
          {% for i in range(1, 5) %}
            <option value='{{ i }}' {{- Request.query.get('rating') == i ? ' selected' }}>{{ i }}</option>

          {% endfor %}
        </select>
        {# END RATING #}
      </div>

      <div class='d-flex mt-2'>
        {# SEARCH DATE #}
          <label class='mr-1 align-self-center' for='date'>{{ 'Date from'|trans }}</label>
          <div class='input-group'>
            <div class='input-group-prepend'>
              <select id='dateOperator' aria-label='{{ 'Date operator'|trans }}' name='dateOperator' style='min-width: 50px' class='brr-none form-control filterHelper' data-filter='date'>
                <option value='<' title='{{ 'less than'|trans }}' {{- Request.query.get('dateOperator') == '<' ? ' selected' }}>&lt;</option>
                <option value='<=' title='{{ 'less than or equal to'|trans }}' {{- Request.query.get('dateOperator') == '<=' ? ' selected' }}>&le;</option>
                <option value='=' title='{{ 'equal to'|trans }}' {{- Request.query.get('dateOperator') == '=' or Request.query.get('dateOperator') is null ? ' selected' }}>=</option>
                <option value='>=' title='{{ 'greater than or equal to'|trans }}' {{- Request.query.get('dateOperator') == '>=' ? ' selected' }}>&ge;</option>
                <option value='>' title='{{ 'greater than'|trans }}' {{- Request.query.get('dateOperator') == '>' ? ' selected' }}>&gt;</option>
                <option value='!=' title='{{ 'not equal to'|trans }}' {{- Request.query.get('dateOperator') == '!=' ? ' selected' }}>&ne;</option>
              </select>
            </div>
            <input id='date' name='date' type='date' class='form-control filterHelper' data-filter='date' value='{{ Request.query.get('date') != '' ? Request.query.get('date') }}'/>
          </div>
          <label class='ml-2 mr-1' for='dateTo'>{{ 'Date to (optional)'|trans }}</label>
          <input id='dateTo' name='dateTo' type='date' class='form-control filterHelper' data-filter='date' value='{{ Request.query.get('dateTo') != '' ? Request.query.get('dateTo') }}'/>
        </div>
        {# END SEARCH DATE #}
      </div>

    </form>
  </div>

  <hr>
  {# BUTTONS TOOLBAR #}
  <div class='d-flex'>
    {# LEFT #}
    <div class='d-flex'>
      <a title='{{ 'Select all'|trans }}' aria-label='{{ 'Select all'|trans }}' data-action='toggle-select-all-entities' data-target='select' href='#' class='btn hl-hover-gray p-2 lh-normal border-0'>
        <i class='far fa-square'></i>
      </a>
      <a hidden title='{{ 'Invert selection'|trans }}' aria-label='{{ 'Invert selection'|trans }}' data-action='invert-entities-selection' href='#' class='ml-2 btn hl-hover-gray p-2 lh-normal border-0'>
        <i class='fas fa-arrows-turn-to-dots'></i>
      </a>
      <div class='vertical-separator'></div>
      <a title='{{ 'Toggle main text'|trans }}' aria-label='{{ 'Toggle main text'|trans }}' data-action='expand-all-entities' data-status='closed' href='#' class='btn hl-hover-gray p-2 lh-normal border-0'>
        <i class='fas fa-maximize'></i>
      </a>
    </div>

    {# RIGHT #}
    <div class='ml-auto'>
      {# SCOPE FILTER #}
      {% include 'scope-button.html' with {'reload': 'reloadEntitiesShow,scopeBtn', 'target': 'scope_' ~ Entity.entityType.value, 'isSmall': 0, 'isSecondary': 0} %}
    </div>

    <div class='vertical-separator'></div>
    <div class='d-flex'>
      {# SWITCH LAYOUT #}
      <button title='{{ 'Switch layout'|trans }}' aria-label='{{ 'Switch layout'|trans }}' type='button' class='btn hl-hover-gray p-1 mr-1' data-action='toggle-items-layout'>
        <i class='fas fa-fw fa-list'></i>
        <i class='fas fa-fw fa-table'></i>
      </button>
    <div class='vertical-separator'></div>

    <div class='d-flex'>
      {# ORDER (Sort) #}
      <div class='btn-group'>
        <button class='btn btn-sm dropdown-toggle hl-hover-gray' type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' aria-label='{{ 'Sort'|trans }}' title='{{ 'Sort'|trans }}'><i class='fas fa-arrow-down-wide-short fa-fw mr-1'></i></button>
        <div class='dropdown-menu dropdown-menu-right'>
          <h6 class='dropdown-header'>{{ 'Sort'|trans }}</h6>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'date' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='date-desc'>{{ 'Newest'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'date' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='date-asc'>{{ 'Oldest'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'lastchange' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='lastchange-desc'>{{ 'Recently modified'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'lastchange' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='lastchange-asc'>{{ 'Least recently modified'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'cat' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='cat-desc'>{{ 'Category'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'cat' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='cat-asc'>{{ 'Category (inverted)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'status' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='status-desc'>{{ 'Status'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'status' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='status-asc'>{{ 'Status (inverted)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'id' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='id-desc'>{{ 'Highest ID'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'id' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='id-asc'>{{ 'Lowest ID'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'customid' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='customid-desc'>{{ 'Highest Custom ID'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'customid' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='customid-asc'>{{ 'Lowest Custom ID'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'comment' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='comment-desc'>{{ 'Recently commented'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'title' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='title-asc'>{{ 'Title (alphabetical)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'title' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='title-desc'>{{ 'Title (inverted)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'user' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='user-asc'>{{ 'User (alphabetical)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'user' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='user-desc'>{{ 'User (inverted)'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'rating' and App.Request.query.get('sort') == 'desc') ? ' active' }}' data-query='rating-desc'>{{ 'Highest rating'|trans }}</button>
          <button type='button' class='btn btn-dropdown-item dropdown-item {{- (App.Request.query.get('order') == 'rating' and App.Request.query.get('sort') == 'asc') ? ' active' }}' data-query='rating-asc'>{{ 'Lowest rating'|trans }}</button>
        </div>
      </div>
      {# LIMIT if there is nothing in the query params, take the user configured one #}
      <div class='btn-group'>
        <button class='btn btn-sm dropdown-toggle hl-hover-gray' type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' aria-label='{{ 'Results per page'|trans }}' title='{{ 'Results per page'|trans }}'><i class='fas fa-list-ol fa-fw mr-1'></i></button>
        <div class='dropdown-menu dropdown-menu-right'>
          <h6 class='dropdown-header'>{{ 'Results per page'|trans }}</h6>
        {% for option in limitOptions(DisplayParams.limit) %}
          <button type='button' class='btn btn-dropdown-item dropdown-item' data-action='insert-param-and-reload-show' data-key='limit' data-value='{{ option }}'>{{ option }}</button>
        {% endfor %}
        </div>
      </div>
    </div>
  </div>
  </div>
  <hr>

  {% set count = itemsArr|length %}

  {% if App.Users.isAdmin and itemsCategoryArr|length == 0 %}
  {{ 'No resources categories have been defined for your team. Head to the %sAdmin Panel%s to add one.'|trans|format("<a href='admin.php?tab=4#itemsCategoriesAnchor'>", "</a>")|raw|msg('warning', false) }}
  {% endif %}
  <div id='showModeContent'>

    {# Show message if we're looking for something (query parameters are present), but the number of results is 0 #}
    {% if count == 0 and App.Request.query.all|length > 0 %}
    <div class='row display-flex' id='itemList'>
      {% set otherPage = Entity.entityType.value == 'experiments' ? 'database' : 'experiments' %}
      {{ "Sorry. I couldn't find anything :("|trans|msg('ko', false) }}
    </div>
    <div class='row d-flex'>
      <a href='{{ otherPage }}.php?q={{ App.Request.query.get('q')|trim|e('url') }}'>
        <button class='btn btn-primary' type='button'>{{ Entity.entityType.value == 'items' ? 'Search in experiments'|trans : 'Search in resources'|trans }}</button>
      </a>
    </div>
  {% elseif count == 0 and (App.Request.query.all|length == 0) 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 %}

      <div id='withSelected' class='d-none'>
        <div class='row mx-0'><p>{{ 'With selected:'|trans }}</p></div>
        {# First line #}
        <div class='row mx-0 form-inline mb-3'>
          {# Export #}
          <select aria-label='{{ 'Export'|trans }}' data-action='export-selected-entities' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled>{{ 'Export'|trans }}</option>
            <option value='eln'>{{ 'ELN Archive'|trans }}</option>
            <option value='zip'>{{ 'ZIP Archive'|trans }}</option>
            <option value='csv'>{{ 'CSV File'|trans }}</option>
            <option value='pdf'>{{ 'PDF File'|trans }}</option>
            <option value='qrpdf'>{{ 'QR codes PDF'|trans }}</option>
            <option value='json'>{{ 'JSON'|trans }}</option>
          </select>
          {# Action buttons #}
          <button data-action='patch-selected-entities' data-what='forcelock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Lock'|trans }}</button>
          <button data-action='patch-selected-entities' data-what='forceunlock' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Unlock'|trans }}</button>
          <button data-action='patch-selected-entities' data-what='timestamp' type='button' class='btn btn-primary mr-1 mb-2'>{{ 'Timestamp'|trans }}</button>
          <button data-action='patch-selected-entities' data-what='archive' type='button' class='btn btn-secondary mr-1 mb-2'>{{ 'Archive'|trans }}</button>
          <button data-action='destroy-selected-entities' type='button' class='btn btn-danger mr-1 mb-2'>{{ 'Delete'|trans }}</button>
        </div>

        <form id='multiChangesForm' class='row mx-0 form-inline'>
          {# CHANGE CATEGORY #}
          <select aria-label='{{ 'Change category'|trans }}' name='category' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled value=''>
              {{ 'Change category'|trans }}
            </option>
            <option value='0'>{{ 'Not set'|trans }}</option>
            {% for category in categoryArr %}
                <option value='{{ category.id }}'>{{ category.title }}</option>
            {% endfor %}
          </select>
          {# CHANGE STATUS #}
          <select aria-label='{{ 'Change status'|trans }}' name='status' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled value=''>
              {{ 'Change status'|trans }}
            </option>
            <option value='0'>{{ 'Not set'|trans }}</option>
            {% for status in statusArr %}
                <option value='{{ status.id }}'>{{ status.title }}</option>
            {% endfor %}
          </select>
          {# CANREAD #}
          <select aria-label='{{ 'Change read permissions'|trans }}' name='canread' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled value=''>{{ 'Change read permissions'|trans }}</option>
            {% for key, value in visibilityArr %}
              <option value='{{ key }}'>{{ value }}</option>
            {% endfor %}
          </select>
          {# CANWRITE #}
          <select aria-label='{{ 'Change write permissions'|trans }}' name='canwrite' autocomplete='off' class='mr-1 mb-2 form-control'>
            <option selected disabled value=''>{{ 'Change write permissions'|trans }}</option>
            {% for key, value in visibilityArr %}
              <option value='{{ key }}'>{{ value }}</option>
            {% endfor %}
          </select>
          {# ADD A TAG #}
          <input type='text' aria-label='{{ 'Add a tag'|trans }}' id='createTagInputMultiple' name='tags' class='createTagInputMultiple mr-1 mb-2 form-control' data-autocomplete='tags' placeholder='{{ 'Add a tag'|trans }}' />
          {# ADD A RESOURCE LINK #}
          <div class='input-group mb-2 mr-2'>
            <input type='text' aria-label='{{ 'Add a link'|trans }}' id='addLinkItemsInput' name='items_links' class='form-control' placeholder='{{ 'Add a link'|trans }}' />
            <div class='input-group-append'>
              <select id='addLinkCatFilter' class='brl-none form-control' aria-label='{{ 'Limit category'|trans }}'>
                <option selected value=''>{{ 'Any category'|trans }}</option>
                {% for cat in itemsCategoryArr %}
                  <option value='{{ cat.id }}'>{{ cat.title }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          {# ADD AN EXPERIMENT LINK #}
          <div class='input-group mb-2 mr-2'>
            <input type='text' aria-label='{{ 'Link to an experiment'|trans }}' id='addLinkExpInput' name='experiments_links' class='form-control' placeholder='{{ 'Link to an experiment'|trans }}' />
            <div class='input-group-append'>
              <select id='addLinkOwnerFilter' class='brl-none form-control' aria-label='{{ 'Limit author'|trans }}'>
                <option selected value=''>{{ 'Any author'|trans }}</option>
                {% for user in usersArr %}
                  <option value='{{ user.userid }}'>{{ user.fullname }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          {# SAVE AND RESET BUTTONS #}
          <button data-action='save-multi-changes' type='submit' class='btn btn-primary mr-1 mb-2'>{{ 'Save'|trans }}</button>
          <button data-action='clear-form' data-target='multiChangesForm' type='reset' class='btn btn-ghost mb-2'>{{ 'Reset'|trans }}</button>
        </form>
      </div>

      {% if App.Users.userData.display_mode == 'it' %}
        <div class='d-flex flex-column' id='itemList'>
        {% for item in itemsArr|slice(0, DisplayParams.limit) %}
          {% include 'show-item.html' %}
        {% endfor %}
        </div>
      {% elseif App.Users.userData.display_mode == 'tb' -%}
        <table id='itemList' class='table item-table mt-2' aria-describedby='pageTitle'>
          <thead class='with-top'>
            <tr>
              <th>
                <div class='d-flex justify-content-between'>
                  <span>{{ 'Date'|trans }}</span>
                  <a href='#' data-action='reorder-entities' data-orderby='date'><i class='fas {{ sortIcon("date") }}'></i></a>
                </div>
              </th>
              <th class='title-item-table col-8'>
                <div class='d-flex justify-content-between'>
                  {{ 'Title'|trans }} <a href='#' data-action='reorder-entities' data-orderby='title'><i class='fas {{ sortIcon("title") }}'></i></a>
                </div>
              </th>
              <th class='step-item-table col-2'>
                {{ 'Next step'|trans }}
              </th>
              <th class='category-item-table w-20'>
                <div class='d-flex justify-content-between'>
                  <span>{{ 'Category'|trans }}</span>
                  <a href='#' data-action='reorder-entities' data-orderby='cat'><i class='fas {{ sortIcon("cat") }}'></i></a>
                </div>
              </th>
              <th class='category-item-table w-20'>
                <div class='d-flex justify-content-between'>
                  <span>{{ 'Status'|trans }}</span>
                  <a href='#' data-action='reorder-entities' data-orderby='status'><i class='fas {{ sortIcon("status") }}'></i></a>
                </div>
              </th>
              <th class='tags-item-table w-20'>
                {{ 'Tags'|trans }}
              </th>
              <th class='actions-item-rating w-10'>
                <div class='d-flex justify-content-between'>
                  {# add mr-1 here because column is small #}
                  <span class='mr-1'>{{ 'Rating'|trans }}</span>
                  <a href='#' data-action='reorder-entities' data-orderby='rating'><i class='fas {{ sortIcon("rating") }}'></i></a>
                </div>
              </th>
              <th class='actions-item-owner col-2'>
                <div class='d-flex justify-content-between'>
                  <span>{{ 'Owner'|trans }}</span>
                  <a href='#' data-action='reorder-entities' data-orderby='user'><i class='fas {{ sortIcon("user") }}'></i></a>
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            {% for item in itemsArr|slice(0, DisplayParams.limit) %}
              {% include 'show-item-table.html' %}
            {% endfor %}
          </tbody>
        </table>
      {% endif %}

      {# LOAD MORE button #}
      <div class='text-center page-buttons mt-2'>
        <button class='btn btn-primary ' type='button' id='loadMoreBtn' data-action='load-more'>{{ 'Load more'|trans }}</button>
      </div>

  {% endif %}

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

{% endblock body %}