{% extends "layout.html" %}
{% set page_title = "Sign In to Your Orchid Account" %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6">
            <div class="card bg-dark text-light">
                <div class="card-header text-center">
                    <h2 class="h4 mb-0">
                        <i data-feather="log-in" class="me-2"></i>
                        Sign In to Your Account
                    </h2>
                    <small class="text-muted">Access your personal orchid dashboard</small>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email" 
                                   class="form-control bg-dark text-light border-secondary" 
                                   id="email" 
                                   name="email" 
                                   placeholder="your@email.com"
                                   required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" 
                                   class="form-control bg-dark text-light border-secondary" 
                                   id="password" 
                                   name="password" 
                                   placeholder="Your password"
                                   required>
                        </div>
                        
                        <div class="mb-3 form-check">
                            <input type="checkbox" 
                                   class="form-check-input" 
                                   id="remember" 
                                   name="remember">
                            <label class="form-check-label" for="remember">
                                Remember me on this device
                            </label>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i data-feather="log-in" class="me-2"></i>
                                Sign In
                            </button>
                        </div>
                    </form>
                    
                    <div class="text-center mt-4">
                        <p class="text-muted">
                            Don't have an account? 
                            <a href="{{ url_for('register') }}" class="text-primary">Create one here</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Benefits Sidebar -->
        <div class="col-lg-4">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="star" class="me-2"></i>
                        Your Account Benefits
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex mb-3">
                        <i data-feather="user" class="me-3 text-primary" style="min-width: 20px;"></i>
                        <div>
                            <strong>Personal Orchid ID</strong>
                            <p class="small text-muted mb-0">Track all your contributions with your unique OU-XXX123 identifier</p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <i data-feather="bar-chart" class="me-3 text-success" style="min-width: 20px;"></i>
                        <div>
                            <strong>Dashboard Analytics</strong>
                            <p class="small text-muted mb-0">View statistics, achievements, and analysis history</p>
                        </div>
                    </div>
                    
                    <div class="d-flex mb-3">
                        <i data-feather="upload-cloud" class="me-3 text-info" style="min-width: 20px;"></i>
                        <div>
                            <strong>Unlimited Analysis</strong>
                            <p class="small text-muted mb-0">Upload and analyze as many orchids as you want</p>
                        </div>
                    </div>
                    
                    <div class="d-flex">
                        <i data-feather="award" class="me-3 text-warning" style="min-width: 20px;"></i>
                        <div>
                            <strong>Achievement Badges</strong>
                            <p class="small text-muted mb-0">Earn recognition for your contributions to the community</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card bg-dark text-light mt-3">
                <div class="card-body text-center">
                    <h6><i data-feather="shield-check" class="me-2"></i>Secure & Private</h6>
                    <p class="small text-muted mb-0">
                        Your data is protected with industry-standard security. We never share your personal information.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}