{% extends "base.html" %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <div class="col-md-9">
            {# Package Header #}
            <h1 class="display-5 fw-bold mb-1">{{ package_json.name }} <span class="text-muted">v{{ package_json.version }}</span></h1>
            <p class="text-muted mb-3">
                Latest Version: {{ package_json.version }}
                {% if latest_official_version and latest_official_version != package_json.version %}
                    | Latest Official: {{ latest_official_version }}
                {% endif %}
            </p>
            
            {# Install Commands #}
            <div class="mb-3">
                <label for="npmInstall" class="form-label small">Install package</label>
                <div class="input-group input-group-sm">
                    {% set registry_base = package_json.registry | default('https://packages.simplifier.net') %}
                    {% set registry_url = registry_base | replace('/rssfeed', '') %}
                    <input type="text" class="form-control form-control-sm" id="npmInstall" readonly
                           value="npm --registry {{ registry_url }} install {{ package_json.name }}@{{ package_json.version }}">
                    <button class="btn btn-outline-secondary btn-sm" type="button" onclick="copyToClipboard('npmInstall')" aria-label="Copy NPM command">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
            </div>
            <div class="mb-4">
                <label for="curlCommand" class="form-label small">Get resources</label>
                <div class="input-group input-group-sm">
                    {% set registry_base = package_json.registry | default('https://packages.simplifier.net') %}
                    {% set registry_url = registry_base | replace('/rssfeed', '') %}
                    <input type="text" class="form-control form-control-sm" id="curlCommand" readonly
                           value="curl {{ registry_url }}/{{ package_json.name }}/{{ package_json.version }}/package.tgz | gunzip | tar xf -">
                    <button class="btn btn-outline-secondary btn-sm" type="button" onclick="copyToClipboard('curlCommand')" aria-label="Copy curl command">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
            </div>
            <div class="mb-4">
                <label for="packageURL" class="form-label small">Straight Package Download</label>
                <div class="input-group input-group-sm">
                    {% set registry_base = package_json.registry | default('https://packages.simplifier.net') %}
                    {% set registry_url = registry_base | replace('/rssfeed', '') %}
                    <input type="text" class="form-control form-control-sm" id="packageURL" readonly
                           value="{{ package_json.canonical }}">      
                    <button class="btn btn-outline-secondary btn-sm" type="button" onclick="copyToClipboard('packageURL')" aria-label="Copy curl command">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
            </div>

            {# Description #}
            <h5 class="mt-4">Description</h5>
            <p>{{ package_json.description | default('No description provided.', true) }}</p>

            {# Dependencies #}
            <h5 class="mt-4">Dependencies</h5>
            {% if dependencies %}
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Package</th>
                            <th scope="col">Version</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for dep in dependencies %}
                        <tr>
                            <td>{{ dep.name }}</td>
                            <td>{{ dep.version }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="text-muted">No dependencies found for this package.</p>
            {% endif %}

            {# Dependents #}
            <h5 class="mt-4">Dependents</h5>
            <div id="dependents-content" hx-get="{{ url_for('package.dependents', name=package_name) }}" hx-trigger="load" hx-swap="innerHTML">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...
            </div>

            {# Logs #}
            <h5 class="mt-4">Logs</h5>
            <div id="logs-content" hx-get="{{ url_for('package.logs', name=package_name) }}" hx-trigger="load" hx-swap="innerHTML">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...
            </div>
        </div>

        <div class="col-md-3">
            <h3 class="mb-3">Versions ({{ versions | length }})</h3>
            <ul class="list-group list-group-flush">
                {% for version in versions %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span>{{ version }}</span>
                    {% if version == latest_official_version %}
                        <i class="fas fa-star text-warning" title="Latest Official Release"></i>
                    {% endif %}
                </li>
                {% else %}
                <li class="list-group-item">No versions found.</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    var copyText = document.getElementById(elementId);
    copyText.select();
    copyText.setSelectionRange(0, 99999); /* For mobile devices */
    navigator.clipboard.writeText(copyText.value).then(function() {
        // Optional: Show a temporary tooltip or change button text
    }, function(err) {
        console.error('Could not copy text: ', err);
    });
}
</script>
{% endblock %}