<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _('Set Password') }} - {{ _('Client Portal') }}</title>
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/timetracker-logo.svg') }}">
    <link rel="alternate icon" href="{{ url_for('static', filename='images/timetracker-logo.svg') }}">
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/timetracker-logo.svg') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='dist/output.css') }}?v={{ app_version }}-toastfix1">
    <link rel="stylesheet" href="{{ url_for('static', filename='toast-notifications.css') }}?v={{ app_version }}-toastfix1">
    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
</head>
<body class="bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark">
    <div class="min-h-screen flex items-center justify-center px-4">
        <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-0 bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-xl shadow-lg overflow-hidden">
            <div class="hidden md:flex items-center justify-center p-10 bg-background-light dark:bg-background-dark">
                <div class="text-center">
                    <img src="{{ url_for('static', filename='images/timetracker-logo.svg') }}" alt="logo" class="w-24 h-24 mx-auto">
                    <h1 class="text-3xl font-bold mt-4 text-primary">TimeTracker</h1>
                    <p class="mt-2 text-text-muted-light dark:text-text-muted-dark">{{ _('Client Portal') }}</p>
                    <p class="mt-1 text-sm text-text-muted-light dark:text-text-muted-dark">{{ _('Set your password to get started') }}</p>
                </div>
            </div>
            <div class="p-8">
                <h2 class="text-2xl font-bold tracking-tight">{{ _('Set Your Password') }}</h2>
                <p class="mt-2 text-sm text-text-muted-light dark:text-text-muted-dark">
                    {{ _('Set a password for your client portal account') }}
                </p>
                {% if client %}
                <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                    <p class="text-sm text-blue-800 dark:text-blue-200">
                        <strong>{{ _('Client') }}:</strong> {{ client.name }}<br>
                        <strong>{{ _('Username') }}:</strong> {{ client.portal_username }}
                    </p>
                </div>
                {% endif %}
                <form class="mt-6" method="POST" action="{{ url_for('client_portal.set_password', token=token) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="token" value="{{ token }}">
                    
                    <label for="password" class="block mb-2 text-sm font-medium">{{ _('Password') }}</label>
                    <div class="relative">
                        <i class="fa-solid fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-text-muted-light dark:text-text-muted-dark"></i>
                        <input type="password" name="password" id="password" autocomplete="new-password" class="w-full pl-10 bg-background-light dark:bg-gray-700 border border-border-light dark:border-border-dark rounded-lg px-3 py-2 text-text-light dark:text-text-dark placeholder-text-muted-light dark:placeholder-text-muted-dark focus:outline-none focus:ring-2 focus:ring-primary" placeholder="{{ _('Enter your password') }}" required minlength="8">
                    </div>
                    <p class="mt-1 text-xs text-text-muted-light dark:text-text-muted-dark">{{ _('Password must be at least 8 characters long') }}</p>

                    <label for="password_confirm" class="block mb-2 text-sm font-medium mt-4">{{ _('Confirm Password') }}</label>
                    <div class="relative">
                        <i class="fa-solid fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-text-muted-light dark:text-text-muted-dark"></i>
                        <input type="password" name="password_confirm" id="password_confirm" autocomplete="new-password" class="w-full pl-10 bg-background-light dark:bg-gray-700 border border-border-light dark:border-border-dark rounded-lg px-3 py-2 text-text-light dark:text-text-dark placeholder-text-muted-light dark:placeholder-text-muted-dark focus:outline-none focus:ring-2 focus:ring-primary" placeholder="{{ _('Confirm your password') }}" required minlength="8">
                    </div>

                    <button type="submit" class="btn btn-primary w-full mt-6">{{ _('Set Password') }}</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Flash Messages (hidden; converted to toasts) -->
    <div id="flash-messages-container" class="hidden">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert {% if category == 'success' %}alert-success{% elif category == 'error' %}alert-danger{% elif category == 'warning' %}alert-warning{% else %}alert-info{% endif %}" data-toast-message="{{ message }}" data-toast-type="{{ category }}"></div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script>
    <script src="{{ url_for('static', filename='toast-notifications.js') }}?v={{ app_version }}-toastfix1"></script>
    <script src="{{ url_for('static', filename='error-handling-enhanced.js') }}"></script>
</body>
</html>

