{% load rules %}
{# Projectroles dependency #}
{% load projectroles_common_tags %}
{% load filesfolders_tags %}
{% has_perm 'filesfolders.view_data' request.user project as can_view_data %}
{% has_perm 'filesfolders.share_public_link' request.user project as can_share_link %}
{% get_app_setting 'filesfolders' 'allow_public_links' project=project as allow_public_links %}

<style type="text/css">
  .table#sodar-ff-details-table tr td:nth-child(1) {
    padding-right: 0;
    width: 20px;
  }
  .table#sodar-ff-details-table tr td:nth-child(2) {
    padding-left: 4px;
  }

  /* Responsive modifications */
  @media screen and (max-width: 1100px) {
    .table#sodar-ff-details-table tr th:nth-child(4),
    .table#sodar-ff-details-table tr td:nth-child(5) {
      display: none;
    }
  }
  @media screen and (max-width: 900px) {
    .table#sodar-ff-details-table tr th:nth-child(5),
    .table#sodar-ff-details-table tr td:nth-child(6) {
      display: none;
    }
  }
  @media screen and (max-width: 750px) {
    .table#sodar-ff-details-table tr th:nth-child(3),
    .table#sodar-ff-details-table tr td:nth-child(4) {
      display: none;
    }
  }
  @media screen and (max-width: 500px) {
    .table#sodar-ff-details-table tr th:nth-child(2),
    .table#sodar-ff-details-table tr td:nth-child(3) {
      display: none;
    }
  }
</style>

{% if can_view_data %}
  <table class="table table-striped sodar-card-table"
         id="sodar-ff-details-table">
    <thead>
      {% include 'filesfolders/_list_header.html' with details_card_mode=True %}
    </thead>
    <tbody>
      {% get_details_items project as items %}
      {% if items|length > 0 %}
        {% for item in items %}
          {% include 'filesfolders/_file_item.html' with item=item can_share_link=can_share_link details_card_mode=True %}
        {% endfor %}
      {% else %}
        <tr>
          <td class="font-italic text-center" colspan="6">No files or links.</td>
        </tr>
      {% endif %}
    </tbody>
  </table>
{% endif %}