{% extends "public_base.html" %}
{% import "marketplace/_macros.html" as mk %}

{% block title %}{{ feature.short }}{% endblock %}

{% block content %}
{#- Every section below reads one part of the sheet (MarketplaceService.sheet)
    and is left out when the index entry carries nothing for it, so a sheet
    built from an older index is shorter, never broken. -#}
{% set provides = feature.provides %}
{% set deps = sheet.dependencies %}
{% set known = known_shorts %}
<div class="container">

    <header class="store-detail-head">
        {{ mk.monogram(feature.short, large=true) }}
        <div class="store-detail-head__body">
            <h1 class="store-detail-head__title">{{ feature.short }}</h1>
            <p class="store-detail-head__org">
                <a href="{{ repo_url }}" target="_blank" rel="noopener">{{ feature.org }}/{{ feature.repo }}</a>
            </p>
            <div class="store-detail-head__badges">
                {{ mk.version_pill(feature) }}
                {{ mk.archetype_badge(feature.archetype) }}
                {% if feature.category %}<span class="store-badge">{{ feature.category }}</span>{% endif %}
                {% if install_env == "dev" %}<span class="store-badge store-badge--env">{{ _("Development only") }}</span>
                {% elif install_env == "prod" %}<span class="store-badge store-badge--env">{{ _("Production only") }}</span>{% endif %}
                {% if sheet.refinement %}<span class="store-badge store-badge--config">{{ _("Refines %(feature)s", feature=sheet.refinement.base) }}</span>{% endif %}
            </div>
        </div>
    </header>

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

        {# ── Main column ───────────────────────────────────────────────── #}
        <div class="store-main">
            <section class="store-section">
                <h2 class="store-section__title">{{ mk.icon("info") }}{{ _("About") }}</h2>
                <p class="store-about">{{ feature.description or _("No description yet.") }}</p>
            </section>

            {% set rf = sheet.refinement %}
            {% if rf %}
            <section class="store-section" id="refinement">
                <h2 class="store-section__title">{{ mk.icon("git-merge") }}{{ _("Refinement") }}</h2>
                <div class="store-contract">
                    {{ mk.chip_row(_("Refines"), [rf.base], known) }}
                    {% if rf.models %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Extends models") }}</div>
                        <div class="store-contract-row__values">
                            {% for m in rf.models %}<span class="store-pair"><code class="store-code">{{ m.target }}</code> {{ _("with") }} <code class="store-code">{{ m.mixin }}</code></span>{% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {% if rf.routes %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Adds routes") }}</div>
                        <div class="store-contract-row__values">
                            {% for r in rf.routes %}<span class="store-pair"><code class="store-code">{{ r.module }}</code> {{ _("to") }} <code class="store-code">{{ r.blueprint }}</code></span>{% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {% for kind, label in [("templates", _("Overrides templates")), ("services", _("Overrides services")), ("hooks", _("Overrides hooks"))] %}
                    {% if rf[kind] %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ label }}</div>
                        <div class="store-contract-row__values">
                            {% for o in rf[kind] %}{% if o.replacement %}<span class="store-pair"><code class="store-code">{{ o.target }}</code> {{ _("with") }} <code class="store-code">{{ o.replacement }}</code></span>{% else %}<code class="store-code">{{ o.target }}</code>{% endif %}{% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                <p class="store-section__note">{{ _("It changes %(feature)s in place, without a fork, so the product installs both.", feature=rf.base) }}</p>
            </section>
            {% endif %}

            {% set has_provides = provides.models or provides.services or provides.routes
                                  or provides.hooks or provides.signals or provides.translations %}
            {% if has_provides or not sheet.commands %}
            <section class="store-section" id="provides">
                <h2 class="store-section__title">{{ mk.icon("box") }}{{ _("Provides") }}</h2>
                {% if has_provides %}
                <div class="store-contract">
                    {{ mk.contract_row(_("Models"), provides.models) }}
                    {{ mk.contract_row(_("Services"), provides.services) }}
                    {{ mk.contract_row(_("Routes"), provides.routes) }}
                    {{ mk.contract_row(_("Hooks filled"), provides.hooks) }}
                    {{ mk.contract_row(_("Signals"), provides.signals) }}
                    {{ mk.contract_row(_("Translations"), provides.translations) }}
                </div>
                {% else %}
                <p class="store-about store-muted">{{ _("This feature declares no public contract surface.") }}</p>
                {% endif %}
            </section>
            {% endif %}

            {% if sheet.commands %}
            <section class="store-section" id="commands">
                <h2 class="store-section__title">{{ mk.icon("terminal") }}{{ _("Commands") }}</h2>
                <ul class="store-cmdlist">
                    {% for cmd in sheet.commands %}
                    <li class="store-cmdlist__item">
                        <div class="store-terminal">
                            <span class="store-terminal__prompt">$</span>
                            <code id="mk-cmd-{{ loop.index }}">{{ mk.command(cmd.invocation) }}</code>
                            {{ mk.copy_button("mk-cmd-" ~ loop.index, _("Copy the %(command)s command", command=cmd.name)) }}
                        </div>
                        {% if cmd.help %}<p class="store-cmdlist__help">{{ cmd.help }}</p>{% endif %}
                    </li>
                    {% endfor %}
                </ul>
                <p class="store-section__note">{{ _("Run them in your workspace once the feature is installed in the selected product.") }}</p>
            </section>
            {% endif %}

            {% set settings = sheet.settings %}
            {% if settings.settings %}
            <section class="store-section" id="configuration">
                {% if settings.declared %}
                <h2 class="store-section__title">{{ mk.icon("settings") }}{{ _("Configuration") }}</h2>
                <table class="store-table">
                    <thead>
                        <tr>
                            <th scope="col">{{ _("Setting") }}</th>
                            <th scope="col">{{ _("Default") }}</th>
                            <th scope="col">{{ _("What it does") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for s in settings.settings %}
                        <tr{% if s.required %} class="is-required"{% endif %}>
                            <th scope="row"><code class="store-code">{{ s.key }}</code></th>
                            <td class="store-table__default" data-label="{{ _('Default') }}">
                                {% if s.required %}<span class="store-badge store-badge--required">{{ _("Required") }}</span>
                                {% elif s.default %}<code class="store-code">{{ s.default }}</code>
                                {% else %}<span class="store-muted">{{ _("empty") }}</span>{% endif %}
                            </td>
                            <td class="store-table__help">
                                {% if s.help %}{{ s.help }}{% else %}<span class="store-muted">{{ _("No description yet.") }}</span>{% endif %}
                                {% if s.required %}<span class="store-table__must">{{ _("Has no default, so the product must set a value.") }}</span>{% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <p class="store-section__note">{{ _("These are the defaults. A product changes them in its own pyproject.toml, under [tool.splent.config], or in .env.deploy in production.") }}{% if settings.per_product %} {{ _("%(name)s stands for the name of the product that takes the feature.", name="<product>") }}{% endif %}</p>
                {% else %}
                <h2 class="store-section__title">{{ mk.icon("settings") }}{{ _("Settings it reads") }}</h2>
                <div class="store-contract">
                    {{ mk.contract_row(_("Variables"), settings.settings | map(attribute="key") | list) }}
                </div>
                <p class="store-section__note">{{ _("The code reads these variables. This version publishes no defaults or descriptions for them, so check the feature's documentation before relying on one.") }}</p>
                {% endif %}
            </section>
            {% endif %}

            {% set dk = sheet.docker %}
            {% if dk %}
            <section class="store-section" id="services">
                <h2 class="store-section__title">{{ mk.icon("server") }}{{ _("Services and ports") }}
                    {% if install_env == "dev" %}<span class="store-badge store-badge--env">{{ _("Development only") }}</span>
                    {% elif install_env == "prod" %}<span class="store-badge store-badge--env">{{ _("Production only") }}</span>{% endif %}
                </h2>
                <div class="store-contract">
                    {{ mk.contract_row(_("Containers"), dk.services) }}
                    {% if dk.ports %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Ports") }}</div>
                        <div class="store-contract-row__values store-portlist">
                            {% for port in dk.ports %}
                            <span class="store-port">
                                <code class="store-code">{{ port.container }}</code>
                                {% if port.host_var %}<span class="store-port__host">{{ _("on the host port set in") }} <code class="store-code">{{ port.host_var }}</code></span>
                                {% elif port.host %}<span class="store-port__host">{{ _("on host port") }} <code class="store-code">{{ port.host }}</code></span>{% endif %}
                            </span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    {{ mk.contract_row(_("Volumes"), dk.volumes) }}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Image") }}</div>
                        <div class="store-contract-row__values store-plain">
                            {% if dk.build %}{{ _("Built from the feature's own Dockerfile") }}{% else %}{{ _("A published image, pulled as it is") }}{% endif %}
                        </div>
                    </div>
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Health check") }}</div>
                        <div class="store-contract-row__values store-plain">
                            {% if dk.healthcheck %}<span class="store-ok">{{ mk.icon("check-circle", 14) }}&nbsp;{{ _("Declared") }}</span>{% else %}<span class="store-muted">{{ _("None declared") }}</span>{% endif %}
                        </div>
                    </div>
                    {{ mk.contract_row(_("Starts after"), dk.depends_on) }}
                    {{ mk.contract_row(_("Compose files"), dk.compose_files) }}
                </div>
                {% if install_env == "dev" %}
                <p class="store-section__note">{{ _("These containers start with the product in development only. A production build leaves the feature and its containers out.") }}</p>
                {% elif install_env == "prod" %}
                <p class="store-section__note">{{ _("These containers run in production builds only.") }}</p>
                {% else %}
                <p class="store-section__note">{{ _("They start with the product. Host ports come from variables, so two products on one machine never collide.") }}</p>
                {% endif %}
            </section>
            {% endif %}

            <section class="store-section" id="dependencies">
                <h2 class="store-section__title">{{ mk.icon("git-branch") }}{{ _("Dependencies") }}</h2>
                {% if deps.requires or deps.optional or deps.used_by or deps.signals %}
                <div class="store-contract">
                    {{ mk.chip_row(_("Requires"), deps.requires, known) }}
                    {{ mk.chip_row(_("Works better with"), deps.optional, known) }}
                    {{ mk.chip_row(_("Used by"), deps.used_by, known) }}
                    {{ mk.contract_row(_("Listens to"), deps.signals) }}
                </div>
                {% else %}
                <p class="store-about store-muted">{{ _("No hard dependencies.") }}</p>
                {% endif %}
            </section>

            {% if collisions %}
            <section class="store-section" id="collisions">
                <div class="store-alert store-alert--warn">
                    <p class="store-alert__title">{{ mk.icon("alert-triangle") }}{{ _("Collisions") }}</p>
                    <ul>
                        {% for c in collisions %}
                        <li>
                            <code class="store-code">{{ c.item }}</code> ({{ c.kind }}) {{ _("also provided by") }}
                            {% for other in c.features if other != feature.short %}{{ mk.feature_chip(other, external=other not in known) }}{% endfor %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </section>
            {% endif %}

            {% if sheet.lines %}
            <section class="store-section" id="product-lines">
                <h2 class="store-section__title">{{ mk.icon("layers") }}{{ _("In product lines") }}</h2>
                <ul class="store-lines">
                    {% for line in sheet.lines %}
                    <li class="store-lines__item">
                        <a class="store-lines__name" href="{{ line.url }}">{{ line.name }}</a>
                        <span class="store-lines__role">
                            {% if line.role == "mandatory" %}<span class="store-badge store-badge--light">{{ _("In every product") }}</span>
                            {% elif line.role == "optional" %}<span class="store-badge">{{ _("Optional in this line") }}</span>
                            {% else %}<span class="store-badge store-badge--config">{{ _("In a group") }}</span>{% endif %}
                        </span>
                        {% if line.group %}
                        <span class="store-lines__note">
                            {% if line.role == "alternative" and line.group_required %}{{ _("Exactly one of the %(group)s group", group=line.group) }}
                            {% elif line.role == "alternative" %}{{ _("Exactly one of the %(group)s group, when a product takes that group", group=line.group) }}
                            {% elif line.group_required %}{{ _("One or more of the %(group)s group", group=line.group) }}
                            {% else %}{{ _("One or more of the %(group)s group, when a product takes that group", group=line.group) }}{% endif %}
                        </span>
                        {% endif %}
                        {% if line.needs %}
                        <span class="store-lines__note">{{ _("Needs") }} {% for other in line.needs %}<code class="store-code">{{ other }}</code>{% if not loop.last %} {% endif %}{% endfor %}</span>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </section>
            {% endif %}

            {% set ext = sheet.extension %}
            {% if ext or sheet.refined_by %}
            <section class="store-section" id="extension-points">
                <h2 class="store-section__title">{{ mk.icon("link") }}{{ _("Extension points") }}</h2>
                <div class="store-contract">
                    {% if ext %}
                    {{ mk.contract_row(_("Hook slots"), ext.hooks) }}
                    {{ mk.contract_row(_("Templates"), ext.templates) }}
                    {{ mk.contract_row(_("Services"), ext.services) }}
                    {{ mk.contract_row(_("Models"), ext.models) }}
                    {% if ext.routes %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("Routes") }}</div>
                        <div class="store-contract-row__values store-plain">{{ _("A refinement can add routes to its blueprint") }}</div>
                    </div>
                    {% endif %}
                    {% endif %}
                    {{ mk.chip_row(_("Refined by"), sheet.refined_by, known) }}
                </div>
                <p class="store-section__note">{{ _("Other features fill its hook slots. A refinement can override its templates and services or extend its models without forking it.") }}</p>
            </section>
            {% endif %}

            {% set cp = sheet.compatibility %}
            {% if cp %}
            <section class="store-section" id="compatibility">
                <h2 class="store-section__title">{{ mk.icon("check-square") }}{{ _("Compatibility") }}</h2>
                <div class="store-contract">
                    {% if cp.python %}{{ mk.contract_row("Python", [cp.python]) }}{% endif %}
                    <div class="store-contract-row">
                        <div class="store-contract-row__label">{{ _("SPLENT framework") }}</div>
                        <div class="store-contract-row__values store-plain">
                            {% if cp.framework == "*" %}{{ _("Any version") }}
                            {% elif cp.framework %}<code class="store-code">{{ cp.framework }}</code>
                            {% else %}<span class="store-muted">{{ _("No range declared") }}</span>{% endif %}
                        </div>
                    </div>
                    {{ mk.contract_row(_("Python packages"), cp.packages | map(attribute="raw") | list) }}
                </div>
            </section>
            {% endif %}
        </div>

        {# ── Side column: install first, then the facts ────────────────── #}
        <aside class="store-side">
            <div class="store-install store-install--lead">
                <p class="store-install__title">{{ mk.icon("terminal") }}{{ _("Install") }}</p>
                <div class="store-terminal">
                    <span class="store-terminal__prompt">$</span>
                    <code id="mk-install-cmd">{{ mk.command(install_command) }}</code>
                    <button class="store-copy" type="button" id="mk-copy" data-copy-target="mk-install-cmd"
                            data-copied="{{ _('Copied') }}">{{ mk.icon("copy") }}<span>{{ _("Copy") }}</span></button>
                </div>
                {% if install_env == "dev" %}
                <p class="store-install__env">{{ _("Development only. The flag adds it to the product's development features, so a production build leaves it out.") }}</p>
                {% elif install_env == "prod" %}
                <p class="store-install__env">{{ _("Production only. The flag adds it to the product's production features, so development runs without it.") }}</p>
                {% endif %}
                <p class="store-install__hint">{{ _("Run inside your SPLENT workspace with a product selected.") }}</p>
            </div>

            <div class="store-meta-card">
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Git tag") }}</span>
                    <span class="store-meta-row__value">
                        <span class="store-ok">{{ mk.icon("tag", 14) }} {{ mk.version_pill(feature) }}</span>
                    </span>
                </div>
                <div class="store-meta-row">
                    <span class="store-meta-row__label">PyPI</span>
                    <span class="store-meta-row__value">
                        {% if on_pypi and pypi_has_current %}
                        <span class="store-ok">{{ mk.icon("check-circle", 14) }} v{{ pypi_version }}</span>
                        {% elif on_pypi %}
                        <span class="store-warn">{{ mk.icon("alert-triangle", 14) }} {{ _("behind, latest is v%(v)s", v=pypi_version) }}</span>
                        {% else %}
                        <span class="store-muted">{{ _("Not published") }}</span>
                        {% endif %}
                    </span>
                </div>
                {% if not (on_pypi and pypi_has_current) %}
                <div class="store-meta-row store-meta-row--note">
                    <span class="store-meta-row__value store-muted">
                        {{ _("Install it from source. A production build resolves features from PyPI, so this version is not available there yet.") }}
                    </span>
                </div>
                {% endif %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Repository") }}</span>
                    <span class="store-meta-row__value">
                        <a href="{{ repo_url }}" target="_blank" rel="noopener">{{ feature.repo }} {{ mk.icon("external-link", 13) }}</a>
                    </span>
                </div>
                {% if feature.archetype %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Archetype") }}</span>
                    <span class="store-meta-row__value">{{ mk.archetype_badge(feature.archetype) }}</span>
                </div>
                {% endif %}
                {% if feature.category %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Category") }}</span>
                    <span class="store-meta-row__value">
                        <a href="{{ url_for('marketplace.index', category=feature.category) }}">{{ feature.category }}</a>
                    </span>
                </div>
                {% endif %}
                {% if source_label %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Source") }}</span>
                    <span class="store-meta-row__value">{{ source_label }}</span>
                </div>
                {% endif %}
                {% if feature.tags %}
                <div class="store-meta-row store-meta-row--tags">
                    <span class="store-meta-row__label">{{ _("Tags") }}</span>
                    <span class="store-meta-row__value store-tags">
                        {% for tag in feature.tags %}<a class="store-tag" href="{{ url_for('marketplace.index', q=tag) }}">{{ tag }}</a>{% endfor %}
                    </span>
                </div>
                {% endif %}
            </div>
        </aside>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    /* Copy buttons: each names the element whose text it copies. */
    (function () {
        if (!navigator.clipboard) return;
        document.addEventListener("click", function (event) {
            var button = event.target.closest(".store-copy[data-copy-target]");
            if (!button) return;
            var source = document.getElementById(button.dataset.copyTarget);
            if (!source) return;
            var text = source.textContent.replace(/\s+/g, " ").trim();
            navigator.clipboard.writeText(text).then(function () {
                var label = button.querySelector("span");
                var original = label ? (label.dataset.label || label.textContent) : "";
                if (label) {
                    label.dataset.label = original;
                    label.textContent = button.dataset.copied;
                }
                button.classList.add("is-copied");
                setTimeout(function () {
                    if (label) label.textContent = original;
                    button.classList.remove("is-copied");
                }, 2000);
            });
        });
    })();
</script>
{% endblock %}