{% extends "layouts/auth.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Login - {{ login_brand_name }}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/login.css">
{% endblock %}
{% block auth_content %}
{{ ui.page_header(login_brand_name, 'Choose the sign-in area that matches your role and step into a brighter, more polished workspace.') }}

<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

{% if error %}
    {{ ui.alert(error, 'error', 'Login error') }}
{% endif %}

<div class="login-grid">
    {% call ui.card('Admin Portal', 'Use this panel for management, analytics, product control, reports, and system setup.', 'login-card') %}
        <p class="login-kicker">Admin Sign In</p>
        {{ ui.alert('New admin? Register your shop account here.', 'info') }}
        <p><a href="/register">Register Shop + Admin</a></p>

        <form method="POST" action="/login">
            <input type="hidden" name="expected_role" value="admin">
            {{ ui.form_field('admin-shop-code', 'Shop Code', placeholder='Shop code', required=True) }}
            {{ ui.form_field('admin-username', 'Username', placeholder='Admin username', required=True) }}
            {{ ui.form_field('admin-password', 'Password', input_type='password', placeholder='Admin password', required=True) }}
            {{ ui.checkbox('remember_me', 'Remember this device') }}
            <div class="hil-form-actions">
                {{ ui.button('Enter Admin', kind='primary', button_type='submit') }}
            </div>
        </form>

        <p><a href="/forgot-password">Forgot password?</a></p>

        <h3>Server Access</h3>
        <p class="login-kicker">Developer-only entry for server administration.</p>
        <form method="POST" action="/developer-key-login">
            {{ ui.form_field('server_key', 'Developer Key', input_type='password', placeholder='Enter server key', required=True) }}
            <div class="hil-form-actions">
                {{ ui.button('Enter Server Admin', kind='secondary', button_type='submit') }}
            </div>
        </form>
    {% endcall %}

    {% call ui.card('Cashier Portal', 'Use this panel for daily checkout, scanning, customer service, and fast POS sales work.', 'login-card') %}
        <p class="login-kicker">Cashier Sign In</p>
        {{ ui.alert('Shop owners: Add cashiers to your shop from the admin dashboard.', 'info') }}
        <form method="POST" action="/login">
            <input type="hidden" name="expected_role" value="cashier">
            {{ ui.form_field('cashier-shop-code', 'Shop Code', placeholder='Shop code', required=True) }}
            {{ ui.form_field('cashier-username', 'Username', placeholder='Cashier username', required=True) }}
            {{ ui.form_field('cashier-password', 'Password', input_type='password', placeholder='Cashier password', required=True) }}
            {{ ui.checkbox('remember_me', 'Remember this device') }}
            <div class="hil-form-actions">
                {{ ui.button('Enter Cashier', kind='primary', button_type='submit') }}
            </div>
        </form>

        <p><a href="/forgot-password">Forgot password?</a></p>
    {% endcall %}
</div>

{{ ui.empty_state(
    'Need a fresh account?',
    'Register here to create an enterprise account and connect it to your shop.',
    'Register',
    '/register'
) }}

<p><a href="/terms">Terms and Conditions</a></p>
{% endblock %}