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

{% block content %}
<div class="container-fluid py-2">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0 fw-bold">Wardrobe</h4>
        <a href="{% url 'add_wardrobe_item' %}" class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm d-flex align-items-center">
            <i class="bi bi-plus-lg me-1"></i> <span class="d-none d-sm-inline">Add Item</span><span class="d-inline d-sm-none">Add</span>
        </a>
    </div>

    <!-- Filter Toggle and Sort Bars -->
    <div class="mb-3">
        <button class="btn btn-outline-secondary btn-sm rounded-pill px-3 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="false">
            <i class="bi bi-filter me-1"></i> Filter
        </button>
        
        <div class="collapse {% if sort != 'recent' %}show{% endif %}" id="filterCollapse">
            <div class="d-flex flex-column gap-2 mt-2">
                <a href="?sort=recent{% if current_main %}&main_category={{ current_main.id }}{% endif %}{% if current_sub %}&subcategory={{ current_sub.id }}{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" 
                   class="btn {% if sort == 'recent' %}btn-lavender{% else %}btn-outline-secondary{% endif %} btn-sm py-2 text-start px-3 rounded-3 border-0 shadow-sm">
                    Most Recently Added
                </a>
                <a href="?sort=alpha{% if current_main %}&main_category={{ current_main.id }}{% endif %}{% if current_sub %}&subcategory={{ current_sub.id }}{% endif %}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}" 
                   class="btn {% if sort == 'alpha' %}btn-lavender{% else %}btn-outline-secondary{% endif %} btn-sm py-2 text-start px-3 rounded-3 border-0 shadow-sm">
                    A-Z
                </a>
            </div>
        </div>
    </div>

    <!-- Main Categories Tabs -->
    <ul class="nav nav-pills mb-3 overflow-auto flex-nowrap pb-2 gap-2" id="mainCatTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link rounded-pill py-1 px-3 small {% if not current_main %}active bg-lavender{% else %}bg-secondary text-white{% endif %}" href="?sort={{ sort }}">All</a>
        </li>
        {% for main_cat in main_categories %}
        <li class="nav-item" role="presentation">
            <a class="nav-link rounded-pill py-1 px-3 small {% if current_main.id == main_cat.id %}active bg-lavender{% else %}bg-secondary text-white{% endif %}" 
               href="?main_category={{ main_cat.id }}&sort={{ sort }}">{{ main_cat.name }}</a>
        </li>
        {% endfor %}
    </ul>

    <!-- Subcategories Tabs -->
    {% if current_main and subcategories %}
    <div class="mb-3 overflow-auto">
        <div class="d-flex flex-nowrap gap-2 pb-2">
            <a href="?main_category={{ current_main.id }}&sort={{ sort }}" 
               class="btn btn-sm {% if not current_sub %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill py-1 px-3 small">
                All {{ current_main.name }}
            </a>
            {% for sub in subcategories %}
            <a href="?main_category={{ current_main.id }}&subcategory={{ sub.id }}&sort={{ sort }}" 
               class="btn btn-sm {% if current_sub.id == sub.id %}btn-secondary{% else %}btn-outline-secondary{% endif %} rounded-pill py-1 px-3 small">
                {{ sub.name }}
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Search Bar -->
    <form method="get" class="mb-4">
        {% 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="hidden" name="sort" value="{{ sort }}">
        <div class="input-group input-group-sm glass-card p-1">
            <span class="input-group-text bg-transparent border-0 text-dim"><i class="fas fa-search"></i></span>
            <input type="text" name="q" class="form-control bg-transparent border-0 text-white" placeholder="Search wardrobe..." value="{{ request.GET.q }}">
        </div>
    </form>

    <!-- Items Grid -->
    <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
        {% for item in items %}
        <div class="col">
            <div class="card h-100 bg-dark text-white border-secondary shadow-sm hover-card position-relative overflow-hidden" style="border-radius: 12px;">
                <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 small fw-bold">{{ item.name|default:"Unnamed" }}</h6>
                    <p class="card-text text-dim mb-0" style="font-size: 0.7rem;">{{ item.category.name|default:"Uncategorized" }}</p>
                </div>
                {% if item.season %}
                <span class="badge bg-primary position-absolute top-0 end-0 m-2" style="font-size: 0.6rem;">{{ item.get_season_display }}</span>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="bi bi-inbox text-dim" style="font-size: 3rem;"></i>
            <p class="mt-2 text-dim">No items found.</p>
        </div>
        {% endfor %}
    </div>
</div>

<style>
    .bg-lavender { background-color: var(--accent-lavender) !important; color: #fff !important; }
    .btn-lavender { background-color: var(--accent-lavender); color: #fff; }
    .text-dim { color: var(--text-dim); }
    .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: 1; }
    .nav-pills .nav-link { border: 1px solid transparent; }
    .border-secondary { border-color: rgba(255,255,255,0.1) !important; }
</style>
{% endblock %}