<!DOCTYPE html>
{% block lang %}
    <html lang="{{ lang }}">
{% endblock %}
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token }}">
        <link rel="icon" type="image/x-icon" href="{{ icon_image }}">
        <meta property="og:image" content="{{ og_image }}">

        <title>{% if admin_login_title %}{{ admin_login_title }}{% endif %} — {{ site_title | default(value="Administration") }}</title>
        {% block extra_css %}
            <link rel="stylesheet" href="{{ "css/admin/variables.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/layout.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/components.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/buttons.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/forms.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/responsive.css" | runique_static }}">
            <link rel="stylesheet" href="{{ "css/admin/login.css" | runique_static }}">
        {% endblock %}
    </head>

    <body>
        <div class="login-wrapper">
            <div class="login-card">
                <div class="login-header">
                    <div class="login-logo">R</div>
                    <h1 class="login-title">{{ site_title | default(value="Runique Admin") }}</h1>
                    <p class="login-subtitle">{% if admin_login_subtitle %}{{ admin_login_subtitle }}{% endif %}</p>
                </div>
                {% if error %}
                <div class="alert alert-danger">
                    {{ error }}
                </div>
                {% endif %}
                <form class="login-form" method="POST" action="{{ admin_prefix }}/login">
                    {% csrf %}
                    <div class="form-group">
                        <label class="form-label" for="username">{% if admin_login_label_username %}{{ admin_login_label_username }}{% endif %}</label>
                        <input
                            class="form-input {% if errors.username %}error{% endif %}"
                            type="text"
                            id="username"
                            name="username"
                            value="{{ form.username | default(value='') }}"
                            autocomplete="username"
                            autofocus
                        >
                        {% if errors.username %}
                        <span class="form-error">{{ errors.username }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="password">{% if admin_login_label_password %}{{ admin_login_label_password }}{% endif %}</label>
                        <input
                            class="form-input {% if errors.password %}error{% endif %}"
                            type="password"
                            id="password"
                            name="password"
                            autocomplete="current-password"
                        >
                        {% if errors.password %}
                        <span class="form-error">{{ errors.password }}</span>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-primary login-btn">
                        {% if admin_login_btn_submit %}{{ admin_login_btn_submit }}{% endif %}
                    </button>
                </form>
            </div>
        </div>
    </body>
</html>