{% extends "base.html" %}

{% block title %}{{ name }} — Package Detail{% endblock %}

{% block content %}
<div class="page-header">
    <div class="breadcrumb">
        <a href="/ui/">Publishers</a><span class="sep">/</span><a href="/ui/packages/{{ publisher }}">{{ publisher }}</a><span class="sep">/</span>{{ name }}
    </div>
    <h1>{{ name }}</h1>
    {% if let Some(summary) = summary %}
    <p class="detail-summary">{{ summary }}</p>
    {% endif %}
</div>

<div class="detail-grid">
    <div class="detail-card">
        <h3>Package Information</h3>
        <div class="info-rows">
            <div class="info-row">
                <span class="label">Publisher</span>
                <span class="value">{{ publisher }}</span>
            </div>
            <div class="info-row">
                <span class="label">Version</span>
                <span class="value">{{ version }}</span>
            </div>
            {% if let Some(br) = build_release %}
            <div class="info-row">
                <span class="label">Build Release</span>
                <span class="value">{{ br }}</span>
            </div>
            {% endif %}
            {% if let Some(b) = branch %}
            <div class="info-row">
                <span class="label">Branch</span>
                <span class="value">{{ b }}</span>
            </div>
            {% endif %}
            {% if let Some(date) = packaging_date %}
            <div class="info-row">
                <span class="label">Packaged</span>
                <span class="value">{{ date }}</span>
            </div>
            {% endif %}
        </div>
    </div>
    <div class="detail-card">
        <h3>Size</h3>
        <div class="info-rows">
            <div class="info-row">
                <span class="label">Uncompressed</span>
                <span class="value">{{ size }}</span>
            </div>
            <div class="info-row">
                <span class="label">Compressed</span>
                <span class="value">{{ csize }}</span>
            </div>
        </div>
    </div>
</div>

<div class="copyable-block">
    <span class="copyable-label">FMRI</span>
    <div class="copyable-row">
        <code class="copyable-text" id="fmri-text">{{ fmri_str }}</code>
        <button class="copy-btn" onclick="copyText('fmri-text')" title="Copy FMRI">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        </button>
    </div>
</div>

<div class="copyable-block">
    <span class="copyable-label">Install</span>
    <div class="copyable-row">
        <code class="copyable-text" id="install-text"><span class="prompt">$</span> pkg install {{ fmri_str }}</code>
        <button class="copy-btn" onclick="copyText('install-text', true)" title="Copy install command">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        </button>
    </div>
</div>

{% if !dependencies.is_empty() %}
<h2 class="section-heading">Dependencies</h2>
<ul class="dep-list">
    {% for dep in &dependencies %}
    <li>
        {% if dep.dep_type == "require" %}
        <span class="dep-type dep-type-require">{{ dep.dep_type }}</span>
        {% else if dep.dep_type == "optional" %}
        <span class="dep-type dep-type-optional">{{ dep.dep_type }}</span>
        {% else if dep.dep_type == "incorporate" %}
        <span class="dep-type dep-type-incorporate">{{ dep.dep_type }}</span>
        {% else %}
        <span class="dep-type dep-type-default">{{ dep.dep_type }}</span>
        {% endif %}
        {% if let Some(link) = dep.link %}
        <a href="{{ link }}">{{ dep.fmri }}</a>
        {% else %}
        <span style="color: var(--d-text);">{{ dep.fmri }}</span>
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endif %}

<h2 class="section-heading">Manifest</h2>
<button class="manifest-trigger"
        hx-get="/ui/package/{{ publisher }}/{{ fmri_encoded }}/manifest"
        hx-target="#manifest-content"
        hx-swap="innerHTML"
        hx-indicator="#manifest-spinner">
    Show Raw Manifest
</button>
<span id="manifest-spinner" class="htmx-indicator">
    <span class="spinner"></span> Loading manifest...
</span>
<div id="manifest-content"></div>

<script>
function copyText(id, stripPrompt) {
    const el = document.getElementById(id);
    let text = el.textContent;
    if (stripPrompt) text = text.replace(/^\$\s*/, '');
    navigator.clipboard.writeText(text.trim()).then(() => {
        const btn = el.parentElement.querySelector('.copy-btn');
        btn.classList.add('copied');
        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
        setTimeout(() => {
            btn.classList.remove('copied');
            btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
        }, 1500);
    });
}
</script>
{% endblock %}