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

{% block title %}Sign Out - Redea Social{% endblock %}

{% block auth_content %}
<div class="w-full max-w-md px-4">
    <div class="text-center mb-8">
        <div class="inline-flex items-center justify-center w-12 h-12 rounded-2xl mb-4" style="background: var(--neutral-100);">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--neutral-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>
        </div>
        <h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary);">
            Sign out
        </h1>
        <p class="text-sm mt-1" style="color: var(--text-secondary);">
            Are you sure you want to sign out?
        </p>
    </div>

    <div class="auth-card">
        <form method="post" action="{% url 'account_logout' %}">
            {% csrf_token %}
            <div class="flex gap-3">
                <a href="/" class="btn-outline flex-1">Cancel</a>
                <button type="submit" class="btn-brand flex-1">Sign Out</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}