{% load i18n %}
<div class="card card-admin-table">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col">
        <h4 class="card-title">
          {% trans "Media" context "admin theme media assets" %}
        </h4>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#uploadMedia">
          {% trans "Upload" context "admin theme media assets" %}
        </button>
      </div>
    </div>
  </div>
  {% with theme.media.all as media %}
    <table class="table">
      <tr>
        <th style="width: 1px;">&nbsp;</th>
        <th style="width: 250px;">{% trans "Name" context "admin theme media assets" %}</th>
        <th style="width: 250px;">{% trans "Modified" context "admin theme media assets" %}</th>
        <th>{% trans "Size" context "admin theme media assets" %}</th>
        <th>{% trans "Type" context "admin theme media assets" %}</th>
        <th>{% trans "Dimensions" context "admin theme media assets" %}</th>
        <th style="width: 1px;">
          <input type="checkbox" {% if not media %}disabled{% endif %}>
        </th>
      </tr>
      {% for item in media %}
        <tr>
          <td class="pr-0">
            {% if item.thumbnail %}
              <a href="{{ item.file.url }}" class="btn btn-thumbnail" style='background-image: url("{{  item.thumbnail.url }}?shva=1")' target="_blank"></a>
            {% else %}
              <a class="btn btn-light btn-sm" href="{{ item.file.url }}" target="_blank">
                <span class="far fa-file"></span>
              </a>
            {% endif %}
          </td>
          <td class="small">
            <a href="{{ item.file.url }}" class="item-name" target="_blank">
              {{ item }}
            </a>
          </td>
          <td class="small">
            <abbr data-timestamp="{{ item.modified_on.isoformat }}" data-format="LL">
              {{ item.modified_on }}
            </abbr>
          </td>
          <td class="small">
            {{ item.size|filesizeformat }}
          </td>
          <td class="small">
            {{ item.type }}
          </td>
          <td class="small">
            {% if item.width and item.height %}
              {{ item.width }}&times;{{ item.height }}
            {% else %}
              &nbsp;
            {% endif %}
          </td>
          <td class="row-select">
            <input type="checkbox" form="delete-media" name="item" value="{{ item.pk }}">
          </td>
        </tr>
      {% empty %}
        <tr class="blankslate">
          <td colspan="8">{% trans "This theme has no media." context "admin theme media assets" %}</td>
        </tr>
      {% endfor %}
    </table>
    {% if media %}
      <div class="card-body text-right">
        <form id="delete-media" action="{% url 'misago:admin:themes:delete-media' pk=theme.pk %}" method="post">
          {% csrf_token %}
          <button class="btn btn-light btn-sm" disabled>
            {% trans "Delete selected" context "admin theme media assets" %}
          </button>
        </form>
      </div>
    {% endif %}
  {% endwith %}
</div><!-- /.table-panel -->