{% extends 'layout.twig' %}

{% block title %}Sign in — IRDB{% endblock %}

{% block guest_content %}
<div class="flex min-h-screen flex-col items-center justify-center bg-slate-50 px-4 py-12 dark:bg-slate-950">
    <div class="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div class="mb-6 text-center">
            <img src="/assets/logo.svg" alt="IRDB" class="mx-auto h-24 w-24" />
            <h1 class="mt-4 font-mono text-2xl font-bold tracking-tight">IRDB</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">IP Reputation Database</p>
            <p class="mt-3 text-sm text-slate-500 dark:text-slate-400">Sign in to continue</p>
        </div>

        {% if oidc_enabled %}
            <a href="/login/oidc"
               class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
                Sign in with Microsoft
            </a>
        {% endif %}

        {% if local_admin_enabled %}
            <div class="mt-6" x-data="loginForm" data-initial-open="{{ oidc_enabled ? '0' : '1' }}">
                {% if oidc_enabled %}
                    <div class="relative my-4 text-center">
                        <span class="bg-white px-2 text-xs uppercase tracking-wider text-slate-400 dark:bg-slate-900">or</span>
                        <div class="absolute inset-x-0 top-1/2 -z-10 h-px bg-slate-200 dark:bg-slate-800"></div>
                    </div>
                    <button type="button"
                            x-on:click="flip()"
                            class="text-sm text-slate-500 underline hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200">
                        <span x-text="toggleLabel"></span>
                    </button>
                {% endif %}
                <form x-show="open"
                      x-cloak
                      method="post"
                      action="/login/local"
                      class="mt-4 space-y-3">
                    {% include 'partials/csrf.twig' %}
                    <div>
                        <label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-300">Username</label>
                        <input type="text" name="username" id="username" x-ref="usernameInput" required autocomplete="username"
                               {% if not oidc_enabled %}autofocus{% endif %}
                               class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-950">
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300">Password</label>
                        <input type="password" name="password" id="password" required autocomplete="current-password"
                               class="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-slate-700 dark:bg-slate-950">
                    </div>
                    <button type="submit"
                            class="flex w-full items-center justify-center rounded-md bg-slate-800 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:bg-slate-700 dark:hover:bg-slate-600">
                        Sign in
                    </button>
                </form>
            </div>
        {% endif %}

        {% if not oidc_enabled and not local_admin_enabled %}
            <p class="text-sm text-red-600 dark:text-red-400">No sign-in method is enabled. Set <code>OIDC_ENABLED=true</code> or <code>LOCAL_ADMIN_ENABLED=true</code> in the configuration.</p>
        {% endif %}
    </div>

    <div class="mt-6 w-full max-w-md rounded-2xl border border-slate-200 bg-white px-6 py-5 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <p class="text-xs font-semibold uppercase tracking-wider text-emerald-600 dark:text-emerald-400">New here?</p>
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
            IRDB collects abuse reports from your servers and hands every firewall a tailored block list.
        </p>
        <a href="/about" class="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
            Learn what IRDB is
            <span aria-hidden="true">&rarr;</span>
        </a>
    </div>
</div>
{% endblock %}