{% extends "base.html" %}

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

{% block content %}
<section class="settings">
    <h2>Application Settings</h2>

    <form method="post" class="settings-form">
        <div class="form-group">
            <label for="download_path">Download Path</label>
            <input type="text" name="download_path" id="download_path" value="{{ settings.download_path }}" required>
            <small>Directory where podcast episodes will be downloaded</small>
        </div>

        <div class="form-group">
            <label for="naming_format">Naming Format</label>
            <input type="text" name="naming_format" id="naming_format" value="{{ settings.naming_format }}" required>
            <small>Format for downloaded files. Available variables: {podcast_title}, {episode_title}, {published_date}, {episode_number}, {author}</small>
            <div id="naming-preview" class="preview">
                <strong>Preview:</strong> <span id="preview-text">{{ settings.naming_format }}</span>
            </div>
        </div>

        <div class="form-group checkbox">
            <input type="checkbox" name="auto_download" id="auto_download" {% if settings.auto_download %}checked{% endif %}>
            <label for="auto_download">Auto-download new episodes</label>
        </div>

        <div class="form-group">
            <label for="max_downloads">Maximum Concurrent Downloads</label>
            <input type="number" name="max_downloads" id="max_downloads" value="{{ settings.max_downloads }}" min="1" max="10" required>
        </div>

        <div class="form-group">
            <label for="delete_after_days">Delete Episodes After (days)</label>
            <input type="number" name="delete_after_days" id="delete_after_days" value="{{ settings.delete_after_days }}" min="0" required>
            <small>Set to 0 to never delete</small>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn">Save Settings</button>
        </div>
    </form>
</section>
{% endblock %}

{% block scripts %}
<script>
    // Preview naming format
    const namingFormatInput = document.getElementById('naming_format');
    const previewText = document.getElementById('preview-text');

    namingFormatInput.addEventListener('input', function() {
        // Send AJAX request to get preview
        fetch('{{ url_for("settings.naming_preview") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'naming_format=' + encodeURIComponent(this.value)
        })
        .then(response => response.json())
        .then(data => {
            if (data.preview) {
                previewText.textContent = data.preview;
            } else if (data.error) {
                previewText.textContent = 'Error: ' + data.error;
            }
        });
    });
</script>
{% endblock %}