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

{% block extra_css %}
{# Select2 CSS now loaded globally from vendor in base.html #}
<style>
    .select2-container--classic .select2-selection--multiple {
        border: 1px solid #d1d5db !important;
        border-radius: 0.375rem !important;
        min-height: 38px !important;
    }
    .select2-container--classic .select2-selection--multiple .select2-selection__choice {
        background-color: #e5e7eb !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0.25rem !important;
        padding: 2px 8px !important;
        margin: 3px !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Back Button -->
    <div class="mb-6">
        <a href="{% url 'collection-list' %}"
           class="inline-flex items-center p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded-md"
           title="{% trans 'Back to Collections' %}">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            <span class="ml-1 text-sm">{% trans "Back to Collections" %}</span>
        </a>
    </div>

    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-6">
                {% if form.instance.pk %}
                    {% trans "Edit Collection" %}
                {% else %}
                    {% trans "New Collection" %}
                {% endif %}
            </h1>

            <form method="post" class="space-y-6">
                {% csrf_token %}

                <!-- Name Field -->
                <div>
                    <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.name.label }}
                    </label>
                    <div class="mt-1">
                        <input type="text"
                               name="{{ form.name.name }}"
                               id="{{ form.name.id_for_label }}"
                               value="{{ form.name.value|default_if_none:'' }}"
                               class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                               required>
                    </div>
                    {% if form.name.errors %}
                        <p class="mt-2 text-sm text-red-600">{{ form.name.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Description Field -->
                <div>
                    <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.description.label }}
                    </label>
                    <div class="mt-1">
                        <textarea name="{{ form.description.name }}"
                                  id="{{ form.description.id_for_label }}"
                                  rows="3"
                                  class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">{{ form.description.value|default_if_none:'' }}</textarea>
                    </div>
                    {% if form.description.errors %}
                        <p class="mt-2 text-sm text-red-600">{{ form.description.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Tags Field -->
                <div>
                    <label for="{{ form.tags.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ form.tags.label }}
                    </label>
                    <div class="mt-1">
                        {{ form.tags }}
                    </div>
                    {% if form.tags.errors %}
                        <p class="mt-2 text-sm text-red-600">{{ form.tags.errors.0 }}</p>
                    {% endif %}
                </div>

                <!-- Action Buttons -->
                <div class="pt-5">
                    <div class="flex justify-end space-x-3">
                        <a href="{% url 'collection-list' %}"
                           class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            {% trans "Cancel" %}
                        </a>
                        <button type="submit"
                                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            {% if form.instance.pk %}
                                {% trans "Update Collection" %}
                            {% else %}
                                {% trans "Create Collection" %}
                            {% endif %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{# jQuery and Select2 are loaded globally from vendor in base.html #}
<script>
    $(document).ready(function() {
        // Initialize Select2 for tags
        $('#id_tags').select2({
            theme: 'classic',
            width: '100%',
            placeholder: '{% trans "Select tags" %}',
            allowClear: true,
            tags: true, // Allow creating new tags
            tokenSeparators: [',', ' '],
            createTag: function(params) {
                var term = $.trim(params.term);
                if (term === '') {
                    return null;
                }
                return {
                    id: term,
                    text: term,
                    newTag: true
                };
            }
        });
    });
</script>
{% endblock %}