{% extends "dashboard/base.html" %}

{% block title %}Settings - Command Center{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Settings</h1>
    <p class="page-description">Manage your account and preferences</p>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Profile Information</h2>
        <p class="card-description">Update your account details</p>
    </div>
    <div class="card-content">
        <form method="POST">
            <div class="grid grid-2" style="gap: 1rem;">
                <div class="form-group">
                    <label for="full_name" class="form-label">Full Name</label>
                    <input type="text" id="full_name" name="full_name" class="form-input" 
                           value="{{ user.full_name or '' }}">
                </div>
                <div class="form-group">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" id="email" name="email" class="form-input" 
                           value="{{ user.email }}" disabled>
                </div>
                <div class="form-group">
                    <label for="company" class="form-label">Company</label>
                    <input type="text" id="company" name="company" class="form-input" 
                           value="{{ user.company or '' }}">
                </div>
                <div class="form-group">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="tel" id="phone" name="phone" class="form-input" 
                           value="{{ user.phone or '' }}">
                </div>
            </div>
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<div class="card mt-6">
    <div class="card-header">
        <h2 class="card-title">Change Password</h2>
        <p class="card-description">Update your password</p>
    </div>
    <div class="card-content">
        <form method="POST">
            <div class="grid grid-3" style="gap: 1rem; max-width: 600px;">
                <div class="form-group">
                    <label for="current_password" class="form-label">Current Password</label>
                    <input type="password" id="current_password" name="current_password" class="form-input">
                </div>
                <div class="form-group">
                    <label for="new_password" class="form-label">New Password</label>
                    <input type="password" id="new_password" name="new_password" class="form-input">
                </div>
                <div class="form-group">
                    <label for="confirm_password" class="form-label">Confirm</label>
                    <input type="password" id="confirm_password" name="confirm_password" class="form-input">
                </div>
            </div>
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">Update Password</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}