{% extends "base/skeleton.html.jinja" %}

{% block title %}
    {{ _("Sign In") }}
{% endblock title %}
{% block body %}
    <div class="min-h-screen bg-linear-to-br from-primary to-secondary flex items-center justify-center p-4">
        <div class="card w-full max-w-md bg-base-100 shadow-2xl backdrop-blur-sm bg-opacity-95">
            <div class="card-body">
                <!-- Header -->
                <div class="text-center mb-8">
                    <h1 class="text-3xl font-bold text-base-content mb-2">{{ _("Welcome Back") }}</h1>
                    <p class="text-base-content/70">{{ _("Choose your preferred sign-in method") }}</p>
                </div>
                <!-- OAuth Providers -->
                {% if has_oauth %}
                    <div class="space-y-3 mb-6">
                        {% for provider in providers %}
                            {% set login_url = url_for('login_with_' + provider) %}
                            {% if next %}
                                {% set login_url = login_url ~ '?next=' ~ next %}
                            {% endif %}
                            <a href="{{ login_url }}"
                               class="btn btn-outline btn-block justify-start gap-3 hover:btn-primary group transition-all duration-300 hover:scale-[1.02]">
                                <span>{{ _("Continue with %(provider)s") | format(provider=provider.title()) }}</span>
                            </a>
                        {% endfor %}
                        {% for app in db_apps %}
                            {% set login_url = url_for('login_with_' + app.provider) ~ '?app_id=' ~ app.id %}
                            {% if next %}
                                {% set login_url = login_url ~ '&next=' ~ next %}
                            {% endif %}
                            <a href="{{ login_url }}"
                               class="btn btn-outline btn-block justify-start gap-3 hover:btn-primary group transition-all duration-300 hover:scale-[1.02]">
                                <span>{{ _("Continue with %(provider)s") | format(provider=app.provider.title()) }} · {{ app.name }}</span>
                            </a>
                        {% endfor %}
                    </div>
                {% endif %}
                <!-- Divider -->
                {% if has_oauth and has_email %}<div class="divider text-base-content/50">{{ _("OR") }}</div>{% endif %}
                <!-- Email Magic Link -->
                {% if has_email %}
                    <div class="bg-base-200/50 rounded-2xl p-6 border border-base-300/50">
                        <form method="post"
                              class="space-y-4"
                              action="{{ url_for('send_magic_link') }}">
                            {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
                            <div class="form-control">
                                <label class="label" for="email">
                                    <span class="label-text font-medium">{{ _("Email Address") }}</span>
                                </label>
                                <div class="relative">
                                    <input type="email"
                                           id="email"
                                           name="email"
                                           class="input input-bordered w-full pr-12 focus:input-primary transition-all duration-300"
                                           placeholder="{{ _('Enter your email address') }}"
                                           required
                                           autocomplete="email" />
                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg class="w-5 h-5 text-base-content/40"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            <button type="submit"
                                    class="btn btn-primary btn-block gap-2 group hover:scale-[1.02] transition-all duration-300">
                                <svg class="w-5 h-5 group-hover:rotate-12 transition-transform"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                                <span>{{ _("Send Magic Link") }}</span>
                            </button>
                            <div class="alert alert-info bg-info/10 border-info/20">
                                <svg class="w-5 h-5 text-info shrink-0"
                                     fill="none"
                                     stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <div class="text-sm">
                                    <p class="font-medium text-info">{{ _("No password required!") }}</p>
                                    <p class="text-info/80">{{ _("We'll send you a secure link to sign in instantly.") }}</p>
                                </div>
                            </div>
                        </form>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock body %}