{% extends "base.html" %}

{% block title %}Sign In / Sign Up - Eventology{% endblock %}

{% block auth_content %}
<div class="card" style="width: 100%; max-width: 450px; padding: 2.5rem; background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(16px); border-radius: var(--radius-lg);">
    
    <div style="text-align: center; margin-bottom: 2rem;">
        <h1 style="font-size: 2rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Eventology</h1>
        <p style="font-size: 0.95rem; margin-top: 0.25rem;">Event RSVP calling & management</p>
    </div>

    <!-- Switcher Tabs -->
    <div class="tabs" data-tabs style="margin-bottom: 2rem; border-bottom: 1px solid var(--border-color);">
        <div class="tab active" data-tab="login" style="flex: 1; text-align: center;">Sign In</div>
        <div class="tab" data-tab="register" style="flex: 1; text-align: center;">Register</div>
    </div>

    <!-- Login Panel -->
    <div data-tab-content="login">
        <form action="{{ url_for('auth.login') }}" method="POST">
            <div class="form-group">
                <label for="login-username">Username</label>
                <input type="text" id="login-username" name="username" class="form-control" placeholder="Enter your username" required autofocus>
            </div>
            
            <div class="form-group" style="margin-bottom: 1.75rem;">
                <label for="login-password">Password</label>
                <input type="password" id="login-password" name="password" class="form-control" placeholder="••••••••" required>
            </div>
            
            <button type="submit" class="btn btn-primary" style="width: 100%;">
                <span>Access Dashboard</span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </button>
        </form>
    </div>

    <!-- Registration Panel -->
    <div data-tab-content="register" style="display: none;">
        <form action="{{ url_for('auth.register') }}" method="POST">
            <div class="form-group">
                <label for="reg-username">Choose Username</label>
                <input type="text" id="reg-username" name="username" class="form-control" placeholder="e.g. janesmith" required>
            </div>
            
            <div class="form-group">
                <label for="reg-password">Password</label>
                <input type="password" id="reg-password" name="password" class="form-control" placeholder="••••••••" required>
            </div>
            
            <div class="form-group">
                <label for="reg-role">Account Type</label>
                <select id="reg-role" name="role" class="form-control" style="background-color: var(--bg-secondary); cursor: pointer;">
                    <option value="caller">Caller (Collect RSVP info)</option>
                    <option value="emc">Event Management Company (EMC)</option>
                </select>
            </div>
            
            <!-- Dynamic EMC Company Name Field -->
            <div class="form-group" id="company-name-group" style="display: none;">
                <label for="reg-company">Company/Agency Name</label>
                <input type="text" id="reg-company" name="company_name" class="form-control" placeholder="e.g. Apex Events Ltd.">
            </div>
            
            <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 1rem;">
                <span>Create Account</span>
            </button>
        </form>
    </div>

    <!-- Default logins helper block -->
    <div style="margin-top: 2rem; padding: 1rem; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); border: 1px dashed var(--border-color); font-size: 0.85rem; color: var(--text-secondary);">
        <strong style="color: var(--text-primary); display: block; margin-bottom: 0.25rem;">Demo Credentials</strong>
        Admin login: <code style="color: var(--accent-primary);">admin</code> / <code style="color: var(--accent-primary);">adminpassword</code>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
    // Handle dynamic display of the company name field based on role dropdown
    const roleSelect = document.getElementById('reg-role');
    const companyGroup = document.getElementById('company-name-group');
    const companyInput = document.getElementById('reg-company');

    if (roleSelect && companyGroup) {
        roleSelect.addEventListener('change', (e) => {
            if (e.target.value === 'emc') {
                companyGroup.style.display = 'flex';
                companyInput.required = true;
            } else {
                companyGroup.style.display = 'none';
                companyInput.required = false;
                companyInput.value = '';
            }
        });
    }
</script>
{% endblock %}