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

{% block body %}
<div class="p-4 flex flex-col">
    <twig:Card title="Choose your preferences">
        <p class="text-gray-50 mb-2">Define a set of filters to apply to your media download option results.</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>
</div>
{% endblock %}