<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title|default("Annotation Platform") }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    {% if oauth_providers %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/oauth.css') }}">
    {% endif %}
</head>
<body class="potato-page-center">
    <div style="width: 100%; max-width: 420px;">
        <div style="text-align: center; margin-bottom: 2rem;">
            <h1 class="potato-page-title">{{ title|default("Annotation Platform") }}</h1>
            <p class="potato-page-subtitle" style="margin-bottom: 0;">
                {% if oauth_providers and not allow_local_login %}
                    Sign in to continue
                {% elif require_password %}
                    Sign in to continue
                {% else %}
                    Enter your username to continue
                {% endif %}
            </p>
        </div>

        <div class="potato-page-card">
            {% if login_error %}
            <div class="potato-alert potato-alert-error">
                <i class="fas fa-exclamation-circle me-1"></i> {{ login_error }}
            </div>
            {% endif %}

            {% if oauth_providers %}
            <!-- SSO Login Buttons -->
            <div class="oauth-providers">
                {% for provider in oauth_providers %}
                <a href="{{ provider.login_url }}" class="oauth-login-btn {{ provider.button_class }}">
                    <i class="{{ provider.icon_class }}"></i>
                    <span>Sign in with {{ provider.display_name }}</span>
                </a>
                {% endfor %}
            </div>

            {% if allow_local_login or require_password %}
            <div class="oauth-divider">
                <span>or</span>
            </div>
            {% endif %}
            {% endif %}

            {% if not oauth_providers or allow_local_login or require_password %}
            {% if require_password %}
            <div class="potato-tabs">
                <button class="potato-tab active" id="login-tab" onclick="switchTab('login')">Sign In</button>
                <button class="potato-tab" id="register-tab" onclick="switchTab('register')">Register</button>
            </div>
            {% endif %}

            <!-- Login Tab Content -->
            <div class="tab-content active" id="login-content">
                <form method="POST" action="/auth">
                    <input type="hidden" name="action" value="login">
                    <div class="potato-form-group">
                        <label for="login-email" class="potato-form-label">Username</label>
                        <input id="login-email" name="email" type="text" class="potato-form-input"
                               placeholder="Enter your username" value="{{ login_email|default('') }}" required>
                    </div>

                    {% if require_password %}
                    <div class="potato-form-group">
                        <label for="login-pass" class="potato-form-label">Password</label>
                        <input id="login-pass" name="pass" type="password" class="potato-form-input" required>
                    </div>
                    {% endif %}

                    <button type="submit" class="potato-form-submit">
                        {% if require_password %}Sign In{% else %}Continue{% endif %}
                    </button>

                    {% if require_password %}
                    <div style="text-align: center; margin-top: 0.75rem;">
                        <a href="/forgot-password" style="color: #6c757d; font-size: 0.875rem; text-decoration: none;">Forgot Password?</a>
                    </div>
                    {% endif %}
                </form>
            </div>

            {% if require_password %}
            <!-- Register Tab Content -->
            <div class="tab-content" id="register-content">
                <form method="POST" action="/register">
                    <input type="hidden" name="action" value="signup">
                    <div class="potato-form-group">
                        <label for="register-email" class="potato-form-label">Username</label>
                        <input id="register-email" name="email" type="text" class="potato-form-input"
                               placeholder="Choose a username" required>
                    </div>
                    <div class="potato-form-group">
                        <label for="register-pass" class="potato-form-label">Password</label>
                        <input id="register-pass" name="pass" type="password" class="potato-form-input"
                               placeholder="Create a password" required>
                    </div>
                    <button type="submit" class="potato-form-submit">Register</button>
                </form>
            </div>
            {% endif %}
            {% endif %}
        </div>

        <footer class="potato-footer" style="position: fixed; bottom: 0; width: 100%; left: 0;">
            Powered by <a href="https://potatoannotator.com/" target="_blank" rel="noopener noreferrer">Potato</a>
            <span class="footer-sep">&middot;</span>
            <a href="https://github.com/davidjurgens/potato" target="_blank" rel="noopener noreferrer">GitHub</a>
        </footer>
    </div>

    <script>
        function switchTab(tabName) {
            document.querySelectorAll('.potato-tab').forEach(function(tab) { tab.classList.remove('active'); });
            document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); });
            document.getElementById(tabName + '-tab').classList.add('active');
            document.getElementById(tabName + '-content').classList.add('active');
        }

        document.addEventListener('DOMContentLoaded', function() {
            var errorElement = document.querySelector('.potato-alert-error');
            if (errorElement && errorElement.textContent.includes('registration')) {
                switchTab('register');
            }
        });
    </script>
    <style>
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: potato-fade-in 0.2s ease-out; }
    </style>
</body>
</html>
