{# 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, and the storefront's class names
   (store-cols, store-section, store-terminal, store-meta-card, store-pill).
   A storefront skin that styles them (skin_store) dresses this page like the
   rest of its pages, and a product without that skin gets plain, readable
   markup. Nothing here needs either feature to be installed. The few rules
   below are the page's own, each colour with a neutral fallback for a
   product that has no brand tokens.

   What a developer reads here, top to bottom: how to start a product on this
   line, what the line is made of (its feature model, from the marketplace
   index), and every version it has had. #}
{% extends layout %}
{% import "spl_registry/_macros.html" as ui %}

{% 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 %}

{# A group's cardinality in the configurator's own words, so the two pages
   say the same thing about the same group. #}
{% macro group_rule(rule) -%}
{%- if rule == "exactly_one" -%}{{ _("Exclusive group. Pick exactly one.") }}
{%- elif rule == "at_most_one" -%}{{ _("Exclusive group. Pick one at most.") }}
{%- elif rule == "at_least_one" -%}{{ _("Pick at least one.") }}
{%- else -%}{{ _("Pick any number, or none.") }}
{%- endif -%}
{%- endmacro %}

{# One feature of the model: its name (a link to its marketplace page when it
   has one), its released version and what it does. #}
{% macro feature_row(feature) -%}
<div class="splreg-feature{% if not feature.published %} splreg-feature--unpublished{% endif %}">
    <p class="splreg-feature__head">
        {% if feature.url %}<a class="splreg-feature__name" href="{{ feature.url }}">{{ feature.short }}</a>{% else %}<span class="splreg-feature__name">{{ feature.short }}</span>{% endif %}
        {% if feature.version %}<span class="store-pill">v{{ feature.version }}</span>{% endif %}
        {% if feature.forced_by or feature.forced_group %}<span class="splreg-flag splreg-flag--forced">{{ _("In every product") }}</span>{% endif %}
        {% if not feature.published %}<span class="splreg-flag splreg-flag--external">{{ _("Not in the marketplace") }}</span>{% endif %}
    </p>
    {% if feature.description %}<p class="splreg-feature__desc">{{ feature.description }}</p>{% endif %}
</div>
{%- 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; }

    /* 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; }

    /* 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 1rem .5rem 0; white-space: nowrap; }
    .splreg__table td { padding: .7rem 1rem .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__download { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
    .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 %}

    <div class="store-cols splreg-cols">

        {# ── Side: how to start, and the line at a glance. First in the
           document so a phone shows it before the long model; the skin moves
           it to the right column on a wide screen. ─────────────────────── #}
        <aside class="store-side splreg-side">

            {% if start_command %}
            <section class="store-install splreg-start" aria-labelledby="splreg-start-title">
                <h2 class="store-install__title" id="splreg-start-title">{{ ui.icon("terminal") }}{{ _("Start a product") }}</h2>
                <div class="store-terminal">
                    <span class="store-terminal__prompt" aria-hidden="true">$</span>
                    <code id="splreg-start-cmd">{{ ui.command(start_command) }}</code>
                    <button class="store-copy" type="button" id="splreg-copy"
                            data-command="{{ start_command }}" data-copied="{{ _('Copied') }}">{{ ui.icon("copy") }}<span>{{ _("Copy") }}</span></button>
                </div>
                <p class="store-install__hint">{{ _("Run it in your SPLENT workspace with no product selected, and change %(name)s to the name of your product.", name="my_app") }}</p>
                {% if configure_url %}
                <a class="splreg-start__next" href="{{ configure_url }}">{{ _("Choose its features in the configurator") }}{{ ui.icon("arrow-right") }}</a>
                {% endif %}
            </section>
            {% endif %}

            <div class="store-meta-card splreg-facts">
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Maintained by") }}</span>
                    <span class="store-meta-row__value">{{ owner or _("The marketplace") }}</span>
                </div>
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Latest version") }}</span>
                    <span class="store-meta-row__value">{% if spl.latest_version %}{{ spl.latest_version }}{% else %}{{ _("Not published yet") }}{% endif %}</span>
                </div>
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("State") }}</span>
                    <span class="store-meta-row__value">{{ labels.get(spl.state, spl.state) }}</span>
                </div>
                {% if spl.latest_doi %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("DOI") }}</span>
                    <span class="store-meta-row__value splreg__doi">{% if latest_links.dataset %}<a href="{{ latest_links.dataset }}" rel="noopener">{{ spl.latest_doi }}</a>{% else %}{{ spl.latest_doi }}{% endif %}</span>
                </div>
                {% endif %}
                {% if latest_links.file %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Model file") }}</span>
                    <span class="store-meta-row__value"><a class="splreg__download" href="{{ latest_links.file }}" rel="noopener">{{ ui.icon("download", 14) }}<span class="splreg__sr">{{ _("Download") }} </span>{{ spl.latest_file }}</a></span>
                </div>
                {% endif %}
            </div>
        </aside>

        <div class="splreg-main">

            {# ── The feature model ─────────────────────────────────────── #}
            <section class="store-section splreg-model" id="model" aria-labelledby="splreg-model-title">
                <h2 class="store-section__title" id="splreg-model-title">{{ ui.icon("layers") }}{{ _("Feature model") }}</h2>

                {% set has_files = releases | selectattr("doi") | list | length > 0 %}
                {% if catalog.status == "ok" %}
                {% set model = catalog.model %}

                <ul class="splreg-stats">
                    <li>{{ ngettext("%(num)d feature", "%(num)d features", model.counts.features) }}</li>
                    <li>{{ ngettext("%(num)d always included", "%(num)d always included", model.counts.always) }}</li>
                    {% if model.counts.groups %}<li>{{ ngettext("%(num)d group", "%(num)d groups", model.counts.groups) }}</li>{% endif %}
                    <li>{{ ngettext("%(num)d optional", "%(num)d optional", model.counts.optional) }}</li>
                </ul>

                {% if catalog.stale %}
                <p class="splreg-callout splreg-callout--info">{{ ui.icon("info") }}<span>{{ _("The marketplace index still describes an earlier version of this model. Version %(latest)s appears here once the index is rebuilt.", latest=spl.latest_version) }}</span></p>
                {% endif %}

                {% if model.unpublished %}
                <div class="splreg-callout splreg-callout--warn" role="note">
                    {{ ui.icon("alert-triangle") }}
                    <div>
                        <p class="splreg-callout__title">{{ _("Not in the marketplace yet") }}</p>
                        <p>{{ ngettext("This model names a feature the marketplace does not list, so it has no page here and the configurator marks it as external.", "This model names %(num)d features the marketplace does not list, so they have no page here and the configurator marks them as external.", model.unpublished | length) }}</p>
                        <p class="splreg-callout__names">{% for short in model.unpublished %}<code class="store-code">{{ short }}</code>{% if not loop.last %} {% endif %}{% endfor %}</p>
                    </div>
                </div>
                {% endif %}

                {% if model.forced %}
                <div class="splreg-callout splreg-callout--info" role="note">
                    {{ ui.icon("info") }}
                    <div>
                        <p class="splreg-callout__title">{{ _("Optional in the model, yet in every product") }}</p>
                        <ul class="splreg-callout__list">
                            {% for item in model.forced %}
                            {% set feature %}<code class="store-code">{{ item.short }}</code>{% endset %}
                            {% if item.by %}
                            {% set by %}<code class="store-code">{{ item.by }}</code>{% endset %}
                            <li>{{ _("%(feature)s, because %(by)s needs it.", feature=feature, by=by) }}</li>
                            {% else %}
                            {% set group %}<code class="store-code">{{ item.group }}</code>{% endset %}
                            <li>{{ _("%(feature)s, because every choice in %(group)s needs it.", feature=feature, group=group) }}</li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}

                <div class="splreg-tree">
                    {% for branch in model.branches %}
                    <section class="splreg-branch splreg-branch--{{ branch.key }}">
                        {% if branch.key == "always" %}
                        <h3 class="splreg-branch__title">{{ ui.icon("check-circle") }}{{ _("Always included") }}</h3>
                        <p class="splreg-branch__hint">{{ _("Every product of this line has these, and makes the choice each group asks for.") }}</p>
                        {% else %}
                        <h3 class="splreg-branch__title">{{ ui.icon("plus") }}{{ _("Optional") }}</h3>
                        <p class="splreg-branch__hint">{{ _("Each product picks the ones it needs.") }}</p>
                        {% endif %}
                        <ul class="splreg-tree__list">
                            {% for item in branch["items"] %}
                            {% if item.kind == "feature" %}
                            <li class="splreg-node">{{ feature_row(item.feature) }}</li>
                            {% else %}
                            <li class="splreg-node splreg-node--group">
                                <div class="splreg-group">
                                    <p class="splreg-group__head">
                                        <span class="splreg-group__name">{{ ui.icon("git-branch", 14) }}{{ item.owner }}</span>
                                        <span class="splreg-group__rule">{{ group_rule(item.rule) }}</span>
                                    </p>
                                    <ul class="splreg-tree__list splreg-tree__list--group">
                                        {% for member in item.members %}
                                        <li class="splreg-node">{{ feature_row(member) }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </section>
                    {% endfor %}
                </div>

                {% if model.rules %}
                <section class="splreg-rules" aria-labelledby="splreg-rules-title">
                    <h3 class="splreg-branch__title" id="splreg-rules-title">{{ ui.icon("link") }}{{ _("Rules") }}</h3>
                    <p class="splreg-branch__hint">{{ _("A product that has a feature also gets what that feature needs.") }}</p>
                    <ul class="splreg-rules__list">
                        {% for rule in model.rules %}
                        {% set feature %}<code class="store-code">{{ rule.feature }}</code>{% endset %}
                        {% set required %}{% for target in rule.needs %}<code class="store-code">{{ target }}</code>{% if not loop.last %}, {% endif %}{% endfor %}{% endset %}
                        <li>{{ _("%(feature)s needs %(required)s", feature=feature, required=required) }}</li>
                        {% endfor %}
                    </ul>
                </section>
                {% endif %}

                {% elif catalog.status == "not_indexed" %}
                <p class="splreg__empty">
                    {{ _("The marketplace index does not describe this line yet. Its features appear here once the index is rebuilt.") }}
                    {% if has_files %}{{ _("The model file of every version is linked below.") }}{% endif %}
                </p>
                {% else %}
                <p class="splreg__empty">
                    {{ _("The list of features cannot be shown right now.") }}
                    {% if has_files %}{{ _("The model file of every version is linked below.") }}{% endif %}
                </p>
                {% endif %}
            </section>

            {# ── Every version ─────────────────────────────────────────── #}
            <section class="store-section splreg-versions" id="versions" aria-labelledby="splreg-versions-title">
                <h2 class="store-section__title" id="splreg-versions-title">{{ ui.icon("list") }}{{ _("Versions") }}</h2>

                {% if releases %}
                <div class="splreg__scroll" role="region" aria-labelledby="splreg-versions-title" 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">{{ _("Model file") }}</th>
                                <th role="columnheader" scope="col">{{ _("Verification") }}</th>
                            </tr>
                        </thead>
                        <tbody role="rowgroup">
                            {% for release in releases %}
                            {% set links = release_links.get(release.id) or {} %}
                            <tr role="row">
                                <td role="cell" class="splreg__version" data-label="{{ _('Version') }}">
                                    <span class="splreg__nowrap">{{ release.version }}{% if release.state == 'published' and release.version == spl.latest_version %} <span class="splreg-current">{{ _("Current") }}</span>{% endif %}</span>
                                </td>
                                <td role="cell" class="splreg__doi" data-label="{{ _('DOI') }}">
                                    {% if release.doi and links.dataset %}
                                        <a href="{{ links.dataset }}" rel="noopener">{{ release.doi }}</a>
                                    {% elif release.doi %}
                                        {{ release.doi }}
                                    {% else %}
                                        <span aria-hidden="true">&ndash;</span>
                                        <span class="splreg__sr">{{ _("No DOI") }}</span>
                                    {% endif %}
                                </td>
                                {% set when = release.completed_at or release.created_at %}
                                <td role="cell" class="splreg__nowrap" data-label="{{ _('Date') }}"><time datetime="{{ when.strftime('%Y-%m-%dT%H:%M') }}" title="{{ when.strftime('%Y-%m-%d %H:%M') }} UTC">{{ when.strftime('%Y-%m-%d') }}</time></td>
                                <td role="cell" data-label="{{ _('Published by') }}">{{ publishers.get(release.id) or _("The marketplace") }}</td>
                                <td role="cell" data-label="{{ _('Model file') }}">
                                    {% if links.file %}
                                        <a class="splreg__download" href="{{ links.file }}" rel="noopener" title="{{ release.filename }}">{{ ui.icon("download", 14) }}<span>{{ _("Download") }}</span><span class="splreg__sr"> {{ release.filename }}</span></a>
                                    {% else %}
                                        <span aria-hidden="true">&ndash;</span>
                                        <span class="splreg__sr">{{ _("No file") }}</span>
                                    {% endif %}
                                </td>
                                <td role="cell" data-label="{{ _('Verification') }}">
                                    {% if release.state == 'published' %}
                                        {% set check = release.verification %}
                                        <span class="splreg__tag{% if check == 'match' %} splreg__tag--ok{% elif check == 'mismatch' %} splreg__tag--bad{% endif %}">{{ checks.get(check) or checks.get("pending") }}</span>
                                        {% if check == 'mismatch' %}
                                        <p class="splreg__note">{{ _("What UVLHub serves for this DOI is not what was sent.") }}</p>
                                        {% endif %}
                                    {% else %}
                                        <span class="splreg__tag{% if release.state == 'unknown' %} splreg__tag--bad{% elif release.state == 'failed' %} splreg__tag--warn{% endif %}">{{ labels.get(release.state, release.state) }}</span>
                                        {% 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 %}
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <p class="splreg__empty">{{ _("This product line has no releases yet.") }}</p>
                {% endif %}
            </section>

        </div>
    </div>

</div>

{% if start_command %}
<script>
    (function () {
        var button = document.getElementById("splreg-copy");
        if (!button || !navigator.clipboard) { return; }
        button.addEventListener("click", function () {
            navigator.clipboard.writeText(button.dataset.command).then(function () {
                var label = button.querySelector("span");
                var original = label.textContent;
                label.textContent = button.dataset.copied;
                setTimeout(function () { label.textContent = original; }, 2000);
            });
        });
    })();
</script>
{% endif %}
{% endblock %}