{% load i18n %}
<div class="card card-admin-table mb-3">
  <div class="card-body">
    <div class="row align-items-center">
      <div class="col">
        <h4 class="card-title">
          {% trans "CSS files" %}
        </h4>
      </div>
      <div class="col-auto">
        <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#uploadCss">
          {% trans "Upload" %}
        </button>
      </div>
      <div class="col-auto">
        <a href="{% url 'misago:admin:themes:new-css-link' pk=theme.pk %}" class="btn btn-light btn-sm">
          {% trans "Link" %}
        </a>
      </div>
      <div class="col-auto">
        <a href="{% url 'misago:admin:themes:new-css-file' pk=theme.pk %}" class="btn btn-light btn-sm">
          {% trans "Create" %}
        </a>
      </div>
    </div>
  </div>
  {% with theme.css.all as css %}
    <table class="table">
      <tr>
        <th style="width: 1px;">&nbsp;</th>
        <th style="width: 250px;">{% trans "Name" %}</th>
        <th style="width: 250px;">{% trans "Modified" %}</th>
        <th>{% trans "Size" %}</th>
        <th style="width: 1px;">&nbsp;</th>
        <th style="width: 1px;">&nbsp;</th>
        <th style="width: 1px;">&nbsp;</th>
        <th style="width: 1px;">
          <input type="checkbox" {% if not css %}disabled{% endif %}>
        </th>
      </tr>
      {% for item in css %}
        <tr>
          <td class="pr-0">
            <a class="btn btn-light btn-sm" href="{% if item.url %}{{ item.url }}{% else %}{{ item.source_file.url }}{% endif %}" target="blank">
              <span class="far fa-file"></span>
            </a>
          </td>
          <td class="small">
            {% if item.url %}
              <a href="{% url 'misago:admin:themes:edit-css-link' pk=theme.pk css_pk=item.pk %}" class="item-name">
                {{ item }}
              </a>
            {% else %}
              <a href="{% url 'misago:admin:themes:edit-css-file' pk=theme.pk css_pk=item.pk %}" class="item-name">
                {{ item }}
              </a>
            {% endif %}
          </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>
            <button class="btn btn-light btn-sm btn-move" form="move-down-{{ item.pk }}" data-tooltip="top" title="{% trans 'Move down' %}" {% if forloop.last %}disabled{% endif %}>
              <span class="fa fa-chevron-down"></span>
            </button>
          </td>
          <td>
            <button class="btn btn-light btn-sm btn-move" form="move-up-{{ item.pk }}" data-tooltip="top" title="{% trans 'Move up' %}" {% if forloop.first %}disabled{% endif %}>
              <span class="fa fa-chevron-up"></span>
            </button>
          </td>
          <td>
            {% if item.url %}
              <a href="{% url 'misago:admin:themes:edit-css-link' pk=theme.pk css_pk=item.pk %}" class="btn btn-light btn-sm">
                {% trans "Edit" %}
              </a>
            {% else %}
              <a href="{% url 'misago:admin:themes:edit-css-file' pk=theme.pk css_pk=item.pk %}" class="btn btn-light btn-sm">
                {% trans "Edit" %}
              </a>
            {% endif %}
          </td>
          <td class="row-select">
            <input type="checkbox" form="delete-css" name="item" value="{{ item.pk }}">
          </td>
        </tr>
      {% empty %}
        <tr class="blankslate">
          <td colspan="8">{% trans "This theme has no CSS files." %}</td>
        </tr>
      {% endfor %}
    </table>
    {% if css %}
      <div class="card-body text-right">
        <form id="delete-css" action="{% url 'misago:admin:themes:delete-css' pk=theme.pk %}" method="post">
          {% csrf_token %}
          <button class="btn btn-light btn-sm" disabled>
            {% trans "Delete selected" %}
          </button>
        </form>
      </div>
    {% endif %}
    {% for item in css %}
      <form action="{% url 'misago:admin:themes:move-css-up' pk=theme.pk css_pk=item.pk %}" method="post" id="move-up-{{ item.pk }}">
        {% csrf_token %}
      </form>
      <form action="{% url 'misago:admin:themes:move-css-down' pk=theme.pk css_pk=item.pk %}" method="post" id="move-down-{{ item.pk }}">
        {% csrf_token %}
      </form>
    {% endfor %}
  {% endwith %}
</div><!-- /.table-panel -->