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

{% for elt in companydomiciliations %}
    {% set downloadDomiciliationFileName = macros.cleanstring(attribute(elt, 'domiciliationimg'), 0, 46)|trim|replace({' ': '_'}) %}
    {% set extension = attribute(elt, 'domiciliationimg')|split('.')|last|lower %}
    {% set cleanedName = macros.cleanstring(attribute(elt, 'domiciliationimg'), 0, 23) %}
    {% set cutCleanedName = macros.cutstring(cleanedName, 14, 12) %}
    <div class="card">
        {% if extension == 'pdf' %}
        <div class="card-img-full upload-{{ 'domiciliationimg' }}-{{ elt.id }}-container"
            data-pdf-path="{{ vich_uploader_asset(elt, 'domiciliationimgFile')|raw }}"
            data-pdf-container="true">
        </div>
        {% elseif extension in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
            <div class="card-img-full">
                <img src="{{ asset('/uploads/domiciliations/' ~ attribute(elt, 'domiciliationimg')) }}" alt="element graphique">
            </div>
        {% else %}
            <a href="{{ vich_uploader_asset(elt, 'domiciliationimgFile') }}" download="{{ downloadDomiciliationFileName }}"> 
                <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, 'domiciliationimgFile' ) }}" download="{{ downloadDomiciliationFileName }}"> 
                <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>
            {% if userRole == 'ROLE_ADMIN' %}
            <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>
            {% endif %}
        </div>
    </div>
{% if extension == 'pdf' %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const uploaddomiciliationimg{{ elt.id }}Path = "{{ vich_uploader_asset(elt, 'domiciliationimgFile')|raw }}";
            const uploaddomiciliationimg{{ elt.id }}Container = document.querySelector('.upload-domiciliationimg-{{ elt.id }}-container');
             if (uploaddomiciliationimg{{ elt.id }}Container) {
                renderPDFToContainer(uploaddomiciliationimg{{ elt.id }}Path, uploaddomiciliationimg{{ elt.id }}Container);
            };
        });
    </script>
{% endif %}
{% endfor %}