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

{% block title %}Tags - {{ repo_name }}{% 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 active">{{ repo_name }}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2><i class="bi bi-archive"></i> {{ repo_name }}</h2>
        <p class="text-muted mb-0">{{ count }} tag{{ count|pluralize }}</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="d-flex gap-2">
            <input type="text" name="search" class="form-control search-box"
                   placeholder="Buscar tag..." value="{{ search }}">
            <button type="submit" class="btn btn-outline-primary">
                <i class="bi bi-search"></i> Buscar
            </button>
            {% if search %}
            <a href="{% url 'repository_tags' pk=config.pk repo_name=repo_name %}"
               class="btn btn-outline-secondary">
                <i class="bi bi-x-lg"></i> Limpiar
            </a>
            {% endif %}
        </form>
    </div>
</div>

{% if tags %}
<div class="card">
    <div class="list-group list-group-flush">
        {% for tag in tags %}
        <a href="{% url 'image_detail' pk=config.pk repo_name=repo_name tag=tag %}"
           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <div>
                <i class="bi bi-tag me-2"></i>
                <span class="tag-badge">{{ tag }}</span>
            </div>
            <i class="bi bi-chevron-right text-muted"></i>
        </a>
        {% endfor %}
    </div>
</div>
{% else %}
<div class="empty-state">
    <i class="bi bi-inbox" style="font-size: 3rem;"></i>
    {% if search %}
    <h4 class="mt-3">No se encontraron tags</h4>
    <p>No hay tags que coincidan con "{{ search }}"</p>
    {% else %}
    <h4 class="mt-3">No hay tags</h4>
    <p>Este repositorio no contiene tags.</p>
    {% endif %}
</div>
{% endif %}
{% endblock %}