{% extends "base.html" %}

{% block title %}Settings{% endblock %}

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

<form method="POST" action="{{ url_for('save_settings_route') }}">
    <div class="card">
        <h3>Sync Configuration</h3>

        <div class="form-group">
            <label for="sync_schedule">Sync Schedule (Cron Format)</label>
            <input type="text" id="sync_schedule" name="sync_schedule"
                   value="{{ settings.sync_schedule }}" class="form-control" required>
            <small class="form-help">
                Cron schedule for automatic syncs. Examples:<br>
                <code>0 2 * * *</code> = Every day at 2:00 AM<br>
                <code>0 */6 * * *</code> = Every 6 hours<br>
                <code>0 0 * * 0</code> = Every Sunday at midnight<br>
                <code>manual</code> = Disable automatic syncs
            </small>
        </div>

        <div class="form-group">
            <label for="max_quality">Maximum Video Quality</label>
            <select id="max_quality" name="max_quality" class="form-control">
                <option value="480" {% if settings.max_quality == '480' %}selected{% endif %}>480p</option>
                <option value="720" {% if settings.max_quality == '720' %}selected{% endif %}>720p</option>
                <option value="1080" {% if settings.max_quality == '1080' %}selected{% endif %}>1080p (Default)</option>
                <option value="1440" {% if settings.max_quality == '1440' %}selected{% endif %}>1440p (2K)</option>
                <option value="2160" {% if settings.max_quality == '2160' %}selected{% endif %}>2160p (4K)</option>
            </select>
            <small class="form-help">Maximum resolution to download. Higher quality = larger file sizes.</small>
        </div>

        <div class="form-group">
            <label for="sleep_interval">Sleep Interval (seconds)</label>
            <input type="number" id="sleep_interval" name="sleep_interval"
                   value="{{ settings.sleep_interval }}" class="form-control" min="0" max="10" required>
            <small class="form-help">Delay between downloads to avoid rate limiting (recommended: 2-5 seconds)</small>
        </div>

        <div class="form-group">
            <label for="timezone">Timezone</label>
            <select id="timezone" name="timezone" class="form-control">
                <option value="America/Phoenix" {% if settings.timezone == 'America/Phoenix' %}selected{% endif %}>America/Phoenix (MST)</option>
                <option value="America/New_York" {% if settings.timezone == 'America/New_York' %}selected{% endif %}>America/New_York (EST)</option>
                <option value="America/Chicago" {% if settings.timezone == 'America/Chicago' %}selected{% endif %}>America/Chicago (CST)</option>
                <option value="America/Denver" {% if settings.timezone == 'America/Denver' %}selected{% endif %}>America/Denver (MST)</option>
                <option value="America/Los_Angeles" {% if settings.timezone == 'America/Los_Angeles' %}selected{% endif %}>America/Los_Angeles (PST)</option>
                <option value="Europe/London" {% if settings.timezone == 'Europe/London' %}selected{% endif %}>Europe/London (GMT)</option>
                <option value="Europe/Paris" {% if settings.timezone == 'Europe/Paris' %}selected{% endif %}>Europe/Paris (CET)</option>
                <option value="Asia/Tokyo" {% if settings.timezone == 'Asia/Tokyo' %}selected{% endif %}>Asia/Tokyo (JST)</option>
                <option value="Australia/Sydney" {% if settings.timezone == 'Australia/Sydney' %}selected{% endif %}>Australia/Sydney (AEST)</option>
                <option value="UTC" {% if settings.timezone == 'UTC' %}selected{% endif %}>UTC</option>
            </select>
            <small class="form-help">Timezone for scheduling automatic syncs</small>
        </div>

        <button type="submit" class="btn btn-primary">Save Settings</button>
    </div>
</form>

<div class="card info-card">
    <h3>About Settings</h3>
    <ul>
        <li><strong>Sync Schedule:</strong> Uses cron format (minute hour day month weekday). Changes take effect after container restart.</li>
        <li><strong>Max Quality:</strong> Downloads best available quality up to this limit. Higher = more storage space.</li>
        <li><strong>Sleep Interval:</strong> Wait time between downloads. Helps avoid YouTube rate limiting.</li>
        <li><strong>Timezone:</strong> Used for scheduling. Make sure it matches your location.</li>
    </ul>
</div>
{% endblock %}