{% extends "base.html" %}

      {% block header %}
        <p class="lead text-muted">Results found: {{ matches }}</p>
      {% endblock %}
      {% block cards_layout %}
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
      {% block cards %}
        {% for d in data %}
        <div class="col">
          <div class="card shadow-sm">
            {% for i in d.image.all %}
            {% if forloop.first %}<a href="{{d.get_absolute_url}}"><img src="{{ i.image.url }}" alt="Card image cap"></a>{% endif %}
            {% endfor %}
            <div class="card-body">
              <p class="card-text" style="position: relative;">
                <strong>{{ d }}</strong>
                <a class="stretched-link" href="{{ d.get_absolute_url }}"></a>
              </p>
              {% if d.tags.all %}
              <p class="card-text"><small>Tags:</small>
                {% for t in d.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">Data</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th width="35%" scope="row">Type</th>
                    <td>{{ d.rolling_class.type }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Company</th>
                    <td>
                      <a href="{% url 'filtered' _filter="company" search=d.rolling_class.company.slug %}"><abbr title="{{ d.rolling_class.company.extended_name }}">{{ d.rolling_class.company }}</abbr></a>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">Class</th>
                    <td>{{ d.rolling_class.identifier }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Road number</th>
                    <td>{{ d.road_number }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Era</th>
                    <td>{{ d.era }}</td>
                  </tr>
                  <tr>
                    <th width="35%" scope="row">Manufacturer</th>
                    <td>{%if d.manufacturer %}
                      <a href="{% url 'filtered' _filter="manufacturer" search=d.manufacturer.slug %}">{{ d.manufacturer }}{% if d.manufacturer.website %}</a> <a href="{{ d.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}
                    {% endif %}</td>
                  </tr>
                  <tr>
                    <th scope="row">Scale</th>
                    <td><a href="{% url 'filtered' _filter="scale" search=d.scale.slug %}"><abbr title="{{ d.scale.ratio }} - {{ d.scale.tracks }}">{{ d.scale }}</abbr></a></td>
                  </tr>
                  <tr>
                    <th scope="row">SKU</th>
                    <td>{{ d.sku }}</td>
                  </tr>
                </tbody>
              </table>
              {% if d.decoder %}
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th colspan="2" scope="row">DCC data</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th width="35%" scope="row">Decoder</th>
                    <td>{{ d.decoder }}</td>
                  </tr>
                  <tr>
                    <th scope="row">Address</th>
                    <td>{{ d.address }}</td>
                  </tr>
                </tbody>
              </table>
              {% endif %}
              <div class="d-grid gap-2 mb-1 d-md-block">
               <a class="btn btn-sm btn-outline-primary" href="{{d.get_absolute_url}}">Show all data</a>
                {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' d.pk %}">Edit</a>{% endif %}
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      {% endblock %}
      </div>
      {% endblock %}