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

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
            <h1 class="text-2xl font-bold text-gray-900">
                {% if form.instance.pk %}
                {% trans "Edit Tag" %}
                {% else %}
                {% trans "New Tag" %}
                {% endif %}
            </h1>
        </div>

        <div class="px-4 py-5 sm:p-6">
            <form method="post" class="space-y-6">
                {% csrf_token %}
                
                {% for field in form %}
                <div class="space-y-2">
                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700">
                        {{ field.label }}
                    </label>
                    <div class="mt-1">
                        {% if field.name == 'description' %}
                            <textarea name="{{ field.name }}" id="{{ field.id_for_label }}" 
                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                                rows="3">{{ field.value|default:'' }}</textarea>
                        {% else %}
                            <input type="text" name="{{ field.name }}" id="{{ field.id_for_label }}" 
                                value="{{ field.value|default:'' }}"
                                class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md">
                        {% endif %}
                    </div>
                    {% if field.help_text %}
                    <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p>
                    {% endif %}
                    {% if field.errors %}
                    <div class="mt-2 text-sm text-red-600">
                        {{ field.errors }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}

                <div class="flex justify-end space-x-3 mt-6">
                    <a href="{% url 'tag-list' %}" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-gray-700 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-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>
            </form>
        </div>
    </div>
</div>
{% endblock %}