{% extends "business/auth/auth_base.html" %}

{% block title %}Profile Settings - Inventory Management System{% endblock %}

{% block auth_title %}Profile Settings{% endblock %}

{% block auth_subtitle %}Manage your account information{% endblock %}

{% block auth_content %}
<form method="POST" action="{% url 'profile_settings' %}" novalidate>
    {% csrf_token %}
    
    <!-- Personal Information -->
    <h5 class="mb-3 text-muted">Personal Information</h5>
    
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="first_name" class="form-label">First Name *</label>
            <input type="text" 
                   class="form-control" 
                   id="first_name" 
                   name="first_name" 
                   value="{{ user.first_name }}"
                   required>
        </div>
        
        <div class="col-md-6 mb-3">
            <label for="last_name" class="form-label">Last Name *</label>
            <input type="text" 
                   class="form-control" 
                   id="last_name" 
                   name="last_name" 
                   value="{{ user.last_name }}"
                   required>
        </div>
    </div>
    
    <div class="mb-3">
        <label for="email" class="form-label">Email Address *</label>
        <input type="email" 
               class="form-control" 
               id="email" 
               name="email" 
               value="{{ user.email }}"
               required>
    </div>
    
    <hr class="my-4">
    
    <!-- Change Password -->
    <h5 class="mb-3 text-muted">Change Password</h5>
    
    <div class="mb-3">
        <label for="current_password" class="form-label">Current Password</label>
        <div class="input-group">
            <input type="password" 
                   class="form-control" 
                   id="current_password" 
                   name="current_password"
                   placeholder="Enter current password"
                   autocomplete="current-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
    </div>
    
    <div class="mb-3">
        <label for="new_password" class="form-label">New Password</label>
        <div class="input-group">
            <input type="password" 
                   class="form-control" 
                   id="new_password" 
                   name="new_password"
                   placeholder="Enter new password"
                   minlength="8"
                   autocomplete="new-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
        <div class="form-text small">
            At least 8 characters with letters and numbers.
        </div>
    </div>
    
    <div class="mb-4">
        <label for="confirm_password" class="form-label">Confirm New Password</label>
        <div class="input-group">
            <input type="password" 
                   class="form-control" 
                   id="confirm_password" 
                   name="confirm_password"
                   placeholder="Confirm new password"
                   autocomplete="new-password">
            <button class="btn btn-outline-secondary toggle-password" type="button">
                <i class="fas fa-eye"></i>
            </button>
        </div>
    </div>
    
    <!-- Submit Buttons -->
    <div class="d-grid gap-2">
        <button type="submit" class="btn btn-primary-auth btn-auth">
            <i class="fas fa-save me-2"></i>
            Save Changes
        </button>
        
        <a href="{% url 'dashboard' %}" class="btn btn-outline-secondary btn-auth">
            <i class="fas fa-times me-2"></i>
            Cancel
        </a>
    </div>
</form>
{% endblock %}

{% block auth_footer %}
<p class="mb-0">
    Need help? 
    <a href="{% url 'contact' %}" class="fw-semibold">Contact support</a>
</p>
{% endblock %}