{# The layout is chosen by the route: the theme's public shell when the product
   ships one, the product's own base template otherwise.

   The page borrows the shell's shared vocabulary rather than a look of its
   own: the hero slot, .container and .btn. The hero also carries the
   store-hero classes, so a storefront skin that styles them (skin_store)
   dresses this page like the rest of its pages, and a product without that
   skin simply gets the theme's hero. Nothing here needs either feature to be
   installed. Colours come from the theme's brand tokens, each with a neutral
   fallback for a product that has none. #}
{% extends layout %}

{% block title %}{{ spl.name }}{% endblock %}

{# The heading, its description and the way on to the configurator. In the
   shell's hero it wears the hero classes; inside a plain base template it
   wears only its own, so no hero colour lands on an ordinary background. #}
{% macro intro(hero) -%}
<h1 class="{% if hero %}hero-title store-hero__title {% endif %}splreg-intro__title">{{ spl.name }}</h1>
{% if spl.description %}<p class="{% if hero %}hero-subtitle store-hero__subtitle {% endif %}splreg-intro__desc">{{ spl.description }}</p>{% endif %}
{% if configure_url %}
<p class="splreg-intro__actions">
    <a class="btn btn-primary splreg-cta" href="{{ configure_url }}">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
        <span>{{ _("Configure this line") }}</span>
    </a>
</p>
{% endif %}
{%- endmacro %}

{% block head %}
<style>
    .splreg { padding-block: 2rem 3.5rem; }
    .splreg-intro { margin-bottom: 1.5rem; }
    .splreg-intro .splreg-intro__title { font-size: 1.9rem; margin: 0 0 .35rem; }
    .splreg-intro .splreg-intro__desc { margin: 0; color: var(--brand-muted, inherit); }
    .splreg-intro__actions { margin: 1.25rem 0 0; }
    .splreg-cta { display: inline-flex; align-items: center; gap: .5rem; }
    .splreg-cta svg { flex: none; }

    .splreg__meta { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; padding: 1rem 0; margin: 0 0 2rem;
                    border-top: 1px solid var(--brand-border, rgba(128,128,128,.28));
                    border-bottom: 1px solid var(--brand-border, rgba(128,128,128,.28)); }
    .splreg__meta > div { min-width: 0; }
    .splreg__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
                       color: var(--brand-muted, inherit); margin: 0 0 .2rem; }
    .splreg__meta dd { margin: 0; font-size: .95rem; }
    .splreg__section { font-size: 1.05rem; margin: 0 0 .75rem; }

    /* A DOI is short enough to keep whole. It used to break at any
       character, which on a phone left one or two characters a line. */
    .splreg__doi { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
    .splreg__doi a { white-space: nowrap; }
    .splreg__file { display: block; margin-top: .2rem; font-size: .8rem; color: var(--brand-muted, inherit); }

    /* Wide screens: a table, scrolling inside its own box if it ever has to.
       The box takes keyboard focus so the scroll is reachable without a mouse. */
    .splreg__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .splreg__scroll:focus-visible { outline: 2px solid var(--brand-primary, currentColor); outline-offset: 2px; }
    .splreg__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
    .splreg__table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
                        color: var(--brand-muted, inherit); font-weight: 600; padding: .5rem 1.25rem .5rem 0; white-space: nowrap; }
    .splreg__table td { padding: .7rem 1.25rem .7rem 0; border-top: 1px solid var(--brand-border, rgba(128,128,128,.2)); vertical-align: top; }
    .splreg__version { font-variant-numeric: tabular-nums; font-weight: 600; }
    .splreg__nowrap { white-space: nowrap; }
    .splreg__tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem;
                   border: 1px solid rgba(128,128,128,.4); white-space: nowrap; }
    .splreg__tag--ok { border-color: rgba(25,135,84,.55); }
    .splreg__tag--warn { border-color: rgba(255,193,7,.6); }
    .splreg__tag--bad { border-color: rgba(220,53,69,.55); }
    .splreg__note { margin: .3rem 0 0; font-size: .8rem; color: var(--brand-muted, inherit); }
    .splreg__empty { padding: 1.5rem; border: 1px dashed var(--brand-border, rgba(128,128,128,.4)); border-radius: .5rem;
                     color: var(--brand-muted, inherit); }
    .splreg__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
                  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

    /* Narrow screens: each release becomes a card of label and value rows,
       every column readable, nothing cut at the edge. */
    @media (max-width: 40rem) {
        .splreg__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
        .splreg__table, .splreg__table tbody, .splreg__table tr, .splreg__table td { display: block; width: 100%; }
        .splreg__table tr { border: 1px solid var(--brand-border, rgba(128,128,128,.28)); border-radius: var(--brand-radius, .5rem);
                            padding: .25rem .9rem; margin-bottom: .75rem; }
        .splreg__table td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
                            gap: .25rem 1rem; padding: .55rem 0; text-align: right; }
        .splreg__table tr td:first-child { border-top: 0; }
        .splreg__table td::before { content: attr(data-label); flex: none; text-align: left; font-family: var(--brand-font-body, system-ui, sans-serif);
                                    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
                                    color: var(--brand-muted, inherit); }
        .splreg__table .splreg__note { flex-basis: 100%; text-align: left; }
        .splreg__doi a { white-space: normal; overflow-wrap: break-word; min-width: 0; }
    }
