{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:layout name="Backend/Default" />



<f:section name="content">

    <div class="ot-be-module ot-customizer">
        <div class="templates">
            <h3>Thèmes disponibles</h3>
            <div class="templates-gallery">
                <f:for each="{templates}" as="template" key="template_key">

                    <div class="template-card">
                        <div class="template-title">
                            {template.name}
                        </div>
                        <div class="template-poster">
                            <f:image src="{template.picture}" alt="poster" />
                        </div>
                        <div class="template-description">
                            {template.description}
                        </div>
                        <div class="template-controls">

                            <f:if condition="{template_key}=={currentTemplate}">
                                <f:then>
                                    <div class="active">Thème actif</div>
                                </f:then>
                                <f:else>
                                    <f:link.action
                                            action="selectTemplate"
                                            arguments="{template_key: template_key}"
                                            title="select"
                                            class="ot-btn"
                                    >
                                        Utiliser ce thème
                                    </f:link.action>
                                </f:else>
                            </f:if>

                        </div>
                    </div>
                </f:for>
            </div>
        </div>

        <div class="customizer">

            <h3>Autre options de personnalisation</h3>

            <f:form action="updatePreferences">
                <div class="form-group">
                    <label>Couleur du thème</label>
                    <f:form.select class="form-control"
                                   name="themeColor"
                                   options="{light-blue: 'Bleu ciel',
                                               blue: 'Bleu',
                                               green: 'Vert',
                                               orange: 'Orange',
                                               grey: 'Gris',
                                               red: 'Rouge',
                                               light-red: 'Rouge cerise',
                                               purple: 'Violet'}"
                                   value="{preferences.themeColor}">
                    </f:form.select>
                </div>

                <div class="form-group">
                    <label>Afficher le caroussel d'images</label>
                    <f:form.checkbox name="displayCarousel"
                                     value="1"
                                     checked="{preferences.displayCarousel}"
                    />
                </div>

                <div class="actions">
                    <f:form.button type="submit" class="ot-btn">
                        Appliquer
                    </f:form.button>
                </div>

                <f:if condition="{preferencesUpdated}==1">
                    <p class="success-msg">Préférences mises à jour</p>
                </f:if>
            </f:form>
        </div>
    </div>
</f:section>