{% extends "pi_fyad/base.html" %}
{% load pi_fyad_tags %}

{% block pi_content %}

<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'pi_fyad:template_list' %}">Templates</a></li>
        <li class="breadcrumb-item active">{{ template.name }}</li>
    </ol>
</nav>

<div class="row">
    <!-- Template Info -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    {% eve_planet_image template.planet_type_id 32 %}
                    <strong class="ms-2">{{ template.name }}</strong>
                    <span class="badge bg-{% if template.visibility == 'public' %}success{% elif template.visibility == 'alliance' %}primary{% elif template.visibility == 'corp' %}info{% else %}secondary{% endif %} ms-2">
                        {{ template.get_visibility_display }}
                    </span>
                </div>
                <small class="text-muted">{{ template.planet_type_name }}</small>
            </div>
            <div class="card-body">
                {% if template.description %}
                <p class="mb-3">{{ template.description }}</p>
                {% endif %}

                <div class="row text-center mb-4">
                    <div class="col-3">
                        <h4>{{ template.pin_count }}</h4>
                        <small class="text-muted">Total Pins</small>
                    </div>
                    <div class="col-3">
                        <h4>{{ template.factory_count }}</h4>
                        <small class="text-muted">Factories</small>
                    </div>
                    <div class="col-3">
                        <h4>{{ template.extractor_count }}</h4>
                        <small class="text-muted">Extractors</small>
                    </div>
                    <div class="col-3">
                        <h4>{{ template.output_products|length }}</h4>
                        <small class="text-muted">Outputs</small>
                    </div>
                </div>

                {% if template.output_products %}
                <h6>Output Products</h6>
                <div class="mb-3">
                    {% for product in template.output_products %}
                    <span class="badge bg-primary me-1 mb-1">{{ product }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Pin List -->
                <h6>Pin Layout</h6>
                <table class="table table-sm table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Type</th>
                            <th>Role</th>
                            <th>Tier</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for tp in template_pins %}
                        <tr>
                            <td>{{ tp.pin_index }}</td>
                            <td>
                                {% eve_type_icon tp.type_id 20 %}
                                <span class="ms-1">{{ tp.type_name }}</span>
                            </td>
                            <td>
                                {% if tp.is_extractor %}
                                <span class="badge bg-info">Extractor</span>
                                {% elif tp.is_factory %}
                                <span class="badge bg-warning text-dark">Factory</span>
                                {% elif tp.is_storage %}
                                <span class="badge bg-secondary">Storage</span>
                                {% else %}
                                <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if tp.is_factory %}
                                {{ tp.factory_tier|factory_tier_badge }}
                                {% else %}
                                —
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="card-footer text-muted small">
                Created {{ template.created_at|timesince }} ago
                {% if template.created_by %}
                by {{ template.created_by.character_name }}
                {% endif %}
                · Updated {{ template.updated_at|timesince }} ago
            </div>
        </div>
    </div>

    <!-- Clipboard Export -->
    <div class="col-lg-4">
        <div class="card mb-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="fas fa-clipboard me-2"></i>Clipboard Export</h6>
            </div>
            <div class="card-body">
                <p class="small text-muted">
                    Copy this text and paste it into EVE's PI import to replicate this setup.
                </p>
                <textarea id="clipboard-export" class="form-control mb-2" rows="8" readonly>{{ clipboard_text }}</textarea>
                <button class="btn btn-primary w-100" onclick="copyClipboard()">
                    <i class="fas fa-copy me-1"></i>Copy to Clipboard
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}