{% extends team.id+'/base.html' %}

{% block title %}Login{% endblock %}
{% block description %}Log in to your account to access the members area, exclusive benefits, and club services.{% endblock %}

{% block content %}
<div class="container d-flex justify-content-center">
    <div class="rounded-4 border-bottom border-warning border-5 shadow-lg p-5 mx-auto text-center" style="max-width: 400px;">
        <div class="mb-4">
            <i class="bi bi-person-circle display-3"></i>
            <h2 class="fw-bold mt-2">MEMBER ACCESS</h2>
        </div>
        <form id="loginForm">
            <div class="mb-3 text-start">
                <label class="form-label small text-uppercase">Email</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-person"></i></span>
                    <input type="text" id="username" class="form-control border-start-0" placeholder="Ex: Goku_HT" required>
                </div>
            </div>
            <div class="mb-4 text-start">
                <label class="form-label small text-uppercase">Password</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="bi bi-lock"></i></span>
                    <input type="password" class="form-control border-start-0" placeholder="">
                </div>
            </div>

            <button type="submit" class="btn btn-warning w-100 fw-bold py-2 mb-3 shadow-sm">
                LOG IN
            </button>
            <div class="d-flex justify-content-between small">
                <a href="#" class="text-decoration-none text-muted">Forgot your password?</a>
                <a href="{{url_for('team.join_us', team_id=team.id)}}" class="fw-bold text-decoration-none" style="color: #ff8800;">New registration</a>
            </div>
        </form>
        <hr class="my-4">
        <a href="{{url_for('team.index', team_id=team.id)}}" class="text-muted small text-decoration-none"><i class="bi bi-arrow-left"></i> Back to website</a>
    </div>
</div>{% endblock %}