{{ svgPreload('folder_20', 'file_20') }}
{{ bc(bc) }}

{% set do_show_more = search_count > 0 and files|length < search_count %}
{% if do_show_search %}
  {% set placeholder = "files_#{collection}_search_ph"|lang %}

  <div class="files-search-wrap">
    <div class="files-search" id="files_search">
      <div class="files-search-icon">{{ svg('search_20') }}</div>
      <input
          type="text"
          value="{{ search_query }}"
          placeholder="{% if placeholder %}{{ placeholder }}{% else %}Enter your request..{% endif %}"
          id="files_search_input">
      <div class="files-search-clear-icon" id="files_search_clear_icon" style="display: {% if search_query %}block{% else %}none{% endif %}">{{ svg('clear_16') }}</div>
    </div>

    <div class="files-search-results-info" id="files_search_info" style="display: {% if search_query %}block{% else %}none{% endif %}">
      <div class="files-search-results-info-inner">
        <div class="files-search-results-info-spinner">{% include 'spinner.twig' %}</div>
        <span id="files_search_info_text">{% if search_query %}{{ "files_search_results_count"|plural(search_count) }}{% else %}&nbsp;{% endif %}</span>
      </div>
    </div>
  </div>
{% endif %}

<div class="files-list">
  <div id="files_list">
    {% include 'files_list.twig' %}
  </div>
  <div class="files-list-show-more no-select" id="files_show_more"{% if not do_show_more %} style="display: none"{% endif %}>
    <span class="files-list-show-more-label">{{ "files_show_more"|lang }}</span>
    {% include 'spinner.twig' with {spinner_id: 'files_show_more_spinner'} %}
  </div>
</div>

<div id="files_list_hidden" style="display: none"></div>

{% js %}
{% if do_show_search %}
cur.search = new FileSearch({{ js_params|json_encode|raw }});
{% endif %}
{% endjs %}