{% extends "base.html" %}

{% block title %}Sign In - Hop3{% endblock %}

{% block content %}
<div class="sm:mx-auto sm:w-full sm:max-w-md">
    <div class="flex justify-center">
        <div class="h-12 w-12 rounded-full bg-blue-600 flex items-center justify-center">
            <span class="text-white font-bold text-2xl">H</span>
        </div>
    </div>
    <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
        Sign in to your account
    </h2>
</div>

<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
        {% if error %}
        <div class="mb-4 rounded-md bg-red-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">
                        {{ error }}
                    </h3>
                </div>
            </div>
        </div>
        {% endif %}

        {# Plain HTTP outside debug mode: the Secure session cookie would be
           discarded by the browser and the login would loop with no error.
           Say so before a password is typed, and disable the form. #}
        {% if insecure_transport %}
        <div class="mb-4 rounded-md bg-amber-50 p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-amber-800">
                        This connection is not secure
                    </h3>
                    <div class="mt-2 text-sm text-amber-700">
                        <p>
                            Signing in over plain HTTP cannot work: the session cookie is
                            marked <code class="font-mono">Secure</code>, so your browser
                            discards it and the login silently loops.
                        </p>
                        <p class="mt-2">
                            Reach this server over HTTPS — give it an admin domain with a
                            certificate — or set
                            <code class="font-mono">HOP3_DEBUG=true</code> for local
                            development.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <form class="space-y-6" action="/auth/login" method="POST">
            <div>
                <label for="username" class="block text-sm font-medium leading-6 text-gray-900">
                    Username
                </label>
                <div class="mt-2">
                    <input id="username"
                           name="username"
                           type="text"
                           autocomplete="username"
                           required
                           class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
                           value="{{ username or '' }}">
                </div>
            </div>

            <div>
                <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
                    Password
                </label>
                <div class="mt-2">
                    <input id="password"
                           name="password"
                           type="password"
                           autocomplete="current-password"
                           required
                           class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6">
                </div>
            </div>

            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <input id="remember-me"
                           name="remember-me"
                           type="checkbox"
                           class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                        Remember me
                    </label>
                </div>
            </div>

            <div>
                <button type="submit"
                        class="flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
                    Sign in
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}