{% extends "base.html" %}

{% block title %}Edit Profile - {{ app_name }}{% endblock %}

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb py-2 mb-0">
            <li class="breadcrumb-item">
                <a href="{{ url_for('dashboard') }}">
                    <i class="bi bi-house me-1"></i>Dashboard
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ url_for('auth.profile') }}">
                    <i class="bi bi-person me-1"></i>Profile
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <i class="bi bi-pencil me-1"></i>Edit Profile
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-pencil-square me-2"></i>Edit Profile
                </h5>
            </div>
            <div class="card-body">
                <!-- Profile Form -->
                <form method="POST" novalidate>
                    <div class="row g-3">
                        <!-- First Name -->
                        <div class="col-12 col-sm-6">
                            <label for="first_name" class="form-label">
                                <i class="bi bi-person me-1"></i>First Name
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="first_name" 
                                   name="first_name" 
                                   value="{{ user.first_name or '' }}"
                                   placeholder="Enter first name"
                                   autocomplete="given-name">
                        </div>
                        
                        <!-- Last Name -->
                        <div class="col-12 col-sm-6">
                            <label for="last_name" class="form-label">
                                <i class="bi bi-person me-1"></i>Last Name
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="last_name" 
                                   name="last_name" 
                                   value="{{ user.last_name or '' }}"
                                   placeholder="Enter last name"
                                   autocomplete="family-name">
                        </div>
                        
                        <!-- Email (Required) -->
                        <div class="col-12">
                            <label for="email" class="form-label">
                                <i class="bi bi-envelope me-1"></i>Email <span class="text-danger">*</span>
                            </label>
                            <input type="email" 
                                   class="form-control" 
                                   id="email" 
                                   name="email" 
                                   value="{{ user.email }}"
                                   placeholder="Enter email address"
                                   required
                                   autocomplete="email">
                            <div class="form-text">
                                <i class="bi bi-info-circle me-1"></i>
                                This will be used for login and notifications.
                            </div>
                        </div>
                        
                        <!-- Read-only fields for reference -->
                        <div class="col-12">
                            <hr class="my-3">
                            <h6 class="text-muted mb-3">Account Information</h6>
                        </div>
                        
                        <div class="col-12 col-sm-6">
                            <label class="form-label text-muted">Username</label>
                            <div class="form-control-plaintext">{{ user.username }}</div>
                            <div class="form-text">Username cannot be changed.</div>
                        </div>
                        
                        <div class="col-12 col-sm-6">
                            <label class="form-label text-muted">Account Status</label>
                            <div class="form-control-plaintext">
                                {% if user.is_active %}
                                    <span class="badge bg-success">Active</span>
                                {% else %}
                                    <span class="badge bg-danger">Inactive</span>
                                {% endif %}
                                {% if user.is_admin %}
                                    <span class="badge bg-warning text-dark ms-1">Administrator</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex gap-2 mt-4 flex-wrap">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Save Changes
                        </button>
                        <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-lg me-1"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Auto-focus first name field on page load
    document.addEventListener('DOMContentLoaded', function() {
        const firstNameField = document.getElementById('first_name');
        if (firstNameField) {
            setTimeout(() => firstNameField.focus(), 100);
        }
    });
</script>
{% endblock %}