{% extends "base.html" %}
{% block title %}{{ spec.label }} {{ pk }}{% endblock %}
{% block content %}
{% set hue = groups.index(spec.group) % 6 if spec.group in groups else 0 %}
<div class="page" style="--hue: var(--hue-{{ hue }})">
  <div class="bar">
    <div class="head">
      <div class="eyebrow"><span class="dot"></span>{{ spec.group }} · {{ spec.label }}</div>
      <h1 class="title">Record <span class="pk">{{ pk }}</span></h1>
    </div>
    {% if spec.renders("edit") or spec.renders("delete") %}
    <div class="actions">
      {% if spec.renders("edit") %}
      <a class="btn btn--primary" href="{{ page_url }}/{{ pk }}/edit">Edit</a>
      {% endif %}
      {% if spec.renders("delete") %}
      {# Two steps, in the markup rather than in a confirm(): the summary opens
         the confirmation, and only the inner button posts. Works with scripting
         off, and can be styled like the rest of the admin. #}
      <details class="confirm">
        <summary class="btn btn--danger">Delete</summary>
        <div class="confirm-body">
          <p class="confirm-text">Delete record {{ pk }}? This cannot be undone.</p>
          <form method="post" action="{{ page_url }}/{{ pk }}/delete">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn--danger" type="submit">Delete permanently</button>
          </form>
        </div>
      </details>
      {% endif %}
    </div>
    {% endif %}
  </div>
  {% include "_detail_rows.html" %}
</div>
{% endblock %}