{% extends "explorer/base.html" %}

{% block title %}{{ repo_name }}:{{ tag }} - Registry Browser{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{% url 'registry_repositories' pk=config.pk %}">{{ config.name }}</a></li>
        <li class="breadcrumb-item"><a href="{% url 'repository_tags' pk=config.pk repo_name=repo_name %}">{{ repo_name }}</a></li>
        <li class="breadcrumb-item active">{{ tag }}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2><i class="bi bi-tag"></i> {{ repo_name }}:{{ tag }}</h2>
    </div>
    <form method="post" action="{% url 'image_delete' pk=config.pk repo_name=repo_name tag=tag %}"
          onsubmit="return confirm('¿Estás seguro de eliminar esta imagen?')">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger btn-sm">
            <i class="bi bi-trash"></i> Eliminar
        </button>
    </form>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Información General</h5>
            </div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tr>
                        <td class="text-muted" style="width: 150px;">Repositorio</td>
                        <td><strong>{{ repo_name }}</strong></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Tag / Reference</td>
                        <td><code>{{ tag }}</code></td>
                    </tr>
                    {% if detail.digest %}
                    <tr>
                        <td class="text-muted">Digest</td>
                        <td><code>{{ detail.digest }}</code></td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td class="text-muted">Tipo de Manifiesto</td>
                        <td>{{ detail.media_type_display }}</td>
                    </tr>
                    {% if detail.architecture %}
                    <tr>
                        <td class="text-muted">Arquitectura</td>
                        <td>{{ detail.architecture }}</td>
                    </tr>
                    {% endif %}
                    {% if detail.os %}
                    <tr>
                        <td class="text-muted">Sistema Operativo</td>
                        <td>{{ detail.os }}</td>
                    </tr>
                    {% endif %}
                    {% if detail.total_size_human %}
                    <tr>
                        <td class="text-muted">Tamaño Total</td>
                        <td><strong>{{ detail.total_size_human }}</strong></td>
                    </tr>
                    {% endif %}
                    {% if detail.created %}
                    <tr>
                        <td class="text-muted">Creado</td>
                        <td>{{ detail.created|truncatechars:25 }}</td>
                    </tr>
                    {% endif %}
                </table>
            </div>
        </div>

        {% if detail.sub_manifests %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-layers"></i> Manifests (Multi-Arch)</h5>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Arquitectura</th>
                            <th>OS</th>
                            <th>Tamaño</th>
                            <th>Digest</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for m in detail.sub_manifests %}
                        <tr>
                            <td><span class="badge bg-primary">{{ m.architecture }}</span></td>
                            <td><span class="badge bg-secondary">{{ m.os }}</span></td>
                            <td>{{ m.size_human }}</td>
                            <td><span class="digest-text">{{ m.digest }}</span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        {% if detail.layers %}
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-layers"></i> Capas (Layers)</h5>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Tamaño</th>
                            <th>Digest</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for layer in detail.layers %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ layer.size_human }}</td>
                            <td><span class="digest-text">{{ layer.digest }}</span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-md-4">
        {% if detail.history %}
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-clock-history"></i> Historial de Build</h5>
            </div>
            <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                {% for h in detail.history %}
                <div class="layer-item mb-2 p-2 bg-light rounded">
                    <code>{{ h.created_by }}</code>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}