{% extends "base.html" %}

{% block title %}{{ title }} - New Style{% endblock %}

{% block extra_css %}
<style>
    .wardrobe-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding-bottom: 30px;
    }
    .item-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }
    .item-image {
        aspect-ratio: 1/1.2;
        overflow: hidden;
    }
    .item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .item-overlay {
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .item-card:hover .item-overlay {
        opacity: 1;
    }
    .item-details {
        padding: 10px;
        background: rgba(0,0,0,0.8);
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .item-name {
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .item-category {
        font-size: 0.6rem;
        color: var(--accent);
        text-transform: uppercase;
    }
    .tag-badge {
        font-size: 0.5rem;
        background: var(--surface-accent);
        border: 1px solid var(--border);
        padding: 1px 5px;
        border-radius: 10px;
        color: var(--text-muted);
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="font-montserrat m-0" style="font-size: 1.2rem;">{{ title|upper }}</h2>
    <button class="btn-accent py-1 px-3" data-bs-toggle="modal" data-bs-target="#addItemModal">
        <i class="bi bi-plus-lg"></i> ADD
    </button>
</div>

<div class="wardrobe-grid">
    {% for item in items %}
        <div class="item-card">
            <div class="item-image">
                {% if item.image %}
                    <img src="{{ item.image.url }}" alt="{{ item.name }}">
                {% else %}
                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-dark text-muted">
                        <i class="bi bi-image"></i>
                    </div>
                {% endif %}
            </div>
            <div class="item-overlay">
                <form action="{% url 'delete_item' item.pk %}" method="POST" onsubmit="return confirm('Delete this item?');">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-danger p-1" style="border-radius: 50%; width: 25px; height: 25px; font-size: 0.7rem;">
                        <i class="bi bi-trash"></i>
                    </button>
                </form>
            </div>
            <div class="item-details">
                <p class="item-name">{{ item.name }}</p>
                <div class="d-flex justify-content-between align-items-end">
                    <span class="item-category">{{ item.category.name|default:"General" }}</span>
                    {% if item.tags %}
                        <div class="d-flex gap-1 overflow-hidden">
                            {% for tag in item.tags.split|slice:":2" %}
                                <span class="tag-badge">{{ tag }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% empty %}
        <div class="col-12 empty-state">
            <i class="bi bi-clouds"></i>
            <p>Your {{ title|lower }} is empty.</p>
            <button class="btn-custom mt-2" data-bs-toggle="modal" data-bs-target="#addItemModal">ADD FIRST ITEM</button>
        </div>
    {% endfor %}
</div>

<!-- Add Item Modal -->
<div class="modal fade" id="addItemModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title font-montserrat">NEW ITEM</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{% url 'add_item' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-muted small">Name</label>
                        {{ form.name }}
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <label class="form-label text-muted small">Category</label>
                            {{ form.category }}
                        </div>
                        <div class="col">
                            <label class="form-label text-muted small">Type</label>
                            {{ form.item_type }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small">Tags (comma-separated)</label>
                        {{ form.tags }}
                    </div>
                    <div class="mb-0">
                        <label class="form-label text-muted small">Photo</label>
                        {{ form.image }}
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn-custom" data-bs-dismiss="modal">CANCEL</button>
                    <button type="submit" class="btn-accent">UPLOAD</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}