{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2 mb-0">Wardrobe</h1>
        <a href="{% url 'add_wardrobe_item' %}" class="btn btn-primary shadow-sm">
            <i class="bi bi-plus-lg"></i> Add Item
        </a>
    </div>

    <!-- Main Categories Tabs -->
    <ul class="nav nav-pills mb-3 overflow-auto flex-nowrap pb-2" id="mainCatTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if not current_main %}active{% endif %}" href="{% url 'wardrobe_list' %}">All</a>
        </li>
        {% for main_cat in main_categories %}
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if current_main.id == main_cat.id %}active{% endif %}" 
               href="?main_category={{ main_cat.id }}">{{ main_cat.name }}</a>
        </li>
        {% endfor %}
    </ul>

    <!-- Subcategories Tabs (if main category selected) -->
    {% if current_main and subcategories %}
    <div class="mb-4">
        <div class="d-flex flex-wrap gap-2">
            <a href="?main_category={{ current_main.id }}" 
               class="btn btn-sm {% if not current_sub %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                All {{ current_main.name }}
            </a>
            {% for sub in subcategories %}
            <a href="?main_category={{ current_main.id }}&subcategory={{ sub.id }}" 
               class="btn btn-sm {% if current_sub.id == sub.id %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill">
                {{ sub.name }}
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Search Bar -->
    <div class="row mb-4">
        <div class="col-md-6">
            <form method="get" class="d-flex shadow-sm">
                {% if current_main %}<input type="hidden" name="main_category" value="{{ current_main.id }}">{% endif %}
                {% if current_sub %}<input type="hidden" name="subcategory" value="{{ current_sub.id }}">{% endif %}
                <input type="text" name="q" class="form-control bg-dark text-white border-secondary" placeholder="Search wardrobe..." value="{{ request.GET.q }}">
                <button class="btn btn-secondary border-secondary" type="submit"><i class="bi bi-search"></i></button>
            </form>
        </div>
    </div>

    <!-- Items Grid -->
    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-4">
        {% for item in items %}
        <div class="col">
            <div class="card h-100 bg-dark text-white border-secondary shadow-sm hover-card position-relative">
                <a href="{% url 'wardrobe_item_detail' item.pk %}" class="stretched-link"></a>
                {% if item.image %}
                <img src="{{ item.image.url }}" class="card-img-top" style="aspect-ratio: 3/4; object-fit: cover;" alt="{{ item.name }}">
                {% else %}
                <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="aspect-ratio: 3/4;">
                    <i class="bi bi-image text-muted" style="font-size: 2rem;"></i>
                </div>
                {% endif %}
                <div class="card-body p-2">
                    <h6 class="card-title mb-0 text-truncate">{{ item.name|default:"Unnamed" }}</h6>
                    <p class="card-text small text-muted mb-0">{{ item.category.name|default:"Uncategorized" }}</p>
                    {% if item.season %}
                    <span class="badge bg-primary position-absolute top-0 end-0 m-2">{{ item.get_season_display }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
            <p class="mt-2">No items found in this category.</p>
        </div>
        {% endfor %}
    </div>
</div>

<style>
    .hover-card { transition: transform 0.2s, box-shadow 0.2s; }
    .hover-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; z-index: 10; }
    .nav-pills .nav-link { color: #adb5bd; border: 1px solid transparent; margin-right: 5px; }
    .nav-pills .nav-link.active { background-color: #0d6efd; color: white; }
    .nav-pills .nav-link:hover:not(.active) { border-color: #495057; }
</style>
{% endblock %}