{% 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_media_preferences') }}">
            {% for preference in preferences %}
                <label class="text-gray-50" for="{{ preference.name }}">{{ preference.name }}</label>

                {% if preference.name|lower == "language" %}
                    <select class="p-1.5 rounded-md mb-2" name="{{ preference.name|lower }}" id="{{ preference.name }}">
                        {% for key, value in languages %}
                            <option class="text-gray-800" value="{{ key }}">{{ value }}</option>
                        {% endfor %}
                    </select>
                {% elseif preference.name|lower == "provider" %}
                    <select class="p-1.5 rounded-md mb-2" name="{{ preference.name|lower }}" id="{{ preference.name }}">
                        {% for key, value in providers %}
                            <option class="text-gray-800" value="{{ key }}">{{ value }}</option>
                        {% endfor %}
                    </select>
                {% else %}
                    <select class="p-1.5 rounded-md mb-2" name="{{ preference.name|lower }}" id="{{ preference.name }}">
                        {% for option in preference.preferenceOptions %}
                            <option class="text-gray-800" value="{{ option.id }}">{{ option.name }}</option>
                        {% endfor %}
                    </select>
                {% endif %}
            {% endfor %}
            <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 %}