{% macro document_image(documents, document, slug, label, text, subtext, userRole) %}

{% set str = vich_uploader_asset(documents, slug ~ 'File') %}
{% set extension = str|split('.')|last %}
{% set strLastPoint = str|split('.')|last %}
{% set strBeforeLastPoint = str|split('.')|slice(0, -1)|join('.') %}
{% set strModified = strBeforeLastPoint|slice(19, -23) %}
{% set extension = str|split('.')|last %}



    {# si il y a un fichier #}
    {% if document is not null %}
    <div class="card">
        {% if extension == 'pdf' %}
        <div class="card-img-full upload-{{ slug|lower }}-container" 
        data-pdf-path="{{ vich_uploader_asset(documents, slug ~ 'File') }}">
        </div>
        {% elseif extension in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
        <div class="card-img-full">
                <img src="{{ asset('/uploads/documents/' ~ document) }}" alt="{{ label }}">
        </div>
        {% else %}
        <a href="{{ str }}" download="{{ strModified }}.{{ extension }}">
            <div class="card-img-full-other">
                <img src="{{ asset('/build/img/file_logo.svg') }}" alt="{{ label }}">
            </div>
        </a>
        <div class="custom-logo-extension">
        {{ extension|upper }}
        </div>
        {% endif %}
        <p class="document-name document-name-layout">{{ text }}</p>
        <div class="card-logos">
            {% if extension in ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'webp'] %}
            <div class="logo-group btn-voir">
                <div class="logo-bg-black">
                    <svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.5" d="M2 12C2 13.6394 2.42496 14.1915 3.27489 15.2957C4.97196 17.5004 7.81811 20 12 20C16.1819 20 19.028 17.5004 20.7251 15.2957C21.575 14.1915 22 13.6394 22 12C22 10.3606 21.575 9.80853 20.7251 8.70433C19.028 6.49956 16.1819 4 12 4C7.81811 4 4.97196 6.49956 3.27489 8.70433C2.42496 9.80853 2 10.3606 2 12Z"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z"/>
                    </svg>
                </div>
                <p class="logo-text">voir</p>  
            </div>
            {% endif %}
            <div class="logo-group">
                <a href="{{ str }}" download="{{ strModified }}.{{ extension }}">   
                    <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>
                </a>
            </div>
            <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>
        {% if userRole == 'ROLE_ADMIN' %}
        <div class="logo-group-eraser">
            <div class="logo-bg-purple delete-{{ slug|lower }}">
                <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 class="logo-group logo-group-update">
            <div class="logo-bg-black upload-{{ slug|lower }}">
                <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>
        </div>
        {% endif %}
    </div>
    {% if document|split('.')|last|lower == 'pdf' %}
    <script>
        const upload{{ slug|lower|capitalize }}Path = "{{ vich_uploader_asset(documents, slug ~ 'File')|escape('js') }}"
        const upload{{ slug|lower|capitalize }}Container = document.querySelector('.upload-{{ slug|lower }}-container')
        document.addEventListener('DOMContentLoaded', function() {
        renderPDFToContainer(upload{{ slug|lower|capitalize }}Path, upload{{ slug|lower|capitalize }}Container)
        })
    </script>
    {% endif %}

    {% endif %}

    {# si il n'y a pas de fichier #}
    {% if document is null %}
    <div class="card">
        <div class="card-img upload-{{ slug|lower }}">
            <p class="card-img-text">{{ text }}</p>
            <p class="card-img-subtitle">{{ subtext }}</p>
        </div>
        <p class="document-name"></p>
        <div class="card-logos">
            <div class="logo-group">
                <div class="logo-bg-red upload-{{ slug|lower }}">
                    <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 %}
{% endmacro %}


{% macro cleanstring(string, cutstart, cutend) %}
{% set string_trimmed = string|slice(cutstart) %}
{% set parts = string_trimmed|split('.') %}
{% set extension = parts|last %}
{% set base = parts|slice(0, parts|length - 1)|join('.') %}
{% set resultat_base = base|slice(0, base|length - cutend) %}
{% set resultat = resultat_base ~ '.' ~ extension %}
{{ resultat }}
{% endmacro %}

{% macro cutstring(string, maxLength = 20, truncateLength = 18) %}
    {% if string|length > maxLength %}
        {% set resultat = string|slice(0, truncateLength) ~ '...' %}
    {% else %}
        {% set resultat = string %}
    {% endif %}
    {{ resultat }}
{% endmacro %}

{% macro alertbox() %}
<dialog id="alert-dialog" class="hidden">
    <p id="dialog-message"></p>
    <button>Fermer</button>
</dialog>
<dialog id="alert-choice-dialog" class="hidden">
    <p id="dialog-choice-message"></p>
    <div class="alert-choice-buttons">
        <button class="cancel-button">Annuler</button>
        <button class="ok-button">Valider</button>
    </div>
</dialog>
{% endmacro %}

{% macro uploadedcard(array, imgkey, keyFile, dir, company) %}
{% import _self as macros %}
{% for elt in array %}
{% set extension = attribute(elt, imgkey)|split('.')|last|lower %}
{% set downloadFileName = macros.cleanstring(attribute(elt, imgkey), 0, 23)|trim|replace({' ': '_'}) %}
{% set cleanedName = macros.cleanstring(attribute(elt, imgkey), 0, 23) %}
    {% set cutCleanedName = macros.cutstring(cleanedName, 14, 12) %}
    <div class="card">
        {% if extension == 'pdf' %}
        <div class="card-img-full upload-{{ imgkey }}-{{ elt.id }}-container"
            data-pdf-path="{{ vich_uploader_asset(elt, keyFile)|raw }}"
            data-pdf-container="true">
        </div>
        {% elseif extension in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
            <div class="card-img-full">
                <img src="{{ asset('/uploads/' ~ dir ~ '/' ~ attribute(elt, imgkey)) }}" alt="element graphique">
            </div>
        {% else %}
            <a href="{{ vich_uploader_asset(elt, keyFile) }}" download="{{ downloadFileName }}"> 
                <div class="card-img-full-other">
                    <img src="{{ asset('/build/img/file_logo.svg') }}" alt="logo element graphique">
                </div>
            </a>
            <div class="custom-logo-extension">
            {{ extension|upper }}
            </div>
        {% endif %}
        <p class="document-name document-name-layout">{{ cutCleanedName }}</p>
        <div class="card-logos">
            {% if extension in ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'webp'] %}
            <div class="logo-group btn-voir">
                <div class="logo-bg-black">
                    <svg  viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.5" d="M2 12C2 13.6394 2.42496 14.1915 3.27489 15.2957C4.97196 17.5004 7.81811 20 12 20C16.1819 20 19.028 17.5004 20.7251 15.2957C21.575 14.1915 22 13.6394 22 12C22 10.3606 21.575 9.80853 20.7251 8.70433C19.028 6.49956 16.1819 4 12 4C7.81811 4 4.97196 6.49956 3.27489 8.70433C2.42496 9.80853 2 10.3606 2 12Z"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z"/>
                    </svg>
                </div>
                <p class="logo-text">voir</p>  
            </div>
            {% endif %}
            <a href="{{ vich_uploader_asset(elt, keyFile) }}" download="{{ downloadFileName }}"> 
                <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>
        <div class="logo-group-eraser">
            <div class="logo-bg-purple delete-file" data-file-id="{{ elt.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>
    {% if extension == 'pdf' %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const upload{{ imgkey }}{{ elt.id }}Path = "{{ vich_uploader_asset(elt, keyFile)|raw }}";
            const upload{{ imgkey }}{{ elt.id }}Container = document.querySelector('.upload-{{ imgkey }}-{{ elt.id }}-container');
             if (upload{{ imgkey }}{{ elt.id }}Container) {
                renderPDFToContainer(upload{{ imgkey }}{{ elt.id }}Path, upload{{ imgkey }}{{ elt.id }}Container);
            };
        });
    </script>
    {% endif %}
{% endfor %}
{% endmacro %}