</style>
{% endblock %}

{% block hero %}
{% if public_shell %}
<section class="block-hero store-hero store-hero--slim splreg-hero">
    <div class="container">
        {{ intro(true) }}
    </div>
</section>
{% endif %}
{% endblock %}

{% block content %}
<div class="container splreg">

    {% if not public_shell %}
    <div class="splreg-intro">{{ intro(false) }}</div>
    {% endif %}

    <dl class="splreg__meta">
        <div>
            <dt>{{ _("Maintained by") }}</dt>
            <dd>{{ owner or _("The marketplace") }}</dd>
        </div>
        <div>
            <dt>{{ _("Latest version") }}</dt>
            <dd>{% if spl.latest_version %}{{ spl.latest_version }}{% else %}{{ _("Not published yet") }}{% endif %}</dd>
        </div>
        <div>
            <dt>{{ _("State") }}</dt>
            <dd>{{ labels.get(spl.state, spl.state) }}</dd>
        </div>
        {% if spl.latest_doi %}
        <div>
            <dt>{{ _("Model") }}</dt>
            <dd class="splreg__doi">
                <a href="https://doi.org/{{ spl.latest_doi }}" rel="noopener">{{ spl.latest_doi }}</a>
                {% if spl.latest_file %}<span class="splreg__file">{{ spl.latest_file }} {{ _("on") }} {{ spl.uvl_mirror }}</span>{% endif %}
            </dd>
        </div>
        {% endif %}
    </dl>

    <h2 class="splreg__section">{{ _("Releases") }}</h2>

    {% if releases %}
    <div class="splreg__scroll" role="region" aria-label="{{ _('Releases') }}" tabindex="0">
        <table class="splreg__table" role="table">
            <thead role="rowgroup">
                <tr role="row">
                    <th role="columnheader" scope="col">{{ _("Version") }}</th>
                    <th role="columnheader" scope="col">{{ _("DOI") }}</th>
                    <th role="columnheader" scope="col">{{ _("Date") }}</th>
                    <th role="columnheader" scope="col">{{ _("Published by") }}</th>
                    <th role="columnheader" scope="col">{{ _("State") }}</th>
                    <th role="columnheader" scope="col">{{ _("Content") }}</th>
                </tr>
            </thead>
            <tbody role="rowgroup">
                {% for release in releases %}
                <tr role="row">
                    <td role="cell" class="splreg__version" data-label="{{ _('Version') }}">{{ release.version }}</td>
                    <td role="cell" class="splreg__doi" data-label="{{ _('DOI') }}">
                        {% if release.doi %}
                            <a href="https://doi.org/{{ release.doi }}" rel="noopener">{{ release.doi }}</a>
                        {% else %}
                            <span aria-hidden="true">&ndash;</span>
                            <span class="splreg__sr">{{ _("No DOI") }}</span>
                        {% endif %}
                    </td>
                    <td role="cell" class="splreg__nowrap" data-label="{{ _('Date') }}">{{ (release.completed_at or release.created_at).strftime('%Y-%m-%d %H:%M') }}</td>
                    <td role="cell" data-label="{{ _('Published by') }}">{{ publishers.get(release.id) or _("The marketplace") }}</td>
                    <td role="cell" data-label="{{ _('State') }}">
                        {% if release.state == 'published' %}
                            <span class="splreg__tag splreg__tag--ok">{{ labels.get(release.state, release.state) }}</span>
                        {% elif release.state == 'unknown' %}
                            <span class="splreg__tag splreg__tag--bad">{{ labels.get(release.state, release.state) }}</span>
                        {% elif release.state == 'failed' %}
                            <span class="splreg__tag splreg__tag--warn">{{ labels.get(release.state, release.state) }}</span>
                        {% else %}
                            <span class="splreg__tag">{{ labels.get(release.state, release.state) }}</span>
                        {% endif %}
                    </td>
                    <td role="cell" data-label="{{ _('Content') }}">
                        {% if release.verification == 'match' %}
                            <span class="splreg__tag splreg__tag--ok">{{ labels.get(release.verification) }}</span>
                        {% elif release.verification == 'mismatch' %}
                            <span class="splreg__tag splreg__tag--bad">{{ labels.get(release.verification) }}</span>
                        {% else %}
                            <span class="splreg__tag">{{ labels.get(release.verification, release.verification) }}</span>
                        {% endif %}
                        {% if release.state == 'unknown' %}
                        <p class="splreg__note">{{ _("This publication never reported back. Whether a DOI was minted for it is not known.") }}</p>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="splreg__empty">{{ _("This product line has no releases yet.") }}</p>
    {% endif %}

</div>
{% endblock %}