{% load helpers %}

<div class="card">
  <h5 class="card-header">
    Images
  </h5>
  <div class="card-body">
    {% with images=object.images.all %}
      {% if images.exists %}
        <table class="table table-hover">
          <tr>
            <th>Name</th>
            <th>Size</th>
            <th>Created</th>
            <th></th>
          </tr>
          {% for attachment in images %}
            <tr{% if not attachment.size %} class="table-danger"{% endif %}>
              <td>
                <i class="mdi mdi-file-image-outline"></i>
                <a class="image-preview" href="{{ attachment.image.url }}" target="_blank">{{ attachment }}</a>
              </td>
              <td>{{ attachment.size|filesizeformat }}</td>
              <td>{{ attachment.created|annotated_date }}</td>
              <td class="text-end noprint">
                {% if perms.extras.change_imageattachment %}
                  <a href="{% url 'extras:imageattachment_edit' pk=attachment.pk %}" class="btn btn-warning btn-sm lh-1" title="Edit Image">
                    <i class="mdi mdi-pencil" aria-hidden="true"></i>
                  </a>
                {% endif %}
                {% if perms.extras.delete_imageattachment %}
                  <a href="{% url 'extras:imageattachment_delete' pk=attachment.pk %}" class="btn btn-danger btn-sm lh-1" title="Delete Image">
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
                  </a>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
        </table>
      {% else %}
        <div class="text-muted">None</div>
      {% endif %}
    {% endwith %}
  </div>
  {% if perms.extras.add_imageattachment %}
    <div class="card-footer text-end noprint">
      <a href="{% url 'extras:imageattachment_add' %}?content_type={{ object|content_type_id }}&object_id={{ object.pk }}" class="btn btn-primary btn-sm">
        <i class="mdi mdi-plus-thick" aria-hidden="true"></i> Attach an image
      </a>
    </div>
  {% endif %}
</div>