{% extends 'layout.twig' %}

{% block body %}
	{# 
		    
		    
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		
		                    CE FICHIER EST UTILISER DANS PLUSIEUR MODULE, ATTENTION AU MODIFICATION             
		
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		        !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
		    
		    
		    #}

	<div class="contenu clearfix titre_div" id="factures">
		<h1>
			{{ TITREH1 }}
		</h1>

		{{ ariane() }}

		<h2>
			{{ titre }}
		</h2>

		<div>
			<div style="margin-bottom: 1em">
				{% if listeDocNonPrisEnCharge %}
				<p style="margin-left: 1em">
                    <i>
                        {{ "Les documents suivants n'ont pas pu être ouverts, merci de les télécharger" | trad 
							~ colon() 
							~ (listeDocNonPrisEnCharge|join(', '))
						}}
                    </i>
                </p>

				{% endif %}
				<ul class="nav nav-tabs sous_onglet sous_onglet_filter">
					{% for doc in docAtts %}
						<li class={{loop.first ? "active" : ''}} id="tab_filter">
							<a data-toggle="tab" href="#doc{{loop.index}}" id="link{{loop.index}}">
								{{ doc.TITRE ?? ('Document' | trad ~ loop.index) }}
							</a>
						</li>
					{% endfor %}
				</ul>
			</div>
			<div class="tab-content px-base">
				{% for doc in docAtts %}
						{# * Le autres documents sont téléchargés dynamiquement puis mis en cache pour éviter de devoir tous les retélécharger #}
						<div id="doc{{loop.index}}" style="height: 800px" class="tab-pane {{loop.first ? " active in " : ''}} box-form bs-row gutter-x-base"></div>
						<script>
							{% if loop.first %}
								createWindowCacheFetching();
								activeLoader();
							{% else %}
								$('#link{{loop.index}}').on('click', () => {
									if(window.cacheFetching["{{ doc.src ?? doc.srcdoc }}"]) activeLoader();
								});
							{% endif %}
							// Pour les Words et Excels : srcdoc
							// Pour les PDFs et images : src
							getFromCache("{{titre}}", "{{ doc.src ?? doc.srcdoc }}")
							.then(response =>
								{% if doc.contentType is not null %}
									response.blob()
								{% else %}
									response.text()
								{% endif %}
							).then(doc => {
								{% if doc.contentType is not null %}
									const blob = new Blob([doc], {type: "{{ doc.contentType }}" })
									const blobUrl = URL.createObjectURL(blob);
								{% endif %}
								// Création de l'iframe
								{% if doc.contentType is not null and doc.contentType starts with "image" %}
									$container = $("<div>", {
													css: {
														width: "100%",
														height: "100%",
														overflow: "auto",
														position: "relative",
														border: "2px black solid"
													}
												});
									$img = $("<img>", {
										id: "{{ doc.uniqId }}",
										title: "{{ doc.TITRE ?? ('Document' | trad ~ loop.index) }}",
										width: "100%",
										src: blobUrl,
										css: {
											display: "block",
											maxWidth: "50%",
											maxHeight: "none",
											position: "absolute",
											top: "50%",
											left: "50%",
											// Calculé pour que l'img soit bien en haut de la div sans troncage de l'image
											transform: "translate(-50%, -33%)"
										},
										onload: () => {
											if(window.cacheFetching["{{ doc.src ?? doc.srcdoc }}"] == false) desactiveLoader();
										}
									});
									$container.append($img);
								$("#doc{{ loop.index }}").append($container);
								{% else %}
									$iframe = $("<iframe>", {
											id: "{{ doc.uniqId }}",
											title: "{{ doc.TITRE ?? ('Document' | trad ~ loop.index) }}",
											width: "100%",
											{% if doc.contentType is not null %} 
												src: blobUrl,
											{% else %} 
												srcdoc: doc,
											{% endif %}
											onload: () => {
												if(window.cacheFetching["{{ doc.src ?? doc.srcdoc }}"] == false) desactiveLoader();
											}
										})
								$("#doc{{ loop.index }}").append($iframe);
								{% endif %}
							}).catch(err => {
								console.error("Erreur lors du chargement du document :", err);
							});
						</script>

				{% endfor %}
			</div>

		</div>

	{% endblock %}
