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

{% block content %}
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0 fw-bold">{{ title }}</h4>
    <a href="{% url 'new_fit' %}" class="btn btn-sm btn-outline-lavender rounded-pill px-3">
        <i class="fas fa-plus me-1"></i> New Fit
    </a>
</div>

<!-- Category Tabs (Folders) -->
<div class="category-tabs-container mb-4 overflow-auto">
    <ul class="nav nav-pills flex-nowrap pb-2 gap-2" id="folder-tabs" role="tablist" style="min-width: max-content;">
        <li class="nav-item" role="presentation">
            <a href="{% url 'outfit_list' %}" class="nav-link rounded-pill {% if not current_folder %}active bg-lavender{% else %}bg-secondary text-white{% endif %} py-1 px-3 small">
                All Outfits
            </a>
        </li>
        {% for folder in folders %}
        <li class="nav-item" role="presentation">
            <a href="{% url 'outfit_list' %}?folder={{ folder.id }}" class="nav-link rounded-pill {% if current_folder.id == folder.id %}active bg-lavender{% else %}bg-secondary text-white{% endif %} py-1 px-3 small">
                {{ folder.name }}
            </a>
        </li>
        {% endfor %}
    </ul>
</div>

<!-- Search -->
<form method="GET" class="mb-4">
    {% if current_folder %}<input type="hidden" name="folder" value="{{ current_folder.id }}">{% endif %}
    <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 outfits..." value="{{ request.GET.q }}">
    </div>
</form>

<!-- Outfit Grid -->
<div class="row g-3">
    {% for outfit in outfits %}
    <div class="col-6 col-md-4">
        <div class="glass-card outfit-card h-100 overflow-hidden position-relative">
            <!-- Delete Button -->
            <form action="{% url 'delete_outfit' outfit.pk %}" method="post" class="position-absolute top-0 end-0 z-2 m-1">
                {% csrf_token %}
                <button type="submit" class="btn btn-sm btn-link text-danger p-0" onclick="return confirm('Delete this outfit?')">
                    <i class="fas fa-times-circle shadow-sm" style="font-size: 1.1rem; background: rgba(0,0,0,0.5); border-radius: 50%;"></i>
                </button>
            </form>

            <div class="outfit-collage p-2" data-bs-toggle="modal" data-bs-target="#previewModal{{ outfit.id }}">
                <div class="rounded bg-secondary position-relative overflow-hidden mb-2" style="aspect-ratio: 1/1;">
                    {% with first_item=outfit.items.first %}
                        {% if first_item %}
                            <img src="{{ first_item.image.url }}" class="w-100 h-100 object-fit-cover" alt="">
                        {% else %}
                            <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-dark">
                                <i class="fas fa-tshirt text-dim fa-2x"></i>
                            </div>
                        {% endif %}
                    {% endwith %}
                </div>
                <div class="small fw-bold text-truncate">{{ outfit.name|default:"Unnamed Outfit" }}</div>
                <div class="small text-dim">{{ outfit.items.count }} items</div>
            </div>
            
            <!-- Quick Schedule Button -->
            <div class="p-2 pt-0">
                <button class="btn btn-sm btn-outline-secondary w-100 py-0" style="font-size: 0.7rem;" data-bs-toggle="modal" data-bs-target="#scheduleModal{{ outfit.id }}">
                    <i class="far fa-calendar-alt me-1"></i> Schedule
                </button>
            </div>
        </div>
    </div>

    <!-- Preview Modal -->
    <div class="modal fade" id="previewModal{{ outfit.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-dark text-white border-secondary">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title">{{ outfit.name|default:"Outfit Details" }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="small text-dim mb-2 text-uppercase tracking-wider">Clothing Items</div>
                        <div class="d-flex flex-wrap gap-2">
                            {% for item in outfit.items.all %}
                            <div class="rounded bg-secondary overflow-hidden" style="width: 60px; height: 60px;">
                                <img src="{{ item.image.url }}" class="w-100 h-100 object-fit-cover" title="{{ item.name }}">
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% if outfit.accessories.exists %}
                    <div class="mb-3">
                        <div class="small text-dim mb-2 text-uppercase tracking-wider">Accessories</div>
                        <div class="d-flex flex-wrap gap-2">
                            {% for acc in outfit.accessories.all %}
                            <div class="rounded bg-secondary overflow-hidden" style="width: 60px; height: 60px;">
                                <img src="{{ acc.image.url }}" class="w-100 h-100 object-fit-cover" title="{{ acc.name }}">
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    <div class="mt-4">
                        <button class="btn btn-lavender w-100" data-bs-toggle="modal" data-bs-target="#scheduleModal{{ outfit.id }}">
                            <i class="far fa-calendar-alt me-2"></i> Schedule for this week
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Schedule Modal -->
    <div class="modal fade" id="scheduleModal{{ outfit.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-dark text-white border-secondary">
                <div class="modal-header border-secondary">
                    <h5 class="modal-title">Schedule Outfit</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="list-group list-group-flush">
                        {% for day in week_data %}
                        <form action="{% url 'assign_outfit' %}" method="post">
                            {% csrf_token %}
                            <input type="hidden" name="outfit_id" value="{{ outfit.id }}">
                            <input type="hidden" name="date" value="{{ day.date }}">
                            <button type="submit" class="list-group-item list-group-item-action bg-dark text-white border-secondary d-flex justify-content-between align-items-center py-3">
                                <div>
                                    <span class="fw-bold">{{ day.day }}</span>
                                    <span class="small text-dim ms-2">{{ day.date }}</span>
                                </div>
                                <i class="fas fa-calendar-plus text-lavender"></i>
                            </button>
                        </form>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12 text-center py-5">
        <p class="text-dim">No outfits found.</p>
        <a href="{% url 'new_fit' %}" class="btn btn-outline-lavender rounded-pill">Create Outfit</a>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_css %}
<style>
    .bg-lavender { background-color: var(--accent-lavender) !important; color: #fff !important; }
    .text-lavender { color: var(--accent-lavender); }
    .btn-outline-lavender { color: var(--accent-lavender); border-color: var(--accent-lavender); }
    .btn-outline-lavender:hover { background-color: var(--accent-lavender); color: #fff; }
    .btn-lavender { background-color: var(--accent-lavender); color: #fff; border: none; }
    .btn-lavender:hover { opacity: 0.9; }
    .outfit-card { transition: transform 0.2s; cursor: pointer; }
    .outfit-card:hover { transform: translateY(-2px); }
    .object-fit-cover { object-fit: cover; }
    .z-2 { z-index: 2; }
</style>
{% endblock %}