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

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

<f:section name="content">

    <div class="ot-customizer">
        <f:if condition="{pageSelected}">
            <f:then>

                <div class="templates">
                    <h3>Choisir un thème:</h3>
                    <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 class="customizer">

                    <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>
            </f:then>
            <f:else>
                <div class="no-page-warning">
                    <f:comment><!-- No page selected --></f:comment>
                    <f:translate key="noPageSelected" />
                </div>
            </f:else>
        </f:if>
    </div>
</f:section>