{% extends 'base.html' %}

        {% block header %}
        {% if rolling_stock.tags.all %}
        <p><small>Tags:</small>
          {% for t in rolling_stock.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 %}
        <small class="text-muted">Updated {{ rolling_stock.updated_time | date:"M d, Y H:i" }}</small>
        {% endblock %}
        {% block carousel %}
        <div class="row">
          <div id="carouselControls" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="10000">
            <div class="carousel-inner">
              {% for t in rolling_stock.image.all %}
              {% if forloop.first %}
              <div class="carousel-item active">
              {% else %}
              <div class="carousel-item">
              {% endif %}
                <img src="{{ t.image.url }}" class="d-block w-100 rounded img-thumbnail" alt="...">
              </div>
              {% endfor %}
            </div>
            {% if rolling_stock.image.count > 1 %}
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden"><i class="bi bi-chevron-left"></i></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden"><i class="bi bi-chevron-right"></i></span>
            </button>
            {% endif %}
          </div>
        </div>
        {% endblock %}
        {% block cards %}
        {% endblock %}
        {% block extra_content %}
        <section class="py-4 text-start container">
          <div class="row">
            <div class="mx-auto">
              <nav class="nav nav-tabs d-none d-lg-flex flex-row mb-2" 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</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</button>
                <button class="nav-link" id="nav-company-tab" data-bs-toggle="tab" data-bs-target="#nav-company" type="button" role="tab" aria-controls="nav-company" aria-selected="false">Company</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 documents or decoder_documents %}<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 %}
                {% if journal %}<button class="nav-link" id="nav-journal-tab" data-bs-toggle="tab" data-bs-target="#nav-journal" type="button" role="tab" aria-controls="nav-journal" aria-selected="false">Journal</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 set %}<button class="nav-link" id="nav-set-tab" data-bs-toggle="tab" data-bs-target="#nav-set" type="button" role="tab" aria-controls="nav-set" aria-selected="false">Set</button>{% endif %}
                {% if consists %}<button class="nav-link" id="nav-consists-tab" data-bs-toggle="tab" data-bs-target="#nav-consists" type="button" role="tab" aria-controls="nav-consists" aria-selected="false">Consists</button>{% endif %}
              </nav>
              <select class="form-select d-lg-none mb-2" id="tabSelector" aria-label="Tab selector">
                <option value="nav-summary" selected>Summary</option>
                <option value="nav-model">Model</option>
                <option value="nav-class">Class</option>
                <option value="nav-company">Company</option>
                {% if rolling_stock.decoder %}<option value="nav-dcc">DCC</option>{% endif %}
                {% if documents or decoder_documents %}<option value="nav-documents">Documents</option>{% endif %}
                {% if journal %}<option value="nav-journal">Journal</option>{% endif %}
                {% if rolling_stock.notes %}<option value="nav-notes">Notes</option>{% endif %}
                {% if set %}<option value="nav-set">Set</option>{% endif %}
                {% if consists %}<option value="nav-consists">Consists</option>{% endif %}
              </select>
              {% with class=rolling_stock.rolling_class company=rolling_stock.rolling_class.company %}
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane 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 class="table-group-divider">
                      <tr>
                        <th class="w-33" scope="row">Type</th>
                        <td>{{ class.type }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Company</th>
                        <td>
                            <a href="{% url 'filtered' _filter="company" search=company.slug %}">{{ company }}</a> {{ company.extended_name_pp }}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Class</th>
                        <td>{{ 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 class="table-group-divider">
                      <tr>
                        <th class="w-33" scope="row">Manufacturer</th>
                        <td>{%if rolling_stock.manufacturer %}
                          <a href="{% url 'filtered' _filter="manufacturer" search=rolling_stock.manufacturer.slug %}">{{ rolling_stock.manufacturer }}</a>{% if rolling_stock.manufacturer.website %} <a href="{{ rolling_stock.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=rolling_stock.scale %}"><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.tracks }}">{{ rolling_stock.scale }}</abbr></a></td>
                      </tr>
                      <tr>
                        <th scope="row">Item number</th>
                        <td>{{ rolling_stock.item_number }}{%if rolling_stock.set %} | <a class="badge text-bg-primary" href="{% url 'manufacturer' manufacturer=rolling_stock.manufacturer.slug search=rolling_stock.item_number_slug %}">SET</a>{% endif %}</td>
                      </tr>
                    </tbody>
                  </table>
                  {% if rolling_stock.decoder or rolling_stock.decoder_interface %}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">DCC data</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                      <tr>
                        <th class="w-33" scope="row">Interface</th>
                        <td>{{ rolling_stock.get_decoder_interface_display }}</td>
                      </tr>
                      {% if rolling_stock.decoder %}
                      <tr>
                        <th scope="row">Decoder</th>
                        <td>{{ rolling_stock.decoder }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Address</th>
                        <td>{{ rolling_stock.address }}</td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                <div class="tab-pane" id="nav-model" role="tabpanel" aria-labelledby="nav-model-tab">
                  {{ rolling_stock.description | safe }}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Model data</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                      <tr>
                        <th class="w-33" scope="row">Manufacturer</th>
                        <td>
                          {%if rolling_stock.manufacturer %}
                          <a href="{% url 'filtered' _filter="manufacturer" search=rolling_stock.manufacturer.slug %}">{{ rolling_stock.manufacturer }}</a>{% if rolling_stock.manufacturer.website %} <a href="{{ rolling_stock.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}
                          {% else %}-{% endif %}
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Scale</th>
                        <td><a href="{% url 'filtered' _filter="scale" search=rolling_stock.scale %}"><abbr title="{{ rolling_stock.scale.ratio }} - {{ rolling_stock.scale.tracks }}">{{ rolling_stock.scale }}</abbr></a></td>
                      </tr>
                      <tr>
                        <th scope="row">Item number</th>
                        <td>{{ rolling_stock.item_number }}{%if rolling_stock.set %} | <a class="badge text-bg-primary" href="{% url 'manufacturer' manufacturer=rolling_stock.manufacturer.slug search=rolling_stock.item_number_slug %}">SET</a>{% endif %}</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:"-" }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Purchase date</th>
                        <td>{{ rolling_stock.purchase_date|default:"-" }}</td>
                      </tr>
                    </tbody>
                  </table>
                  {% if properties %}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Properties</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    {% for p in properties %}
                      <tr>
                        <th class="w-33" scope="row">{{ p.property }}</th>
                        <td>{{ p.value }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                <div class="tab-pane" id="nav-class" role="tabpanel" aria-labelledby="nav-class-tab">
                  {{ class.description | safe }}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Class data</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                      <tr>
                        <th class="w-33" scope="row">Class</th>
                        <td>{{ class.identifier }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Type</th>
                        <td>{{ class.type }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Manufacturer</th>
                        <td>
                          {%if class.manufacturer %}
                          <a href="{% url 'filtered' _filter="manufacturer" search=class.manufacturer.slug %}">{{ class.manufacturer }}</a>{% if class.manufacturer.website %} <a href="{{ class.manufacturer.website }}" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>{% endif %}
                          {% else %}-{% endif %}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  {% if class_properties %}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Properties</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    {% for p in class_properties %}
                      <tr>
                        <th class="w-33" scope="row">{{ p.property }}</th>
                        <td>{{ p.value }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                <div class="tab-pane" id="nav-company" role="tabpanel" aria-labelledby="nav-company-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Company data</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                      {% if company.logo %}
                      <tr>
                        <th class="w-33" scope="row">Logo</th>
                        <td><img class="logo-xl" src="{{ company.logo.url }}" alt="{{ company }} logo"></td>
                      </tr>
                      {% endif %}
                      <tr>
                        <th class="w-33" scope="row">Name</th>
                        <td><a href="{% url 'filtered' _filter="company" search=company.slug %}">{{ company.name }}</a> {{ company.extended_name_pp }}</td>
                      </tr>
                      <tr>
                        <th class="w-33" scope="row">Country</th>
                        <td>{{ company.country.name }} <img src="{{ company.country.flag }}" alt="{{ company.country }}">
                      </tr>
                      {% if company.freelance %}
                      <tr>
                        <th class="w-33" scope="row">Notes</th>
                        <td>A <em>freelance</em> company</td>
                      </tr>
                      {% endif %}
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane" id="nav-dcc" role="tabpanel" aria-labelledby="nav-dcc-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Decoder data</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                      <tr>
                        <th scope="row">Interface</th>
                        <td>{{ rolling_stock.get_decoder_interface_display }}</td>
                      </tr>
                      <tr>
                        <th class="w-33" 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|default:"-" }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Version</th>
                        <td>{{ rolling_stock.decoder.version }}</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" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">
                  {% if documents %}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="3" scope="row">Documents</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    {% for d in documents.all %}
                      <tr>
                        <td class="w-33">{{ d.description }}</td>
                        <td><a href="{{ d.file.url }}" target="_blank">{{ d.filename }}</a></td>
                        <td class="text-end">{{ d.file.size | filesizeformat }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                  {% endif %}
                  {% if decoder_documents %}
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="3" scope="row">Decoder documents</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    {% for d in decoder_documents.all %}
                      <tr>
                        <td class="w-33">{{ d.description }}</td>
                        <td><a href="{{ d.file.url }}" target="_blank">{{ d.filename }}</a></td>
                        <td class="text-end">{{ d.file.size | filesizeformat }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                  {% endif %}
                </div>
                <div class="tab-pane" id="nav-journal" role="tabpanel" aria-labelledby="nav-journal-tab">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th colspan="2" scope="row">Journal</th>
                      </tr>
                    </thead>
                    <tbody class="table-group-divider">
                    {% for j in journal %}
                      <tr>
                        <th class="w-33" scope="row">{{ j.date }}</th>
                        <td>{{ j.log | safe }}</td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
                <div class="tab-pane" id="nav-notes" role="tabpanel" aria-labelledby="nav-notes-tab">
                  {{ rolling_stock.notes | safe }}
                </div>
                <div class="tab-pane" id="nav-set" role="tabpanel" aria-labelledby="nav-set-tab">
                  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-3">
                  {% for d in set %}
                  {% include "cards/roster.html" %}
                  {% endfor %}
                  </div>
                </div>
                <div class="tab-pane" id="nav-consists" role="tabpanel" aria-labelledby="nav-cosists-tab">
                  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-3">
                  {% for d in consists %}
                  {% include "cards/consist.html" %}
                  {% endfor %}
                  </div>
                </div>
              </div>
              {% endwith %}
              <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 %}