{% extends 'base.html' %}
{% load markdown %}

        {% block header %}
        <h1 class="fw-light">{{ rolling_stock }}</h1>
        {% if rolling_stock.tags.all %}
        <p><small>Tags:</small>
         {% for t in rolling_stock.tags.all %}<span class="badge bg-primary">
          {{ t.name }}</span>{# new line is required #}
          {% endfor %}
        </p>
        {% endif %}
        {% endblock %}
        {% block cards %}
        {% for t in rolling_stock.image.all %}
        <div class="col">
          <img class="img-thumbnail" src="{{ t.image.url }}" alt="Rolling stock image">
        </div>
        {% endfor %}
        {% endblock %}
        {% block extra_content %}
        <section class="py-4 text-start container">
          <div class="row">
            <div class="mx-auto">
              <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <button class="nav-link active" id="nav-summary-tab" data-bs-toggle="tab" data-bs-target="#nav-summary" type="button" role="tab" aria-controls="nav-summary" aria-selected="true">Summary</button>
                  <button class="nav-link" id="nav-model-tab" data-bs-toggle="tab" data-bs-target="#nav-model" type="button" role="tab" aria-controls="nav-model" aria-selected="false">Model data</button>
                  <button class="nav-link" id="nav-class-tab" data-bs-toggle="tab" data-bs-target="#nav-class" type="button" role="tab" aria-controls="nav-class" aria-selected="false">Class data</button>
                  {% if rolling_stock.decoder %}<button class="nav-link" id="nav-dcc-tab" data-bs-toggle="tab" data-bs-target="#nav-dcc" type="button" role="tab" aria-controls="nav-dcc" aria-selected="false">DCC</button>{% endif %}
                  {% if rolling_stock.notes %}<button class="nav-link" id="nav-notes-tab" data-bs-toggle="tab" data-bs-target="#nav-notes" type="button" role="tab" aria-controls="nav-notes" aria-selected="false">Notes</button>{% endif %}
                  {% if rolling_stock.property.count > 0 %}<button class="nav-link" id="nav-properties-tab" data-bs-toggle="tab" data-bs-target="#nav-properties" type="button" role="tab" aria-controls="nav-properties" aria-selected="false">Properties</button>{% endif %}
                  {% if rolling_stock.document.count > 0 %}<button class="nav-link" id="nav-documents-tab" data-bs-toggle="tab" data-bs-target="#nav-documents" type="button" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</button>{% endif %}
                 </div>
              </nav>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-summary" role="tabpanel" aria-labelledby="nav-summary-tab">
                  <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>{{ rolling_stock.rolling_class.type }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Company</th>
                        <td><abbr title="{{ rolling_stock.rolling_class.company.extended_name }}">{{ rolling_stock.rolling_class.company }}</abbr></td>
                      </tr>
                      <tr>
                        <th scope="row">Class</th>
                        <td>{{ rolling_stock.rolling_class.identifier }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Road number</th>
                        <td>{{ rolling_stock.road_number }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Era</th>
                        <td>{{ rolling_stock.era }}</td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Model data</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th width="35%" scope="row">Manufacturer</th>
                        <td>{% if rolling_stock.manufacturer.website %}<a href="{{ rolling_stock.manufacturer.website }}">{% endif %}{{ rolling_stock.manufacturer }}{% if rolling_stock.manufacturer.website %}</a>{% endif %}</th>
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
                        <td><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.gauge }}">{{ rolling_stock.scale }}</abbr></td>
                      </tr>
                      <tr>
                        <th scope="row">SKU</th>
                        <td>{{ rolling_stock.sku }}</td>
                      </tr>
                    </tbody>
                  </table>
                  {% if rolling_stock.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>{{ rolling_stock.decoder }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Address</th>
                        <td>{{ rolling_stock.address }}</td>
                      </tr>
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                <div class="tab-pane fade" id="nav-model" role="tabpanel" aria-labelledby="nav-model-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Model data</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th width="35%" scope="row">Manufacturer</th>
                        <td>{% if rolling_stock.manufacturer.website %}<a href="{{ rolling_stock.manufacturer.website }}">{% endif %}{{ rolling_stock.manufacturer }}{% if rolling_stock.manufacturer.website %}</a>{% endif %}</th>
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
                        <td><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.gauge }}">{{ rolling_stock.scale }}</abbr></td>
                      </tr>
                      <tr>
                        <th scope="row">SKU</th>
                        <td>{{ rolling_stock.sku }}</td>
                      </tr>
                      <tr>
                        <th scope="row">ERA</th>
                        <td>{{ rolling_stock.era }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Production year</th>
                        <td>{{ rolling_stock.production_year | default_if_none:"" }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Purchase date</th>
                        <td>{{ rolling_stock.purchase_date | default_if_none:"" }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane fade" id="nav-class" role="tabpanel" aria-labelledby="nav-class-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Class data</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th width="35%" scope="row">Class</th>
                        <td>{{ rolling_stock.rolling_class }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Type</th>
                        <td>{{ rolling_stock.rolling_class.type }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Company</th>
                        <td>{{ rolling_stock.rolling_class.company }} ({{ rolling_stock.rolling_class.company.extended_name }})</td>
                      </tr>
                      <tr>
                        <th scope="row">Country</th>
                        <td>{{ rolling_stock.rolling_class.company.country.name }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Manufacturer</th>
                        <td>{{ rolling_stock.rolling_class.manufacturer }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane fade" id="nav-dcc" role="tabpanel" aria-labelledby="nav-dcc-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">DCC data</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th width="35%" scope="row">Address</th>
                        <td>{{ rolling_stock.address }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Name</th>
                        <td>{{ rolling_stock.decoder.name }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Manufacturer</th>
                        <td>{{ rolling_stock.decoder.manufacturer }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Version</th>
                        <td>{{ rolling_stock.decoder.version }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Interface</th>
                        <td>{{ rolling_stock.decoder.get_interface_display }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Sound</th>
                        <td>{{ rolling_stock.decoder.sound | yesno:"Yes,No" }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane fade" id="nav-notes" role="tabpanel" aria-labelledby="nav-notes-tab">
                  {{ rolling_stock.notes | markdown | safe }}
                </div>
                <div class="tab-pane fade" id="nav-properties" role="tabpanel" aria-labelledby="nav-properties-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Properties</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for p in rolling_stock.property.all %}
                      <tr>
                        <th scope="row">{{ p.property }}</th>
                        <td>{{ p.value }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane fade" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="3" scope="row">Documents</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for d in rolling_stock.document.all %}
                      <tr>
                        <td>{{ d.description }}</td>
                        <td><a href="{{ d.file.url }}">{{ d.filename }}</a></td>
                        <td class="text-end">{{ d.file.size | filesizeformat }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                {% if request.user.is_staff %}<a class="btn btn-sm btn-outline-danger" href="{% url 'admin:roster_rollingstock_change' rolling_stock.pk %}">Edit</a>{% endif %}
              </div>
            </div>
          </div>
        </section>
        {% endblock %}