{% extends "layout.html" %}

{% block title %}Sign In - Trade Signals{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container">
            <div class="auth-card">
                <div class="auth-header">
                    <div class="auth-icon">
                        <i data-lucide="zap"></i>
                    </div>
                    <h1>Welcome back</h1>
                    <p class="auth-subtitle">Sign in to continue to your dashboard</p>
                </div>
                
                <form method="POST" action="{{ url_for('auth.login') }}" class="auth-form">
                    <div class="form-group">
                        <label for="identifier">
                            <i data-lucide="user" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Mobile or Email
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="mail" class="input-icon"></i>
                            <input 
                                type="text" 
                                id="identifier" 
                                name="identifier" 
                                required
                                placeholder="mobile or email@example.com"
                                value="{{ request.form.identifier if request.form }}"
                                autofocus
                            >
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="label-row">
                            <label for="password">
                                <i data-lucide="lock" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                                Password
                            </label>
                            <a href="{{ url_for('auth.forgot_password') }}" class="forgot-password-link">Forgot?</a>
                        </div>
                        <div class="input-with-icon">
                            <i data-lucide="lock" class="input-icon"></i>
                            <input 
                                type="password" 
                                id="password" 
                                name="password" 
                                required
                                placeholder="Enter your password"
                            >
                            <button type="button" class="password-toggle" onclick="togglePassword('password')" aria-label="Toggle password visibility">
                                <i data-lucide="eye" id="password-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">
                            Sign in
                            <i data-lucide="arrow-right" style="width: 16px; height: 16px; margin-left: 6px;"></i>
                        </button>
                    </div>
                    
                    <div class="auth-footer">
                        <p>New here? <a href="{{ url_for('auth.register') }}">Create an account</a></p>
                    </div>

                    <div class="auth-trust">
                        <i data-lucide="shield-check" style="width: 14px; height: 14px;"></i>
                        <span>Secure & encrypted</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-eye');
    if (field.type === 'password') {
        field.type = 'text';
        lucide.createIcons();
    } else {
        field.type = 'password';
        lucide.createIcons();
    }
}
</script>
{% endblock %}
{% endblock %}