{% form_theme terminalspecsform 'form/fields.html.twig' %}

<div class="terminalspecs-modal hidden modal-container-layout">
    <div class="modal-full">
        <div class="close-cross-bg-edit close-cross-terminalspecs-modal">
            <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.5" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="#fff"/>
                <path d="M8.96967 8.96967C9.26256 8.67678 9.73744 8.67678 10.0303 8.96967L12 10.9394L13.9697 8.96969C14.2626 8.6768 14.7374 8.6768 15.0303 8.96969C15.3232 9.26258 15.3232 9.73746 15.0303 10.0304L13.0607 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0304 15.0303C9.73746 15.3232 9.26258 15.3232 8.96969 15.0303C8.6768 14.7374 8.6768 14.2626 8.96969 13.9697L10.9394 12L8.96967 10.0303C8.67678 9.73744 8.67678 9.26256 8.96967 8.96967Z" fill="#fff"/>
            </svg>
        </div>

        <div class="terminalspecs-modal-container">
            <h2 class="sign-modal-title">Cahier des charges borne</h2>
            {{ form_start(terminalspecsform) }}
                <h3 class="terminalspecs-modal-subtitle">Modèles de borne sur le point de vente :</h3>
                    {{ form_row(terminalspecsform.terminal_types) }}
                <p class="terminalspecs-modal-text">Sélectionnez l'option correspondante à votre devis</p>
                    {{ form_row(terminalspecsform.is_animated) }}
                <h3 class="terminalspecs-modal-subtitle">Mode de vente :</h3>
                    {{ form_row(terminalspecsform.selling_method) }}
                <h3 class="terminalspecs-modal-subtitle">Dénomination de commande :</h3>    
                <p class="terminalspecs-modal-text">Sur place :</p>              
                    {{ form_row(terminalspecsform.on_site_denomination) }}
                <p class="terminalspecs-modal-text">À emporter :</p> 
                    {{ form_row(terminalspecsform.take_away_denomination) }}
                <h3 class="terminalspecs-modal-subtitle">Espace de commande :</h3>
                <p class="terminalspecs-modal-text">Catégories / groupes présents dans le carroussel</p>
                <div id="categories-list">
                {% for category in terminalspecs.categories %}
                    <div class="category" data-index="{{ loop.index0 }}">
                        {{ category }}
                        <div class="logo-group-eraser delete-category" data-index="{{ loop.index0 }}">
                            <div class="logo-bg-purple">
                                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.5" d="M14.9522 3C13.9146 3 13.0796 3.83502 11.4096 5.50506L6.5 10.4146L13.5854 17.5L18.4949 12.5904C20.165 10.9204 21 10.0854 21 9.04776C21 8.01013 20.165 7.1751 18.4949 5.50506C16.8249 3.83502 15.9899 3 14.9522 3Z"/>
                                    <path d="M13.5854 17.5001L6.5 10.4147L5.50506 11.4096C3.83502 13.0796 3 13.9147 3 14.9523C3 15.9899 3.83502 16.825 5.50506 18.495C7.1751 20.165 8.01013 21.0001 9.04776 21.0001C10.0854 21.0001 10.9204 20.165 12.5904 18.495L13.5854 17.5001Z"/>
                                    <g opacity="0.5">
                                    <path d="M9.03264 21H9C9.01086 21.0003 9.02174 20.9999 9.03264 21Z"/>
                                    <path d="M9.06287 21C9.85928 20.9938 10.5389 20.4938 11.5734 19.5L21 19.5C21.4142 19.5 21.75 19.8358 21.75 20.25C21.75 20.6642 21.4142 21 21 21H9.06287Z"/>
                                    </g>
                                </svg>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
                    {{ form_widget(terminalspecsform.newCategory) }}
                <div class="logo-group">
                    <div id="add-category-btn" class="logo-bg-red-circle">
                        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.5" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"/>
                            <path d="M12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C11.5858 8.25 11.25 8.58579 11.25 9L11.25 11.25H9C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75H11.25V15C11.25 15.4142 11.5858 15.75 12 15.75C12.4142 15.75 12.75 15.4142 12.75 15L12.75 12.75H15C15.4142 12.75 15.75 12.4142 15.75 12C15.75 11.5858 15.4142 11.25 15 11.25H12.75V9Z"/>
                        </svg>
                    </div>
                    <p class="logo-text">nouveau groupe</p>
                </div>
                <h3 class="terminalspecs-modal-subtitle">Mode de règlement :</h3>
                    {{ form_row(terminalspecsform.payment_method) }}
                <h3 class="terminalspecs-modal-subtitle">Si écran d'appel :</h3>                    
                    {{ form_row(terminalspecsform.call_screen) }}
                <h3 class="terminalspecs-modal-subtitle">Options payantes :</h3>
                <div class="terminalspecs-accept">     
                    {{ form_row(terminalspecsform.accept_additional_language) }}
                </div>
                <div class="terminalspecs-form-input-container">
                    {{ form_row(terminalspecsform.additional_language) }}
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.5" d="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z"/>
                        <path d="M15.5303 11.0303C15.8232 10.7374 15.8232 10.2626 15.5303 9.96967C15.2374 9.67678 14.7626 9.67678 14.4697 9.96967L12 12.4393L9.53033 9.96967C9.23744 9.67678 8.76256 9.67678 8.46967 9.96967C8.17678 10.2626 8.17678 10.7374 8.46967 11.0303L11.4697 14.0303C11.7626 14.3232 12.2374 14.3232 12.5303 14.0303L15.5303 11.0303Z"/>
                    </svg>
                </div>
                <div class="terminalspecs-accept">  
                    {{ form_row(terminalspecsform.accept_loyalty_provider) }}
                </div>
                <div class="terminalspecs-form-input-container">
                    {{ form_row(terminalspecsform.loyalty_provider) }}
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.5" d="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12Z"/>
                        <path d="M15.5303 11.0303C15.8232 10.7374 15.8232 10.2626 15.5303 9.96967C15.2374 9.67678 14.7626 9.67678 14.4697 9.96967L12 12.4393L9.53033 9.96967C9.23744 9.67678 8.76256 9.67678 8.46967 9.96967C8.17678 10.2626 8.17678 10.7374 8.46967 11.0303L11.4697 14.0303C11.7626 14.3232 12.2374 14.3232 12.5303 14.0303L15.5303 11.0303Z"/>
                    </svg>
                </div>
                <p class="terminalspecs-modal-textend">Un délai de 4 semaines minimum est à compter à réception de tous les éléments graphiques.</p> 
                    {{ form_row(terminalspecsform.save) }}
            {{ form_end(terminalspecsform) }}
        </div>
        <div class="logo-terminalspecs-modal-layout">
            <div class="logo-terminalspecs-modal">
                <img src="{{ asset('/build/img/6xpos_logo.svg') }}" alt="logo 6Xpos">
            </div>
        </div>
    </div>
</div>