{% import "components/nothing.html" as nothing with context %}
<div class="section__body no-padding files" {% if filetype %}data-type="{{ filetype }}"{% endif %} data-fragment-id="files{% if filetype %}-{{ filetype }}{% endif %}">
  {% if files.length %}
    <table class="data-table">
      <colgroup>
        {% if not sidebar %}<col class="col--checkbox">{% endif %}
        <col class="col--name">
        <col class="col--size">
        <col class="col--operation">
      </colgroup>
      <thead>
        <tr>
          {% if not sidebar %}
          <th class="col--checkbox">
            <label class="compact checkbox">
              <input type="checkbox" name="select_all" data-checkbox-toggle="{{ filetype|default('files') }}">
            </label>
          </th>
          {% endif %}
          <th class="col--name">{{ _('Filename') }}</th>
          <th class="col--size">{{ _('Size') }}</th>
          <th class="col--operation"><span class="icon icon-wrench"></span></th>
        </tr>
      </thead>
      <tbody>
        {%- for file in files -%}
        <tr data-filename="{{ file.name }}" data-size="{{ file.size }}">
          {% if not sidebar %}
          <td class="col--checkbox">
            <label class="compact checkbox">
              <input type="checkbox" data-checkbox-group="{{ filetype|default('files') }}" data-checkbox-range>
            </label>
          </td>
          {% endif %}
          <td class="col--name" data-preview>
            <a href="{{ urlForFile(file.name, filetype) }}">{{ file.name }}</a>
          </td>
          <td class="col--size">{{ size(file.size) }}</td>
          <td class="col--operation">
            <a href="{{ urlForFile(file.name, filetype) }}" class="icon icon-download"></a>
          </td>
        </tr>
        {%- endfor -%}
      </tbody>
    </table>
  {% else %}
    {{ nothing.render('There are no files currently.', compact=true) }}
  {% endif %}
</div>