{% extends 'base.html' %}

{% block title %}Profile - KeepItGoing{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Profile Settings</h1>
</div>

{% if success %}
<div class="alert alert-success">{{ success }}</div>
{% endif %}

<div class="card">
    <form method="post">
        {% csrf_token %}
        <div class="form-row">
            <div class="form-group">
                <label for="first_name">First Name</label>
                <input type="text" id="first_name" name="first_name" value="{{ user.first_name }}">
            </div>
            <div class="form-group">
                <label for="last_name">Last Name</label>
                <input type="text" id="last_name" name="last_name" value="{{ user.last_name }}">
            </div>
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" value="{{ user.email }}" disabled>
            <small>Email cannot be changed</small>
        </div>

        <div class="form-group">
            <label for="timezone">Timezone</label>
            <select id="timezone" name="timezone">
                <option value="UTC" {% if user.timezone == 'UTC' %}selected{% endif %}>UTC</option>
                <option value="America/New_York" {% if user.timezone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                <option value="America/Chicago" {% if user.timezone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                <option value="America/Denver" {% if user.timezone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                <option value="America/Los_Angeles" {% if user.timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                <option value="Europe/London" {% if user.timezone == 'Europe/London' %}selected{% endif %}>London</option>
                <option value="Europe/Paris" {% if user.timezone == 'Europe/Paris' %}selected{% endif %}>Paris</option>
                <option value="Asia/Tokyo" {% if user.timezone == 'Asia/Tokyo' %}selected{% endif %}>Tokyo</option>
            </select>
        </div>

        <div class="form-group">
            <label for="default_reminder_minutes">Default Reminder (minutes before due)</label>
            <select id="default_reminder_minutes" name="default_reminder_minutes">
                <option value="0" {% if user.default_reminder_minutes == 0 %}selected{% endif %}>No reminder</option>
                <option value="5" {% if user.default_reminder_minutes == 5 %}selected{% endif %}>5 minutes</option>
                <option value="15" {% if user.default_reminder_minutes == 15 %}selected{% endif %}>15 minutes</option>
                <option value="30" {% if user.default_reminder_minutes == 30 %}selected{% endif %}>30 minutes</option>
                <option value="60" {% if user.default_reminder_minutes == 60 %}selected{% endif %}>1 hour</option>
                <option value="1440" {% if user.default_reminder_minutes == 1440 %}selected{% endif %}>1 day</option>
            </select>
        </div>

        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="email_notifications" {% if user.email_notifications %}checked{% endif %}>
                Email Notifications
            </label>
        </div>

        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="push_notifications" {% if user.push_notifications %}checked{% endif %}>
                Push Notifications
            </label>
        </div>

        <button type="submit" class="btn btn-primary">Save Changes</button>
    </form>
</div>
{% endblock %}