{% extends 'base.html.twig' %}

{% block headline %}Farbschema{% endblock %}

{% block body %}
    <div class="d-flex">
        <div class="bg-main mt-5 flex-fill">
            <div class="section-headline">Farbschema wählen</div>

            <div class="p-5">
                <p>Du kannst aus einer Vielzahl an Farbschemen wählen, um die Seite an die Stimmung deiner Rollenspiele
                    anzupassen.</p>

                <form method="GET" action="{{ path('color-theme-save') }}" class="mt-5">
                    <label for="color-theme-select">Farbschema auswählen</label>
                    <select id="color-theme-select" name="color-theme" class="form-control mt-3">
                        {% for theme in themes %}
                            <option value="{{ theme.getId() }}"
                                    {% if colorTheme.getId() == theme.getId() %}selected{% endif %}>{{ theme.getName() }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-primary mt-3 p-3" type="submit">Speichern</button>
                </form>
            </div>
        </div>
    </div>

    <div class="d-flex">
        <div class="bg-main my-5 flex-fill">
            <div class="section-headline">Vorschau</div>

            <div class="p-5">
                {% include 'colortheme/preview.html.twig' %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('colortheme') }}
{% endblock %}