{% extends 'base.html.twig' %}
{% import 'macros.html.twig' as macros %}

{% block title %}
	{{ company.designation }}
	| 6Xpos
{% endblock %}

{% block body %}
<main>
    {{ include('uploadmodal.html.twig') }}
    {{ include('navigation.html.twig') }}
    {{ include('terminalspecsmodal.html.twig') }}
    {{ macros.alertbox() }}
    <div class="content">
        {% if "Borne de commande" in company.settings %}
            <div class="content-title">
                <h2>Éléments graphiques pour la borne</h2>
                <h3>{{ company.designation }}</h3>
                {{ macros.download_btn ('graphisme', userRole, company ) }}
            </div>
            <div class="content-main">
                <div class="cards terminalspecscontainer">


                    <div class="card card-info">
                        <div class="card-img-custom">
                            <p class="card-img-custom-text">ATTENTION ! Toutes les photos doivent impérativement être forunies par le client.</p>
                            <p class="card-img-custom-subtext">Un délai de 4 semaines est à compter à réception de tous les éléments graphiques.</p>
                        </div>
                        <p class="document-name"></p>
                    </div>

                    {{ macros.form_card(isterminalspecscompleted, 
                    'file_logo.svg', 
                    'Cahier des charges bornes', 
                    'terminalspecs', 
                    userRole,
                    company,
                    'cahier_des_charges_borne' ) }}

                    <div class="card">
                        <div class="card-img upload-graphicelement" data-ge-type="logos">
                            <p class="card-img-text">Logo</p>
                            <p class="card-img-subtitle">(de préférence au format vectoriel .AI, .EPS, .SVG ou .PNG et .JPEG)</p>
                        </div>
                        <p class="document-name"></p>
                        <div class="card-logos">
                            <div class="logo-group">
                                <div class="logo-bg-red upload-graphicelement" data-ge-type="logos">
                                    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M11.9993 2C16.7133 2 19.0704 2 20.5348 3.46447C21.2923 4.22195 21.658 5.21824 21.8345 6.65598V10H2.16406V6.65598C2.3406 5.21824 2.70628 4.22195 3.46377 3.46447C4.92823 2 7.28525 2 11.9993 2Z"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14ZM12.5303 10.4697C12.3897 10.329 12.1989 10.25 12 10.25C11.8011 10.25 11.6103 10.329 11.4697 10.4697L8.96967 12.9697C8.67678 13.2626 8.67678 13.7374 8.96967 14.0303C9.26256 14.3232 9.73744 14.3232 10.0303 14.0303L11.25 12.8107V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.8107L13.9697 14.0303C14.2626 14.3232 14.7374 14.3232 15.0303 14.0303C15.3232 13.7374 15.3232 13.2626 15.0303 12.9697L12.5303 10.4697Z"/>
                                    </svg>
                                </div>
                                <p class="logo-text">téléverser</p>
                            </div>
                            {% if graphiclogos is not empty %}
                            <div class="logo-group">
                                <div class="logo-bg-green">
                                    <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="M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                

                    <div class="card">
                        <div class="card-img upload-graphicelement" data-ge-type="products">
                            <p class="card-img-text">Photos produit HD nommées .PNG ou .JPEG</p>
                            <p class="card-img-subtitle">(Optez pour un envoi global au format .ZIP ou .RAR)</p>
                        </div>
                        <p class="document-name"></p>
                        <div class="card-logos">
                            <div class="logo-group">
                                <div class="logo-bg-red upload-graphicelement" data-ge-type="products">
                                    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M11.9993 2C16.7133 2 19.0704 2 20.5348 3.46447C21.2923 4.22195 21.658 5.21824 21.8345 6.65598V10H2.16406V6.65598C2.3406 5.21824 2.70628 4.22195 3.46377 3.46447C4.92823 2 7.28525 2 11.9993 2Z"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14ZM12.5303 10.4697C12.3897 10.329 12.1989 10.25 12 10.25C11.8011 10.25 11.6103 10.329 11.4697 10.4697L8.96967 12.9697C8.67678 13.2626 8.67678 13.7374 8.96967 14.0303C9.26256 14.3232 9.73744 14.3232 10.0303 14.0303L11.25 12.8107V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.8107L13.9697 14.0303C14.2626 14.3232 14.7374 14.3232 15.0303 14.0303C15.3232 13.7374 15.3232 13.2626 15.0303 12.9697L12.5303 10.4697Z"/>
                                    </svg>
                                </div>
                                <p class="logo-text">téléverser</p>
                            </div>
                            {% if graphicproducts is not empty %}
                            <div class="logo-group">
                                <div class="logo-bg-green">
                                    <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="M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-img upload-graphicelement" data-ge-type="guidelines">
                            <p class="card-img-text">Charte graphique si vous en possédez une.</p>
                        </div>
                        <p class="document-name"></p>
                        <div class="card-logos">
                            <div class="logo-group">
                                <div class="logo-bg-red upload-graphicelement" data-ge-type="guidelines">
                                    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M11.9993 2C16.7133 2 19.0704 2 20.5348 3.46447C21.2923 4.22195 21.658 5.21824 21.8345 6.65598V10H2.16406V6.65598C2.3406 5.21824 2.70628 4.22195 3.46377 3.46447C4.92823 2 7.28525 2 11.9993 2Z"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14ZM12.5303 10.4697C12.3897 10.329 12.1989 10.25 12 10.25C11.8011 10.25 11.6103 10.329 11.4697 10.4697L8.96967 12.9697C8.67678 13.2626 8.67678 13.7374 8.96967 14.0303C9.26256 14.3232 9.73744 14.3232 10.0303 14.0303L11.25 12.8107V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.8107L13.9697 14.0303C14.2626 14.3232 14.7374 14.3232 15.0303 14.0303C15.3232 13.7374 15.3232 13.2626 15.0303 12.9697L12.5303 10.4697Z"/>
                                    </svg>
                                </div>
                                <p class="logo-text">téléverser</p>
                            </div>
                            {% if graphicguidelines is not empty %}
                            <div class="logo-group">
                                <div class="logo-bg-green">
                                    <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="M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-img upload-graphicelement" data-ge-type="other">
                            <p class="card-img-text">Flyer, affiche, etc... Tout ce qui pourrait nous aider à comprendre votre manière de communiquer.</p>
                        </div>
                        <p class="document-name"></p>
                        <div class="card-logos">
                            <div class="logo-group">
                                <div class="logo-bg-red upload-graphicelement" data-ge-type="other">
                                    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M11.9993 2C16.7133 2 19.0704 2 20.5348 3.46447C21.2923 4.22195 21.658 5.21824 21.8345 6.65598V10H2.16406V6.65598C2.3406 5.21824 2.70628 4.22195 3.46377 3.46447C4.92823 2 7.28525 2 11.9993 2Z"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14ZM12.5303 10.4697C12.3897 10.329 12.1989 10.25 12 10.25C11.8011 10.25 11.6103 10.329 11.4697 10.4697L8.96967 12.9697C8.67678 13.2626 8.67678 13.7374 8.96967 14.0303C9.26256 14.3232 9.73744 14.3232 10.0303 14.0303L11.25 12.8107V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.8107L13.9697 14.0303C14.2626 14.3232 14.7374 14.3232 15.0303 14.0303C15.3232 13.7374 15.3232 13.2626 15.0303 12.9697L12.5303 10.4697Z"/>
                                    </svg>
                                </div>
                                <p class="logo-text">téléverser</p>
                            </div>
                            {% if graphicother is not empty %}
                            <div class="logo-group">
                                <div class="logo-bg-green">
                                    <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="M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="displaycontent graphic-list-refresh">
                        {% include 'components/graphisme/graphic_list.html.twig' %}
                    </div>
                </div>
            </div>
        {% else %}
            <div class="content-title">
                <div class="title-download-group">
                    <h2>Éléments graphiques pour la caisse</h2>
                    {{ macros.download_btn ('graphisme', userRole, company ) }}
                </div> 
                <h3>{{ company.designation }}</h3>
            </div>
            <div class="content-main">
                <div class="cards">
                    <div class="card">
                        <div class="card-img">
                            <p class="card-img-text">Logo</p>
                            <p class="card-img-subtitle">(de préférence au format vectoriel .AI, .EPS, .SVG ou .PNG et .JPEG)</p>
                        </div>
                        <p class="document-name upload-graphicelement" data-ge-type="logos"></p>
                        <div class="card-logos">
                            <div class="logo-group">
                                <div class="logo-bg-red upload-graphicelement" data-ge-type="logos">
                                    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.5" d="M11.9993 2C16.7133 2 19.0704 2 20.5348 3.46447C21.2923 4.22195 21.658 5.21824 21.8345 6.65598V10H2.16406V6.65598C2.3406 5.21824 2.70628 4.22195 3.46377 3.46447C4.92823 2 7.28525 2 11.9993 2Z"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 14C2 11.1997 2 9.79961 2.54497 8.73005C3.02433 7.78924 3.78924 7.02433 4.73005 6.54497C5.79961 6 7.19974 6 10 6H14C16.8003 6 18.2004 6 19.27 6.54497C20.2108 7.02433 20.9757 7.78924 21.455 8.73005C22 9.79961 22 11.1997 22 14C22 16.8003 22 18.2004 21.455 19.27C20.9757 20.2108 20.2108 20.9757 19.27 21.455C18.2004 22 16.8003 22 14 22H10C7.19974 22 5.79961 22 4.73005 21.455C3.78924 20.9757 3.02433 20.2108 2.54497 19.27C2 18.2004 2 16.8003 2 14ZM12.5303 10.4697C12.3897 10.329 12.1989 10.25 12 10.25C11.8011 10.25 11.6103 10.329 11.4697 10.4697L8.96967 12.9697C8.67678 13.2626 8.67678 13.7374 8.96967 14.0303C9.26256 14.3232 9.73744 14.3232 10.0303 14.0303L11.25 12.8107V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.8107L13.9697 14.0303C14.2626 14.3232 14.7374 14.3232 15.0303 14.0303C15.3232 13.7374 15.3232 13.2626 15.0303 12.9697L12.5303 10.4697Z"/>
                                    </svg>
                                </div>
                                <p class="logo-text">téléverser</p>
                            </div>
                            {% if graphiclogos is not empty %}
                            <div class="logo-group">
                                <div class="logo-bg-green">
                                    <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="M16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z"/>
                                    </svg>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="displaycontent graphic-logos-refresh">
                        {% include 'components/graphisme/logos.html.twig' %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div> 

</main>
{% include 'baseroutes.html.twig' %}
{% endblock %}