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

{% block title %}Sign up · 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);">
            Create your account
        </h1>
        <p class="text-sm mt-1" style="color: var(--text-secondary);">
            Sign up for Redea Social | Schedule posts and run approvals across 10+ platforms.
        </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 Signup -->
        {% 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>Continue 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_signup' as signup_action_url %}
        <form method="post" action="{{ signup_action_url }}">
            {% csrf_token %}
            {{ redirect_field }}

            {% for field in form %}
            <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>
                {% if field.field.widget.input_type == "password" %}
                <input type="password"
                       name="{{ field.html_name }}"
                       id="{{ field.id_for_label }}"
                       {% 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 %}">
                {% else %}
                <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 %}
                       {% if field.name == 'email' and invited_email_locked %}readonly{% endif %}
                       class="form-input-styled {% if field.errors %}is-error{% endif %}">
                {% endif %}
                {% if field.errors %}
                <p class="mt-1 text-xs" style="color: var(--error-700);">{{ field.errors.0 }}</p>
                {% endif %}
                {% if field.help_text %}
                <div class="mt-1 text-xs" style="color: var(--text-ghost);">{{ field.help_text }}</div>
                {% endif %}
            </div>
            {% endfor %}

            <div class="mt-6">
                <button type="submit" class="btn-brand">
                    Create Account
                </button>
            </div>
        </form>
        {% endif %}

        <p class="text-xs text-center mt-5" style="color: var(--text-tertiary); line-height: 1.5;">
            By signing up, you agree to our
            <a href="https://brightbean.xyz/terms-of-service/" class="underline hover:no-underline" style="color: var(--text-secondary);">Terms of Service</a>
            and
            <a href="https://brightbean.xyz/privacy-policy/" class="underline hover:no-underline" style="color: var(--text-secondary);">Privacy Policy</a>.
        </p>
    </div>

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

{% block extra_js %}
<script nonce="{{ request.csp_nonce }}">
    // Detect browser timezone so the server can set it as the organization default on signup.
    try {
        var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
        if (tz) {
            document.cookie = "browser_timezone=" + encodeURIComponent(tz) + ";path=/;SameSite=Lax;max-age=300";
        }
    } catch (e) {}
</script>
{% endblock %}