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

{% block title %}{{ feature.short }} · {{ _("Marketplace") }}{% endblock %}

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

    <nav class="store-crumbs" aria-label="{{ _('Breadcrumb') }}">
        <a href="{{ url_for('marketplace.index') }}">{{ _("Marketplace") }}</a>
        <span aria-hidden="true"> / </span>
        <span>{{ feature.short }}</span>
    </nav>

    <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 feature.env %}<span class="store-badge store-badge--config">{{ feature.env }}</span>{% endif %}
                {% if feature.refinement %}<span class="store-badge store-badge--config">{{ _("refinement") }}</span>{% endif %}
            </div>
        </div>
    </header>

    <div class="store-cols">

        {# ── Left column: about, contract, dependencies ─────────────────── #}
        <div>
            <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>

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

            <section class="store-section">
                <h2 class="store-section__title">{{ mk.icon("git-branch") }}{{ _("Dependencies") }}</h2>
                {% if feature.requires.features %}
                <div class="store-contract-row store-contract-row--bare">
                    <div class="store-contract-row__label">{{ _("Requires") }}</div>
                    <div class="store-contract-row__values">
                        {% for dep in feature.requires.features %}{{ mk.feature_chip(dep) }}{% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if feature.requires.features_optional %}
                <div class="store-contract-row store-contract-row--bare">
                    <div class="store-contract-row__label">{{ _("Works better with") }}</div>
                    <div class="store-contract-row__values">
                        {% for dep in feature.requires.features_optional %}{{ mk.feature_chip(dep) }}{% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if feature.used_by %}
                <div class="store-contract-row store-contract-row--bare">
                    <div class="store-contract-row__label">{{ _("Used by") }}</div>
                    <div class="store-contract-row__values">
                        {% for dep in feature.used_by %}{{ mk.feature_chip(dep) }}{% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if feature.requires.env_vars %}
                <div class="store-contract-row store-contract-row--bare">
                    <div class="store-contract-row__label">{{ _("Env vars") }}</div>
                    <div class="store-contract-row__values">
                        {% for var in feature.requires.env_vars %}<code class="store-code">{{ var }}</code>{% endfor %}
                    </div>
                </div>
                {% endif %}
                {% if not (feature.requires.features or feature.requires.features_optional
                           or feature.used_by or feature.requires.env_vars) %}
                <p class="store-about store-muted">{{ _("No hard dependencies.") }}</p>
                {% endif %}
            </section>

            {% if collisions %}
            <section class="store-section">
                <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) }}{% endfor %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </section>
            {% endif %}
        </div>

        {# ── Right column (sticky): install + metadata ──────────────────── #}
        <aside class="store-side">
            <div class="store-install">
                <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">{{ install_command }}</code>
                    <button class="store-copy" type="button" id="mk-copy"
                            data-copied="{{ _('Copied') }}">{{ mk.icon("copy") }}<span>{{ _("Copy") }}</span></button>
                </div>
                <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">{{ _("Version") }}</span>
                    <span class="store-meta-row__value">{{ mk.version_pill(feature) }}</span>
                </div>
                <div class="store-meta-row">
                    <span class="store-meta-row__label">PyPI</span>
                    <span class="store-meta-row__value">
                        {% if on_pypi %}
                        <span class="store-ok">{{ mk.icon("check-circle", 14) }} {{ _("Published") }}{% if pypi_version %} · v{{ pypi_version }}{% endif %}</span>
                        {% else %}
                        <span class="store-muted">{{ _("Not published yet") }}</span>
                        {% endif %}
                    </span>
                </div>
                <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">{{ feature.category }}</span>
                </div>
                {% endif %}
                {% if feature.requires_python %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Python") }}</span>
                    <span class="store-meta-row__value"><code class="store-code">{{ feature.requires_python }}</code></span>
                </div>
                {% endif %}
                {% if feature.source %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Source") }}</span>
                    <span class="store-meta-row__value">{{ feature.source }}</span>
                </div>
                {% endif %}
                {% if feature.tags %}
                <div class="store-meta-row">
                    <span class="store-meta-row__label">{{ _("Tags") }}</span>
                    <span class="store-meta-row__value">
                        {% for tag in feature.tags %}<span class="store-chip store-chip--amber">{{ tag }}</span> {% endfor %}
                    </span>
                </div>
                {% endif %}
            </div>
        </aside>

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

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