{% macro form_card(iscomplete, img, name, slug, userRole, company, pdfname) %}
<div class="card">
    {% if iscomplete %}
    {% if userRole == 'ROLE_ADMIN' %}
    <div class="card-img-full-other {{ slug }}-modal-btn">
        <img src="{{ asset('/build/img/' ~ img) }}" alt='document complété'>
    </div>
        {% if img == 'file_logo.svg' %}
        <div class="custom-logo-extension">
        PDF
        </div>
        {% endif %}
    {% else %}
    <a href="{{ path('generate_pdf', { 'section': slug }) }}" download= "{{- pdfname|raw -}}">  
        <div class="card-img-full-other">
            <img src="{{ asset('/build/img/' ~ img) }}" alt='document complété'>
        </div>
    </a>
        {% if img == 'file_logo.svg' %}
        <div class="custom-logo-extension">
        PDF
        </div>
        {% endif %}
    {% endif %}


    <p class="document-name document-name-layout">{{ name }}</p>
    <div class="card-logos">
    {% if userRole == 'ROLE_USER' %}
        <a href="{{ path('generate_pdf', { 'section': slug }) }}" download= "{{- pdfname|raw -}}">   
            <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>
    {% endif %}
    {% if userRole == 'ROLE_ADMIN' %}
        <div class="logo-group">
            <div class="logo-bg-black {{ slug }}-modal-btn">
                <svg  viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.5" d="M2 12C2 13.6394 2.42496 14.1915 3.27489 15.2957C4.97196 17.5004 7.81811 20 12 20C16.1819 20 19.028 17.5004 20.7251 15.2957C21.575 14.1915 22 13.6394 22 12C22 10.3606 21.575 9.80853 20.7251 8.70433C19.028 6.49956 16.1819 4 12 4C7.81811 4 4.97196 6.49956 3.27489 8.70433C2.42496 9.80853 2 10.3606 2 12Z"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z"/>
                </svg>
            </div>
            <p class="logo-text">voir</p>
        </div>
        <a href="{{ path('generate_pdf', { 'section': slug, 'id': company.id }) }}" download= "{{- pdfname|raw -}}">   
             <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 class="logo-group-eraser">
            <div class="logo-bg-purple delete-form" data-form-slug="{{ slug }}" 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>
    {% endif %}      
    </div>
    {% else %}
    <div class="card-img {{ slug }}-modal-btn">
        <p class="card-img-text">{{ name }}</p>
    </div>
    <p class="document-name"></p>
    <div class="card-logos">
        <div class="logo-group">
            <div class="logo-bg-red {{ slug }}-modal-btn">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M3.25 22C3.25 21.5858 3.58579 21.25 4 21.25H20C20.4142 21.25 20.75 21.5858 20.75 22C20.75 22.4142 20.4142 22.75 20 22.75H4C3.58579 22.75 3.25 22.4142 3.25 22Z"/>
                    <path opacity="0.5" d="M19.0807 7.37162C20.3095 6.14279 20.3095 4.15046 19.0807 2.92162C17.8519 1.69279 15.8595 1.69279 14.6307 2.92162L13.9209 3.63141C13.9306 3.66076 13.9407 3.69052 13.9512 3.72066C14.2113 4.47054 14.7022 5.45356 15.6256 6.37698C16.549 7.30039 17.532 7.79126 18.2819 8.05142C18.3119 8.06183 18.3415 8.07187 18.3708 8.08155L19.0807 7.37162Z"/>
                    <path d="M13.9511 3.59961L13.9205 3.63017C13.9303 3.65952 13.9403 3.68928 13.9508 3.71942C14.211 4.4693 14.7018 5.45232 15.6252 6.37574C16.5487 7.29915 17.5317 7.79002 18.2816 8.05018C18.3113 8.0605 18.3407 8.07046 18.3696 8.08005L11.5198 14.9299C11.058 15.3917 10.827 15.6227 10.5724 15.8213C10.2721 16.0555 9.94711 16.2564 9.60326 16.4202C9.31177 16.5591 9.00196 16.6624 8.38235 16.869L5.11497 17.9581C4.81005 18.0597 4.47388 17.9804 4.24661 17.7531C4.01934 17.5258 3.93998 17.1897 4.04162 16.8847L5.13074 13.6173C5.33728 12.9977 5.44055 12.6879 5.57947 12.3964C5.74334 12.0526 5.94418 11.7276 6.17844 11.4273C6.37702 11.1727 6.60794 10.9418 7.06971 10.48L13.9511 3.59961Z"/>
                </svg>
            </div>
            <p class="logo-text">remplir</p>
        </div>
    </div>
    {% endif %}
</div>
{% endmacro %}



{% macro download_btn(slug, userRole, company = null) %}
    {% set route_name = 'download_' ~ slug %}
    {% set path_args = {} %}
    {% if userRole == 'ROLE_ADMIN' and company is not null %}
        {% set path_args = {'id': company.id} %}
    {% endif %}
    <a href="{{ path(route_name, path_args) }}" title="Télécharger les éléments de la section" download="{{ 'documents_' ~ company.name ~ '_' ~ slug ~ '.zip' }}">
            <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>
    </a>
{% endmacro %}