{% extends 'base.html.twig' %}
{% block title %}Preferences{% endblock %}
{% block h2 %}Preferences{% endblock %}

{% block action_buttons %}
    <div {{ stimulus_controller('clear_cache') }}>
        <twig:Modal heading="Hold on a sec!" button_text="Clear Cache" cancel_text="Nope" submit_text="Yep" show_cancel show_submit
                    button_class="px-1.5 py-1 my-2 text-white text-sm bg-blue-950 hover:bg-black/80 border-2 border-blue-500/90 rounded-md inline-block"
                    submit_action="{{ stimulus_action('clear_cache', 'clearAll', 'click') }}"
        >
            This will clear the TMDB, Torrentio, and application cache. Clearing the cache is safe, but may lead to
            slower page loads and rate limits by Torrentio. Would you like to proceed?
        </twig:Modal>
    </div>
{% endblock %}

{% block body %}
<div class="p-4 flex flex-row gap-2">
    <twig:Card title="Media Preferences" class="w-full">
        <p class="text-gray-50 mb-2">Define a filter to be pre-applied to your download options.</p>
        <form id="media_preferences" class="flex flex-col max-w-64" name="media_preferences" method="post" action="{{ path('app_save_media_preferences') }}">
            <label class="text-gray-50" for="resolution">Resolution</label>
            <select class="p-1.5 rounded-md mb-2" name="resolution" id="resolution" value="{{ mediaPreferences['resolution'].getPreferenceValue() }}">
                <option class="text-gray-800"
                        value=""
                        {{ mediaPreferences['resolution'] is null ? "selected" }}
                >n/a</option>

                {% for pref in mediaPreferences['resolution'].getPreference().getPreferenceOptions() %}
                    <option class="text-gray-800"
                            value="{{ pref.id }}"
                            {{ pref.id == mediaPreferences['resolution'].getPreferenceValue() ? "selected" }}
                    >{{ pref.name }}</option>
                {% endfor %}
            </select>

            <label class="text-gray-50" for="codec">Codec</label>
            <select class="p-1.5 rounded-md mb-2" name="codec" id="codec" value="{{ mediaPreferences['codec'].getPreferenceValue() }}">
                <option class="text-gray-800"
                        value=""
                        {{ mediaPreferences['codec'].getPreferenceValue() is null ? "selected" }}
                >n/a</option>
                {% for pref in mediaPreferences['codec'].getPreference().getPreferenceOptions() %}
                    <option class="text-gray-800"
                            value="{{ pref.id }}"
                            {{ pref.id == mediaPreferences['codec'].getPreferenceValue() ? "selected" }}
                    >{{ pref.name }}</option>
                {% endfor %}
            </select>

            <label class="text-gray-50" for="provider">Provider</label>
            <select class="p-1.5 rounded-md mb-2" name="provider" id="provider" value="{{ mediaPreferences['provider'].getPreferenceValue() }}">
                <option class="text-gray-800"
                        value=""
                        {{ "" == mediaPreferences['provider'].getPreferenceValue() ? "selected" }}
                >n/a</option>
                {% for provider in providers %}
                    <option class="text-gray-800"
                            value="{{ provider }}"
                            {{ provider == mediaPreferences['provider'].getPreferenceValue() ? "selected" }}
                    >{{ provider }}</option>
                {% endfor %}
            </select>

            <label class="text-gray-50" for="language">Language</label>
            <select class="p-1.5 rounded-md mb-2" name="language" id="language" value="{{ mediaPreferences['language'].getPreferenceValue() }}">
                <option class="text-gray-800"
                        value=""
                        {{ mediaPreferences['language'].getPreferenceValue() is null ? "selected" }}
                >n/a</option>
                {% for language in languages %}
                    <option class="text-gray-800"
                            value="{{ language }}"
                            {{ language == mediaPreferences['language'].getPreferenceValue() ? "selected" }}
                    >{{ language }}</option>
                {% endfor %}
            </select>
            <button class="px-1.5 py-1 max-w-20 rounded-md bg-green-600 text-white" type="submit">Submit</button>
        </form>
    </twig:Card>

    <twig:Card title="Download Preferences" class="w-full">
        <p class="text-gray-50 mb-2">Change how your downloads are stored.</p>
        <form id="download_preferences" class="flex flex-col" name="download_preferences" method="post" action="{{ path('app_save_download_preferences') }}">
            <div class="flex flex-row gap-2 mb-2">
                <input type="hidden" name="movie_folder" id="movie_folder_hidden" value="0" />
                <input type="checkbox" name="movie_folder" id="movie_folder" value="1" {{ downloadPreferences['movie_folder'].getPreferenceValue() == true ? 'checked' }} />
                <label class="text-gray-50" for="movie_folder">Store movies in a new directory?</label>
            </div>
            <button class="px-1.5 py-1 max-w-20 rounded-md bg-green-600 text-white" type="submit">Submit</button>
        </form>
    </twig:Card>
</div>
{% endblock %}