{% load static %}
{% load dynamic_url %}
        <div class="col">
          <div class="card shadow-sm">
            {% if d.item.image.exists %}
            <a href="{{d.item.get_absolute_url}}"><img class="card-img-top" src="{{ d.item.image.first.image.url }}" alt="{{ d.item }}"></a>
            {% else %}
            <!-- Do not show the "Coming soon" image when running in a single card column mode (e.g. on mobile) -->
            <a href="{{d.item.get_absolute_url}}"><img class="card-img-top d-none d-sm-block" src="{% static DEFAULT_CARD_IMAGE %}" alt="{{ d.item }}"></a>
            {% endif %}
            <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.label|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">
                  {% if d.type == "catalog" %}
                  <tr>
                    <th class="w-33" scope="row">Manufacturer</th>
                    <td>
                      <a href="{% url 'filtered' _filter="manufacturer" search=d.item.manufacturer.slug %}">{{ d.item.manufacturer }}{% if d.item.manufacturer.website %}</a> <a href="{{ d.item.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}
                    </td>
                  </tr>
                  <tr>
                    <th class="w-33" scope="row">Scales</th>
                    <td>{{ d.item.get_scales }}</td>
                  </tr>
                  {% elif d.type == "book" %}
                  <tr>
                    <th class="w-33" scope="row">Authors</th>
                    <td>
                      <ul class="mb-0 list-unstyled">{% for a in d.item.authors.all %}<li>{{ a }}</li>{% endfor %}</ul>
                    </td>
                  </tr>
                  <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>
                  {% endif %}
                  <tr>
                    <th scope="row">Language</th>
                    <td>{{ d.item.get_language_display }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Pages</th>
                    <td>{{ d.item.number_of_pages|default:"-" }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Year</th>
                    <td>{{ d.item.publication_year|default:"-" }}</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="{% dynamic_admin_url 'bookshelf' d.type d.item.pk %}">Edit</a>{% endif %}
              </div>
            </div>
          </div>
        </div>