{% import 'macros.html.twig' as macros %}
{% if graphickiosklogo is not null %}
    <div class="card">
        {% if graphickiosklogo.graphicelement|split('.')|last|lower == 'pdf' %}
        <div class="card-img-full upload-graphicelement-{{ graphickiosklogo.id }}-container"
            data-pdf-path="{{ vich_uploader_asset(graphickiosklogo, 'graphicelementFile')|raw }}"
            data-pdf-container="true">
        {% else %}
        <div class="card-img-full">
            {% if graphickiosklogo.graphicelement|split('.')|last|lower in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                <img src="{{ asset('/uploads/graphicelements/' ~ graphickiosklogo.graphicelement) }}" alt="logo caisse">
            {% elseif graphickiosklogo.graphicelement|split('.')|last|lower in ['csv'] %}
                <img src="{{ asset('/build/img/csv.webp') }}" alt="logo csv">
            {% else %}
                <img src="{{ asset('/build/img/exempleschema.webp') }}" alt="logo element graphique">
            {% endif %}
        {% endif %}
        </div>
        <p class="document-name document-name-layout">Logo</p>
        <div class="card-logos">
            <a href="{{ vich_uploader_asset(graphickiosklogo, 'graphicelementFile') }}" download="{{ macros.cleanstring(graphickiosklogo.graphicelement, 0, 23)|trim|replace({' ': '_'}) }}"> 
                <div class="logo-group">
                    <div class="logo-bg-red">
                        <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.75 11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V15.1893L10.0303 13.9697C9.73744 13.6768 9.26256 13.6768 8.96967 13.9697C8.67678 14.2626 8.67678 14.7374 8.96967 15.0303L11.4697 17.5303C11.6103 17.671 11.8011 17.75 12 17.75C12.1989 17.75 12.3897 17.671 12.5303 17.5303L15.0303 15.0303C15.3232 14.7374 15.3232 14.2626 15.0303 13.9697C14.7374 13.6768 14.2626 13.6768 13.9697 13.9697L12.75 15.1893V11Z"/>
                        </svg>
                    </div>
                    <p class="logo-text">télécharger</p>
                </div>
            </a>
            <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>
        </div>
        <div class="logo-group-eraser">
            <div class="logo-bg-purple delete-file" data-file-id="{{ graphickiosklogo.id }}" data-company-id="{{ company.id }}">
                <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>
{% else %}
<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"></p>
    <div class="card-logos">
        <div class="logo-group">
            <div class="logo-bg-red upload-graphicelement" data-ge-type="kiosklogo">
                <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>
    </div>
</div>
{% endif %}
{% if graphickiosklogo is not null %}
{% if graphickiosklogo.graphicelement|split('.')|last|lower == 'pdf' %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploadgraphicelement{{ graphickiosklogo.id }}Path = "{{ vich_uploader_asset(graphickiosklogo, 'graphicelementFile')|raw }}";
            const uploadgraphicelement{{ graphickiosklogo.id }}Container = document.querySelector('.upload-graphicelement-{{ graphickiosklogo.id }}-container');
             if (uploadgraphicelement{{ graphickiosklogo.id }}Container) {
                renderPDFToContainer(uploadgraphicelement{{ graphickiosklogo.id }}Path, uploadgraphicelement{{ graphickiosklogo.id }}Container);
            };
        });
    </script>
{% endif %}
{% endif %}