{% extends "vantage/base.html" %}
{% load vantage vantage_slots i18n %}

{% block content %}
<div class="v-page-head">
  <div>
    <h1 class="v-page-title">{{ object }}</h1>
    <p class="v-page-description">{{ panel.get_label }} · <span class="v-mono">#{{ object.pk }}</span></p>
  </div>
  <div class="v-page-actions">
    <a class="v-btn v-btn-ghost" href="{% url panel.list_url_name %}">{% translate "Back to list" %}</a>
    {% if "delete" in allowed %}
      <a class="v-btn v-btn-secondary"
         href="{% url "vantage:"|add:panel.slug|add:"-delete" object.pk %}">{% translate "Delete" %}</a>
    {% endif %}
    {% if "change" in allowed %}
      <a class="v-btn v-btn-primary"
         href="{% url "vantage:"|add:panel.slug|add:"-change" object.pk %}">{% translate "Edit" %}</a>
    {% endif %}
    {% slot "object_actions" %}
  </div>
</div>

<div class="v-detail">
  <section class="v-card">
    <div class="v-card-head"><h2 class="v-card-title">{% translate "Details" %}</h2></div>
    <dl class="v-fields">
      {% for field in fields %}
        <div class="v-field">
          <dt>{{ field.label }}</dt>
          <dd>{{ field.value }}</dd>
        </div>
      {% endfor %}
    </dl>
  </section>

  {% slot "detail_sidebar" %}

  {% include "vantage/partials/history.html" %}

  {% if related %}
    {% if related_tabs %}
      {% comment %}
        A tab strip built entirely from a radio group: input, its label, and its panel
        are consecutive siblings so ``:checked + label + panel`` can target exactly one
        panel per input with nothing fancier than adjacent-sibling selectors, and CSS
        ``order`` regroups the (hidden) inputs' labels into a row above the panels
        without needing them adjacent in the markup too. No JavaScript is involved:
        the browser's own radio-group keyboard handling (Tab in, arrow keys between,
        native and free) is the whole interaction model. See ModelPanel.related_tabs.
      {% endcomment %}
      <fieldset class="v-tabstrip">
        <legend class="v-sr-only">{% translate "Related records" %}</legend>
        {% for block in related %}
          <input type="radio" name="v-tabstrip-tab" id="v-tabstrip-tab-{{ forloop.counter }}"
                 class="v-tabstrip-input" {% if forloop.first %}checked{% endif %}>
          <label class="v-tabstrip-tab" for="v-tabstrip-tab-{{ forloop.counter }}">
            {{ block.label }}<span class="v-badge">{{ block.count }}</span>
          </label>
          <div class="v-tabstrip-panel">
            {% include "vantage/partials/related_block.html" with block=block %}
          </div>
        {% endfor %}
      </fieldset>
    {% else %}
      <div class="v-related-blocks">
        {% for block in related %}
          {% include "vantage/partials/related_block.html" with block=block %}
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
</div>
{% endblock %}