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">

    <v:variable.set name="currentTemplate"
                    value="{ot:currentTemplate()}"/>

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

                <div class="templates">
                    <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="btn"
                                        >
                                            Utiliser ce thème
                                        </f:link.action>
                                    </f:else>
                                </f:if>

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

                <div class="customizer">
                    <form>

                        <div class="form-group">
                            <label>Couleur du thème</label>
                            <select class="form-control form-control-adapt" size="1">
                                <option value="light-blue" selected="selected">Bleu ciel</option>
                                <option value="blue">Bleu</option>
                                <option value="green">Vert</option>
                                <option value="orange">Orange</option>
                                <option value="grey">Gris</option>
                                <option value="red">Rouge</option>
                                <option value="light-red">Rouge cerise</option>
                                <option value="purple">Violet</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Afficher le caroussel d'images</label>
                            <input type="checkbox"
                                   class="checkbox-input"
                                   value="1">
                        </div>

                        <div class="actions">
                            <f:link.action
                                    action="selectTemplate"
                                    arguments="{template_key: template_key}"
                                    title="select"
                                    class="btn">
                                Appliquer
                            </f:link.action>
                        </div>
                    </form>
                </div>
            </f:then>
            <f:else>
                <f:comment><!-- No page selected --></f:comment>
                <f:translate key="noPageSelected" />
            </f:else>
        </f:if>
    </div>
</f:section>