{% extends "admin_base.html" %}

{% block title %}Manage Size Categories{% endblock %}

{% block admin_content %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Add new size category form -->
    <div class="bg-gray-50 p-6 rounded-lg">
        <h2 class="text-xl font-bold mb-4">Add New Size Category</h2>
        <form method="POST" enctype="multipart/form-data" class="space-y-4">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input type="text" name="name" id="name" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
            </div>
            <div>
                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                <textarea name="description" id="description" rows="3"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
            </div>
            <div>
                <label for="icon" class="block text-sm font-medium text-gray-700">Icon (SVG)</label>
                <input type="file" name="icon" id="icon" accept=".svg"
                    class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
            </div>
            <button type="submit" class="w-full btn-main text-lg font-semibold">Add Size Category</button>
        </form>
    </div>

    <!-- List of existing size categories -->
    <div class="bg-gray-50 p-6 rounded-lg">
        <h2 class="text-xl font-bold mb-4">Existing Size Categories</h2>
        <div class="space-y-4">
            {% for size in sizes %}
            <div class="p-4 rounded-lg shadow flex justify-between items-center">
                <div class="flex items-center gap-3">
                    {% if size.icon %}
                    <img src="{{ url_for('static', filename='icons/' ~ size.icon) }}" alt="Icon" class="w-8 h-8 inline-block">
                    {% endif %}
                    <div>
                        <h3 class="font-bold">{{ size.name }}</h3>
                        {% if size.description %}
                        <p class="text-gray-600 mt-2">{{ size.description }}</p>
                        {% endif %}
                    </div>
                </div>
                <div class="flex space-x-2">
                    <a href="{{ url_for('edit_size', size_id=size.id) }}" class="btn-edit">Edit</a>
                    <form id="delete-size-{{ size.id }}" method="POST" action="{{ url_for('delete_size', size_id=size.id) }}" style="display:inline;">
                        <button type="button" onclick="showDeleteModal('delete-size-{{ size.id }}', 'Are you sure you want to delete the size category {{ size.name }}?')" class="btn-delete">Delete</button>
                    </form>
                </div>
            </div>
            {% else %}
            <p class="text-gray-500">No size categories added yet.</p>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}