{% extends "base.html" %}

{% block title %}{{ 'login'|t }} - NetEvents{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-box">
        <h2>{{ 'login'|t }}</h2>

        <div class="user-type-tabs">
            <button type="button" class="tab-btn" data-type="breakout_organizer">{{ 'presenter'|t }}</button>
            <button type="button" class="tab-btn" data-type="staff">{{ 'staff'|t }}</button>
            <button type="button" class="tab-btn" data-type="attendee">{{ 'visitor'|t }}</button>
            <button type="button" class="tab-btn" data-type="organizer">{{ 'organizer'|t }}</button>
        </div>

        <form method="POST" action="{{ url_for('login') }}">
            <input type="hidden" name="user_type" id="user_type" value="attendee">

            <div class="form-group">
                <label for="email">{{ 'email'|t }}</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group">
                <label for="password">{{ 'password'|t }}</label>
                <input type="password" id="password" name="password" required>
            </div>

            <button type="submit" class="btn btn-primary btn-block">{{ 'login'|t }}</button>
        </form>

        <p class="auth-footer">
            {{ 'dont_have_account'|t }}
            <a href="{{ url_for('register_organizer') }}">{{ 'register_as_organizer'|t }}</a>
        </p>
    </div>
</div>

<script>
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        document.getElementById('user_type').value = this.dataset.type;
    });
});

// Pre-select tab based on passed default_type
const params = new URLSearchParams(window.location.search);
const type = params.get('type');
if (type) {
    const btn = document.querySelector(`.tab-btn[data-type="${type}"]`);
    if (btn) {
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        document.getElementById('user_type').value = type;
    }
}
</script>
{% endblock %}