ohm_streaming/templates/components/settings_section.html

<div class="space-y-6">
    <!-- Section Title -->
    <div>
        <h2 class="text-2xl font-bold">Paramètres</h2>
    </div>

    <!-- General Preferences -->
    <div class="card bg-base-200 border border-base-300">
        <div class="card-body">
            <h3 class="card-title text-lg text-primary">
                <i class="fa-solid fa-sliders"></i> Général
            </h3>

            <form id="settings-form" class="space-y-4">
                <!-- Language -->
                <div class="form-control w-full max-w-xs">
                    <label class="label" for="default_lang">
                        <span class="label-text font-semibold">Langue par défaut</span>
                    </label>
                    <select name="default_lang" id="default_lang" class="select select-bordered w-full">
                        <option value="vostfr" {% if settings.default_lang == 'vostfr' %}selected{% endif %}>VOSTFR</option>
                        <option value="vf" {% if settings.default_lang == 'vf' %}selected{% endif %}>VF</option>
                    </select>
                </div>

                <!-- Theme -->
                <div class="form-control w-full max-w-xs">
                    <label class="label" for="theme">
                        <span class="label-text font-semibold">Thème</span>
                    </label>
                    <select name="theme" id="theme" class="select select-bordered w-full">
                        <option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Sombre (Premium Dark)</option>
                        <option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Clair (Soon)</option>
                        <option value="oled" {% if settings.theme == 'oled' %}selected{% endif %}>OLED (Noir absolu)</option>
                    </select>
                </div>

                <!-- Download Directory -->
                <div class="form-control w-full">
                    <label class="label" for="download_dir">
                        <span class="label-text font-semibold">Répertoire de téléchargement</span>
                    </label>
                    <input
                        type="text"
                        name="download_dir"
                        id="download_dir"
                        value="{{ settings.download_dir }}"
                        class="input input-bordered w-full"
                    >
                    <label class="label">
                        <span class="label-text-alt text-base-content/50">Répertoire où les fichiers seront téléchargés (défaut: downloads/)</span>
                    </label>
                </div>

                <!-- Save Button -->
                <button type="submit" class="btn btn-primary w-full" onclick="event.preventDefault(); saveSettings();">
                    <i class="fa-solid fa-save"></i> Enregistrer les préférences
                </button>
            </form>
        </div>
    </div>

    <!-- Content Filters -->
    <div class="card bg-base-200 border border-base-300">
        <div class="card-body">
            <h3 class="card-title text-lg text-primary">
                <i class="fa-solid fa-filter"></i> Filtres de contenu
            </h3>

            <div class="space-y-4">
                <!-- Recommendations Filter -->
                <div class="form-control w-full max-w-xs">
                    <label class="label" for="recommendations_filter">
                        <span class="label-text font-semibold">Recommandé pour vous : afficher</span>
                    </label>
                    <select name="recommendations_filter" id="recommendations_filter" class="select select-bordered w-full" onchange="saveFilter('recommendations_filter', this.value)">
                        <option value="all" {% if settings.recommendations_filter == 'all' %}selected{% endif %}>Les deux (Animes + Séries)</option>
                        <option value="anime" {% if settings.recommendations_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
                        <option value="series" {% if settings.recommendations_filter == 'series' %}selected{% endif %}>Séries uniquement</option>
                    </select>
                </div>

                <!-- Releases Filter -->
                <div class="form-control w-full max-w-xs">
                    <label class="label" for="releases_filter">
                        <span class="label-text font-semibold">Dernières sorties : afficher</span>
                    </label>
                    <select name="releases_filter" id="releases_filter" class="select select-bordered w-full" onchange="saveFilter('releases_filter', this.value)">
                        <option value="all" {% if settings.releases_filter == 'all' %}selected{% endif %}>Les deux (Animes + Séries)</option>
                        <option value="anime" {% if settings.releases_filter == 'anime' %}selected{% endif %}>Animes uniquement</option>
                        <option value="series" {% if settings.releases_filter == 'series' %}selected{% endif %}>Séries uniquement</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Categories -->
    <div class="card bg-base-200 border border-base-300">
        <div class="card-body">
            <h3 class="card-title text-lg text-primary">
                <i class="fa-solid fa-layer-group"></i> Catégories
            </h3>
            <p class="text-sm text-base-content/60 mb-4">Activez ou désactivez les catégories. Au moins une doit rester active.</p>

            <div class="flex gap-4 flex-wrap">
                <!-- Anime Toggle -->
                <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-4 bg-base-300 rounded-lg p-4 border border-base-content/10 flex-1 min-w-[200px]">
                        <div class="flex-1">
                            <span class="font-semibold text-base">Animes</span>
                            <p class="text-xs text-base-content/60">Films et séries animées</p>
                        </div>
                        <input
                            type="checkbox"
                            id="anime_enabled"
                            class="toggle toggle-primary"
                            {% if settings.anime_enabled %}checked{% endif %}
                            onchange="toggleCategory('anime_enabled', this.checked)"
                        >
                    </label>
                </div>

                <!-- Series Toggle -->
                <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-4 bg-base-300 rounded-lg p-4 border border-base-content/10 flex-1 min-w-[200px]">
                        <div class="flex-1">
                            <span class="font-semibold text-base">Séries TV</span>
                            <p class="text-xs text-base-content/60">Séries américaines et européennes</p>
                        </div>
                        <input
                            type="checkbox"
                            id="series_enabled"
                            class="toggle toggle-primary"
                            {% if settings.series_enabled %}checked{% endif %}
                            onchange="toggleCategory('series_enabled', this.checked)"
                        >
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Weight -->
    <div class="card bg-base-200 border border-base-300">
        <div class="card-body">
            <h3 class="card-title text-lg text-primary">
                <i class="fa-solid fa-scale-balanced"></i> Équilibre du fil d'actualité
            </h3>
            <p class="text-sm text-base-content/60 mb-4">
                Définissez la proportion d'animes et de séries affichés dans les recommandations et dernières sorties.
            </p>

            <!-- Weight Mode -->
            <div class="form-control w-full max-w-xs mb-4">
                <label class="label" for="content_weight_mode">
                    <span class="label-text font-semibold">Mode</span>
                </label>
                <select name="content_weight_mode" id="content_weight_mode" class="select select-bordered w-full" onchange="onWeightModeChange(this.value)">
                    <option value="auto" {% if settings.content_weight_mode == 'auto' %}selected{% endif %}>Automatique (basé sur vos téléchargements)</option>
                    <option value="manual" {% if settings.content_weight_mode == 'manual' %}selected{% endif %}>Manuel</option>
                </select>
            </div>

            <!-- Auto mode info -->
            <div id="weight-auto-info" class="bg-base-300 rounded-lg p-4 border border-base-content/10 mb-4" {% if settings.content_weight_mode != 'auto' %}style="display:none;"{% endif %}>
                <div class="flex items-center gap-2 mb-2">
                    <i class="fa-solid fa-chart-pie text-primary"></i>
                    <span class="font-semibold">Analyse de vos téléchargements</span>
                </div>
                <div id="weight-auto-details" class="text-sm text-base-content/60">
                    Chargement...
                </div>
            </div>

            <!-- Manual mode controls -->
            <div id="weight-manual-controls" {% if settings.content_weight_mode != 'manual' %}style="display:none;"{% endif %}>
                <div class="flex gap-6 items-start flex-wrap">
                    <!-- Anime Weight -->
                    <div class="flex-1 min-w-[200px]">
                        <label class="label">
                            <span class="label-text font-semibold">
                                <i class="fa-solid fa-dragon text-primary"></i> Poids Animes
                            </span>
                        </label>
                        <input
                            type="range"
                            id="content_weight_anime_range"
                            min="0"
                            max="5"
                            step="1"
                            value="{{ settings.content_weight_anime }}"
                            class="range range-primary range-sm"
                            oninput="document.getElementById('content_weight_anime').value = this.value; updateWeightPreview();"
                        >
                        <div class="flex justify-between text-xs text-base-content/50 px-1 mt-1">
                            <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
                        </div>
                    </div>

                    <!-- Series Weight -->
                    <div class="flex-1 min-w-[200px]">
                        <label class="label">
                            <span class="label-text font-semibold">
                                <i class="fa-solid fa-tv text-secondary"></i> Poids Séries
                            </span>
                        </label>
                        <input
                            type="range"
                            id="content_weight_series_range"
                            min="0"
                            max="5"
                            step="1"
                            value="{{ settings.content_weight_series }}"
                            class="range range-secondary range-sm"
                            oninput="document.getElementById('content_weight_series').value = this.value; updateWeightPreview();"
                        >
                        <div class="flex justify-between text-xs text-base-content/50 px-1 mt-1">
                            <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
                        </div>
                    </div>
                </div>

                <input type="hidden" id="content_weight_anime" value="{{ settings.content_weight_anime }}">
                <input type="hidden" id="content_weight_series" value="{{ settings.content_weight_series }}">

                <!-- Weight Preview -->
                <div id="weight-preview" class="bg-base-300 rounded-lg p-3 text-center text-sm mt-4"></div>

                <button class="btn btn-primary w-full mt-4" onclick="saveManualWeights()">
                    <i class="fa-solid fa-scale-balanced"></i> Appliquer
                </button>
            </div>
        </div>
    </div>

    <!-- Providers Management -->
    <div class="card bg-base-200 border border-base-300">
        <div class="card-body">
            <div class="flex justify-between items-center mb-4">
                <h3 class="card-title text-lg text-primary mb-0">
                    <i class="fa-solid fa-server"></i> Disponibilité des Fournisseurs
                </h3>
                <button class="btn btn-sm btn-ghost" hx-post="/api/providers/health/check" hx-swap="none">
                    <i class="fa-solid fa-arrows-rotate"></i> Forcer vérification
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                {% for provider in providers %}
                <div class="flex items-center justify-between bg-base-300 rounded-lg p-3 border border-base-content/10">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl">{{ provider.icon }}</span>
                        <div>
                            <div class="font-semibold text-sm">{{ provider.name }}</div>
                            <div class="flex items-center gap-1.5">
                                {% if provider.status == 'up' %}
                                    <span class="badge badge-success badge-xs"></span>
                                    <span class="text-xs font-bold text-success">UP</span>
                                {% elif provider.status == 'down' %}
                                    <span class="badge badge-error badge-xs"></span>
                                    <span class="text-xs font-bold text-error">DOWN</span>
                                {% else %}
                                    <span class="badge badge-ghost badge-xs"></span>
                                    <span class="text-xs font-bold text-base-content/40">{{ provider.status | upper }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <button
                        class="btn btn-sm {% if provider.enabled %}btn-ghost{% else %}btn-primary{% endif %}"
                        hx-post="/api/settings/providers/{{ provider.id }}/toggle"
                        hx-swap="none"
                        hx-on::after-request="htmx.trigger('#tab-settings > div', 'refresh-settings')"
                    >
                        {% if provider.enabled %}Désactiver{% else %}Activer{% endif %}
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>