{% extends "cms/base.html" %}

{% block title %}ورود - دستیار تولید محتوا{% endblock %}

{% block content %}
    <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md w-full space-y-8">
            <div>
                <div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-indigo-100">
                    <span class="text-2xl">🔐</span>
                </div>
                <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
                    ورود به دستیار تولید محتوا
                </h2>
                <p class="mt-2 text-center text-sm text-gray-600">
                    یا
                    <a href="/tools/register/" class="font-medium text-indigo-600 hover:text-indigo-500">
                        اگر حساب ندارید ثبت‌نام کنید
                    </a>
                </p>
            </div>
            <form class="mt-8 space-y-6" method="post">
                {% csrf_token %}
                <input type="hidden" name="remember" value="true">
                
                <div class="space-y-4">
                    <div>
                        <label for="{{ form.username.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">نام کاربری</label>
                        <input type="text" name="username" id="{{ form.username.id_for_label }}" required
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
                               placeholder="نام کاربری خود را وارد کنید"
                               value="{{ form.username.value|default:'' }}">
                        {% if form.username.errors %}
                            <div class="mt-2 text-red-600 text-sm">
                                {% for error in form.username.errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div>
                        <label for="{{ form.password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">رمز عبور</label>
                        <input type="password" name="password" id="{{ form.password.id_for_label }}" required
                               class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
                               placeholder="رمز عبور خود را وارد کنید">
                        {% if form.password.errors %}
                            <div class="mt-2 text-red-600 text-sm">
                                {% for error in form.password.errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                {% if form.non_field_errors %}
                    <div class="rounded-md bg-red-50 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-red-400" 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="mr-3">
                                <h3 class="text-sm font-medium text-red-800">
                                    خطا در ورود
                                </h3>
                                <div class="mt-2 text-sm text-red-700">
                                    {% for error in form.non_field_errors %}
                                        <p>{{ error }}</p>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}

                {% if messages %}
                    {% for message in messages %}
                        <div class="rounded-md p-4 {% if message.tags == 'error' %}bg-red-50 text-red-800{% else %}bg-green-50 text-green-800{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}

                <div>
                    <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <span class="absolute right-0 inset-y-0 flex items-center pr-3">
                            <svg class="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                            </svg>
                        </span>
                        ورود
                    </button>
                </div>

                <div class="text-center">
                    <a href="/tools/forgot-password/" class="font-medium text-indigo-600 hover:text-indigo-500 text-sm">
                        رمز عبور خود را فراموش کرده‌اید؟
                    </a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}