{% extends "admin_base.html" %}

{% block content %}
<div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 bg-white rounded-lg shadow-md">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Update Blog in Issue</h1>
    
    <form method="POST" class="space-y-4">
        {% csrf_token %}
        
        <!-- Form Errors -->
        {% if form.errors %}
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">
                        Please correct the errors below
                    </h3>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Order Field -->
        <div>
            <label for="{{ form.order.id_for_label }}" class="block text-sm font-medium text-gray-700">
                {{ form.order.label }}
            </label>
            <input 
                type="number" 
                id="{{ form.order.id_for_label }}" 
                name="{{ form.order.html_name }}" 
                value="{{ form.order.value|default_if_none:'' }}" 
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2 px-3 border"
                min="1"
            >
            {% for error in form.order.errors %}
                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
            {% endfor %}
        </div>
        
        <!-- Featured Field -->
        <div class="flex items-center">
            <input 
                type="checkbox" 
                id="{{ form.featured.id_for_label }}" 
                name="{{ form.featured.html_name }}" 
                class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                {% if form.featured.value %}checked{% endif %}
            >
            <label for="{{ form.featured.id_for_label }}" class="ml-2 block text-sm text-gray-700">
                {{ form.featured.label }}
            </label>
        </div>
        
        <!-- Notes Field -->
        <div>
            <label for="{{ form.notes.id_for_label }}" class="block text-sm font-medium text-gray-700">
                {{ form.notes.label }}
            </label>
            <textarea 
                id="{{ form.notes.id_for_label }}" 
                name="{{ form.notes.html_name }}" 
                rows="3" 
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2 px-3 border"
            >{{ form.notes.value|default_if_none:'' }}</textarea>
            {% for error in form.notes.errors %}
                <p class="mt-2 text-sm text-red-600">{{ error }}</p>
            {% endfor %}
        </div>
        
        <!-- Form Actions -->
        <div class="flex justify-end space-x-3 pt-4">
            <a href="{% url 'mimansha_main:issue_detail' slug=issue_item.issue.slug %}" 
               class="inline-flex items-center px-4 py-2 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">
                Cancel
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Save Changes
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add any client-side validation or behavior here
    const form = document.querySelector('form');
    
    form.addEventListener('submit', function(e) {
        // Example validation - ensure order is positive
        const orderInput = document.getElementById('{{ form.order.id_for_label }}');
        if (orderInput.value && parseInt(orderInput.value) < 1) {
            e.preventDefault();
            alert('Order must be a positive number');
            orderInput.focus();
        }
    });
});
</script>
{% endblock %}