{% extends "base.html" %}
{% load static i18n allauth account socialaccount %}

{% block title %}Log in · Redea Social{% endblock %}

{% block auth_content %}
<style>
  .auth-card .btn-brand {
    background-color: #93a240;
    box-shadow: 0 4px 14px rgba(147, 162, 64, 0.28);
  }
  .auth-card .btn-brand:hover {
    background-color: #849139;
    box-shadow: 0 6px 20px rgba(147, 162, 64, 0.35);
  }
  .auth-card .btn-brand:focus {
    box-shadow: 0 0 0 3px rgba(147, 162, 64, 0.35);
  }
</style>
<div class="w-full max-w-md px-4">
    <!-- Logo & Header -->
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-12 h-12 mb-4">
            <img src="{% static 'img/redea-social.svg' %}" alt="Redea Social logo" class="w-12 h-12 object-contain">
        </div>
        <span class="block text-[11px] font-semibold uppercase tracking-widest mb-2" style="color: #93a240;">Redea Social</span>
        <h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">
            Welcome back
        </h1>
        <p class="text-sm mt-1" style="color: var(--text-secondary);">
            Log in to Redea Social | Social media scheduling &amp; approvals.
        </p>
    </div>

    <!-- Card -->
    <div class="auth-card">
        {% if messages %}
        <div class="mb-5 space-y-2">
            {% for message in messages %}
            <div class="{% if message.tags == 'error' %}alert-error{% elif message.tags == 'success' %}alert-success{% else %}alert-info{% endif %}">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Social Login -->
        {% if SOCIALACCOUNT_ENABLED %}
            {% get_providers as socialaccount_providers %}
            {% if socialaccount_providers %}
                <div class="space-y-3 mb-6">
                    {% for provider in socialaccount_providers %}
                        {% provider_login_url provider process="login" as href %}
                        <form method="post" action="{{ href }}">
                            {% csrf_token %}
                            <button type="submit" class="btn-social">
                                {% if provider.id == "google" %}
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
                                {% endif %}
                                <span>Log in with {{ provider.name }}</span>
                            </button>
                        </form>
                    {% endfor %}
                </div>
                <div class="divider-text my-6">or</div>
            {% endif %}
        {% endif %}

        <!-- Email/Password Form -->
        {% if not SOCIALACCOUNT_ONLY %}
        {% url 'account_login' as login_url %}
        <form method="post" action="{{ login_url }}">
            {% csrf_token %}
            {{ redirect_field }}

            {% for field in form %}
            {% if field.field.widget.input_type == "checkbox" %}
            <div class="mb-4">
                <label for="{{ field.id_for_label }}" class="inline-flex items-center gap-2 cursor-pointer text-sm" style="color: var(--text-secondary);">
                    <input type="checkbox"
                           name="{{ field.html_name }}"
                           id="{{ field.id_for_label }}"
                           {% if field.value %}checked{% endif %}
                           class="w-4 h-4 rounded accent-[var(--primary)]" style="border-color: var(--border);">
                    {{ field.label }}
                </label>
            </div>
            {% else %}
            <div class="mb-4">
                <label for="{{ field.id_for_label }}" class="block text-sm font-semibold mb-1.5" style="color: var(--text-primary);">
                    {{ field.label }}
                </label>
                <input type="{{ field.field.widget.input_type }}"
                       name="{{ field.html_name }}"
                       id="{{ field.id_for_label }}"
                       value="{{ field.value|default:'' }}"
                       {% if field.field.widget.attrs.placeholder %}placeholder="{{ field.field.widget.attrs.placeholder }}"{% endif %}
                       {% if field.field.widget.attrs.autocomplete %}autocomplete="{{ field.field.widget.attrs.autocomplete }}"{% endif %}
                       {% if field.field.required %}required{% endif %}
                       class="form-input-styled {% if field.errors %}is-error{% endif %}">
                {% if field.errors %}
                <p class="mt-1 text-xs" style="color: var(--error-700);">{{ field.errors.0 }}</p>
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}

            <!-- Forgot password link -->
            <div class="flex justify-end mb-5">
                <a href="{% url 'account_reset_password' %}" class="text-xs font-medium hover:underline" style="color: var(--primary);">
                    Forgot your password?
                </a>
            </div>

            <button type="submit" class="btn-brand">
                Log in
            </button>
        </form>
        {% endif %}
    </div>

    <!-- Footer link -->
    <p class="text-center text-sm mt-6" style="color: var(--text-secondary);">
        Don't have an account?
        <a href="{{ signup_url }}" class="font-semibold hover:underline" style="color: var(--primary);">Sign up</a>
    </p>
</div>
{% endblock %}