{% extends "auth/base.html" %}

{% block title %}Dummy Login (Dev) - {{ site_name() }}{% endblock %}

{% block head %}
<style nonce="{{ csp_nonce() }}">
    .login-container {
        max-width: 400px;
        margin: 2rem auto;
    }

    .warning-banner {
        background: #fef3c7;
        border: 1px solid #f59e0b;
        color: #92400e;
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
        font-weight: 600;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .form-group input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--sk-color-border, #ccc);
        border-radius: 0.5rem;
        font-size: 1rem;
    }

    .form-group small {
        display: block;
        margin-top: 0.25rem;
        color: var(--sk-color-muted, #666);
    }

    .admin-toggle label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
    }

    .admin-toggle input[type="checkbox"] {
        width: auto;
        margin: 0;
    }

    .submit-btn {
        width: 100%;
        padding: 1rem;
        background: #6b7280;
        color: white;
        border: none;
        border-radius: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        margin-top: 1rem;
    }

    .submit-btn:hover {
        background: #4b5563;
    }

    .back-link {
        display: block;
        text-align: center;
        margin-top: 1.5rem;
        color: var(--sk-color-muted, #666);
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <article>
        <header>
            <h1>Dummy Login</h1>
        </header>

        <div class="warning-banner">
            DEVELOPMENT ONLY - Not for production use
        </div>

        <form method="post" action="/auth/dummy-login">
            {{ csrf_field() }}
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required placeholder="test@example.com">
            </div>

            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="Test User">
                <small>Optional. Defaults to email username if not provided.</small>
            </div>

            <div class="form-group admin-toggle">
                <label for="is_admin">
                    <input type="checkbox" id="is_admin" name="is_admin" value="1">
                    Make this account an admin
                </label>
                <small>Grants the admin role on login. Unchecking removes it.</small>
            </div>

            <button type="submit" class="submit-btn">Login</button>
        </form>

        <a href="/auth/login" class="back-link">&larr; Back to login options</a>
    </article>
</div>
{% endblock %}