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

{% 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:'' }}"
                               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 border-gray-300 rounded-md">{{ form.description.value|default:'' }}</textarea>
                    </div>
                    {% if form.description.errors %}
                        <p class="mt-2 text-sm text-red-600">{{ form.description.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">
                            {% trans "Save" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}