{% load static %}

      <div class="col">
        <div class="card shadow-sm">
          {% if d.type == "magazine" %}
          <a href="{{ d.item.get_absolute_url }}">
            {% if d.item.image and d.type == "magazine" %}
            <img class="card-img-top" src="{{ d.item.image.url }}" alt="{{ d.item }}">
            {% elif d.item.issue.first.image.exists %}
            {% with d.item.issue.first as i %}
            <img class="card-img-top" src="{{ i.image.first.image.url }}" alt="{{ d.item }}">
            {% endwith %}
            {% else %}
            <!-- Do not show the "Coming soon" image when running in a single card column mode (e.g. on mobile) -->
            <img class="card-img-top d-none d-sm-block" src="{% static DEFAULT_CARD_IMAGE %}" alt="{{ d.item }}">
            {% endif %}
          </a>
          {% endif %}

          {% if d.type == "issue" %}
          <a href="{{ d.item.get_absolute_url }}">
            {% if d.item.image.exists %}
            <img class="card-img-top" src="{{ d.item.image.first.image.url }}" alt="{{ d.item }}">
            {% else %}
            <!-- Do not show the "Coming soon" image when running in a single card column mode (e.g. on mobile) -->
            <img class="card-img-top d-none d-sm-block" src="{% static DEFAULT_CARD_IMAGE %}" alt="{{ d.item }}">
            {% endif %}
          </a>
          {% endif %}
          </a>
          <div class="card-body">
            <p class="card-text" style="position: relative;">
              <strong>{{ d.item }}</strong>
              <a class="stretched-link" href="{{ d.item.get_absolute_url }}"></a>
            </p>
            {% if d.item.tags.all %}
            <p class="card-text"><small>Tags:</small>
              {% for t in d.item.tags.all %}<a href="{% url 'filtered' _filter="tag" search=t.slug %}" class="badge rounded-pill bg-primary">
              {{ t.name }}</a>{# new line is required #}
              {% endfor %}
            </p>
            {% endif %}
            <table class="table table-striped">
              <thead>
                <tr>
                  <th colspan="2" scope="row">
                    {{ d.type | capfirst }}
                    <div class="float-end">
                      {% if not d.item.published %}
                      <span class="badge text-bg-warning">Unpublished</span>
                      {% endif %}
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody class="table-group-divider">
                <tr>
                  <th class="w-33" scope="row">Publisher</th>
                  <td><img src="{{ d.item.publisher.country.flag }}" alt="{{ d.item.publisher.country }}"> {{ d.item.publisher }}</td>
                </tr>
                <tr>
                  <th class="w-33" scope="row">Language</th>
                  <td>{{ d.item.get_language_display }}</td>
                </tr>
              </tbody>
            </table>
            <div class="d-grid gap-2 mb-1 d-md-block">
              <a class="btn btn-sm btn-outline-primary" href="{{ d.item.get_absolute_url }}">Show all data</a>
              {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:bookshelf_magazine_change'  d.item.pk %}">Edit</a>{% endif %}
            </div>
          </div>
        </div>
      </div>