{% extends "base.html" %}

{% block title %}Admin Login — T & S Contractors Ltd{% endblock %}
{% block description %}Admin dashboard login.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <h1>Admin Login</h1>
        <p>Sign in to manage portfolio projects.</p>
    </div>
</section>

<section class="section">
    <div class="container" style="max-width: 480px;">
        <div class="card" style="padding: 2rem;">
            {% if error %}
            <div class="alert alert-danger" style="background: rgba(239,68,68,0.12); color: #f87171; padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem;">
                {{ error }}
            </div>
            {% endif %}
            <form method="post" action="/admin/login">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" required value="tumboandsonscontractorsltd@gmail.com">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="password-toggle-wrap">
                        <input type="password" id="password" name="password" required style="padding-right: 2.75rem;">
                        <button type="button" class="password-toggle" onclick="togglePassword()" aria-label="Show password">
                            <svg id="eyeClosed" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7c.78 0 1.53-.09 2.24-.26"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
                            <svg id="eyeOpen" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">Sign In</button>
            </form>
        </div>
    </div>
</section>

<script>
function togglePassword() {
    const input = document.getElementById('password');
    const eyeClosed = document.getElementById('eyeClosed');
    const eyeOpen = document.getElementById('eyeOpen');
    if (input.type === 'password') {
        input.type = 'text';
        eyeClosed.style.display = 'none';
        eyeOpen.style.display = 'block';
    } else {
        input.type = 'password';
        eyeClosed.style.display = 'block';
        eyeOpen.style.display = 'none';
    }
}
</script>
{% endblock %}