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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark text-white border-secondary shadow-lg">
                <div class="card-header border-secondary d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">{{ item.name|default:"Unnamed Item" }}</h3>
                    <a href="{% if type == 'wardrobe' %}{% url 'wardrobe_list' %}{% else %}{% url 'accessory_list' %}{% endif %}" class="btn btn-outline-light btn-sm">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                </div>
                <div class="card-body text-center p-0">
                    {% if item.image %}
                        <img src="{{ item.image.url }}" class="img-fluid w-100" style="max-height: 600px; object-fit: contain;" alt="{{ item.name }}">
                    {% else %}
                        <div class="py-5 bg-secondary text-dark">
                            <i class="bi bi-image" style="font-size: 5rem;"></i>
                            <p>No image available</p>
                        </div>
                    {% endif %}
                </div>
                <div class="card-footer border-secondary">
                    <div class="row">
                        <div class="col-sm-6">
                            <p class="mb-1 text-muted small">CATEGORY</p>
                            <p class="mb-3">{{ item.category|default:"Uncategorized" }}</p>
                            
                            <p class="mb-1 text-muted small">SEASON</p>
                            <p class="mb-3"><span class="badge bg-primary">{{ item.get_season_display|default:"All Seasons" }}</span></p>
                        </div>
                        <div class="col-sm-6">
                            <p class="mb-1 text-muted small">DATE ADDED</p>
                            <p class="mb-3">{{ item.date_added|date:"F j, Y, g:i a" }}</p>
                            
                            <form action="{% if type == 'wardrobe' %}{% url 'delete_wardrobe_item' item.pk %}{% else %}{% url 'delete_accessory_item' item.pk %}{% endif %}" method="POST" onsubmit="return confirm('Are you sure you want to delete this item?');">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger w-100">
                                    <i class="bi bi-trash"></i> Delete Item
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
