ot_typo3/ot_templating/Resources/Private/Templates/OtCustomizer/Index.html

{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><f:translate key="available_themes"/></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"><f:translate key="active_theme"/></div>
                                </f:then>
                                <f:else>
                                    <f:link.action
                                            action="selectTemplate"
                                            arguments="{template_key: template_key}"
                                            title="select"
                                            class="ot-btn"
                                    >
                                        <f:translate key="use_this_theme"/>
                                    </f:link.action>
                                </f:else>
                            </f:if>

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

        <div class="customizer">

            <h3><f:translate key="other_customization_settings"/></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: '{f:translate(key: \'light_blue\')}',
                                               blue: '{f:translate(key: \'blue\')}',
                                               green: '{f:translate(key: \'green\')}',
                                               orange: '{f:translate(key: \'orange\')}',
                                               grey: '{f:translate(key: \'grey\')}',
                                               red: '{f:translate(key: \'red\')}',
                                               light-red: '{f:translate(key: \'light_red\')}',
                                               purple: '{f:translate(key: \'purple\')}'}"
                                   value="{preferences.themeColor}">
                    </f:form.select>
                </div>

                <div class="form-group">
                    <label><f:translate key="display_carousel"/></label>
                    <f:form.checkbox name="displayCarousel"
                                     value="1"
                                     checked="{preferences.displayCarousel}"
                    />
                </div>
                <div class="form-group">
                    <label><f:translate key="display_breadcrumb"/></label>
                    <f:form.checkbox name="displayBreadcrumb"
                                     value="2"
                                     checked="{preferences.displayBreadcrumb}"
                    />
                </div>

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

                <f:flashMessages />
            </f:form>
        </div>
    </div>
</f:section>