{% extends 'template.html' %}

{% block css %}
<!-- {# estilos de la sección tema #} -->
<link rel="stylesheet" href="{{url_for('static', filename='b_tema_subseccion/tema/tema.css')}}">

{% endblock css %}


<!-- {# cur usr path #} -->
{% block usr_path %}
<li class="breadcrumb-item" aria-current="page">
	<a href="{{url_for('subseccion', subseccion_name=subseccion_name)}}">
		<span>{{cur_ext_base}}</span>
	</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
	<a href="">
		<span>{{cat_file}}{{cur_ext_base}}</span>
	</a>
</li>
{% endblock usr_path %}

<!-- {# content template #} -->
{% block body %}


<!-- {# glosario #} -->
{% for ele in f_lst_glosary %}
{% for e in ele %}
<div class="modal fade" id="{{e[0]}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h1 class="modal-title fs-5" id="exampleModalLabel">
					{{e[1]}}
				</h1>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				{{e[2] | safe}}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
					Cerrar
				</button>
			</div>
		</div>
	</div>
</div>
{% endfor %}
{% endfor %}

<!-- {# info content #} -->
<div>
	<span><i class="bi bi-calendar-week"></i> {{data[0][0]}}</span> &nbsp;&nbsp;
	<span><i class="bi bi-file-earmark-richtext-fill"></i> {{data[0][1]}}</span>
</div>

<div>
	<h3 class="subtitle">{{data[0][2]}}</h3>
</div>

{% if alert != 'no_template' %}
{% set alert_template = "/components/alerts/" + alert %}
{% include alert_template %}
{% endif %}

<!-- {# i btn toggle see code #} -->
{% include 'components/btn-toggle-see-code.html' %}
<!-- {# f btn toggle see code #} -->

<!-- {# html template post #} -->
{% include template_path %}

<!-- notas relacionadas -->
{% if f_lst_data_links | length > 0 %}
<div class="accordion" id="accordionExample">
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
				aria-expanded="false" aria-controls="collapseTwo">
				Notas relacionadas
			</button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				{% for item in f_lst_data_links %}
				<div>
					<a href="/section/{{item[0]}}/tema/{{item[1]}}" class="a_noStyle">
						<i class="bi bi-link-45deg">
							{{ item[2] }}
						</i>
					</a>
				</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>
{% endif %}

<!-- modal para hacer las imágenes más grandes -->
<!-- Contenedor para el modal (inicialmente oculto) -->
<div id="zoomModal" class="modal-img">
	<div class="modal-img-content">
		<button class="close-btn" id="closeModal"><i class="bi bi-x-circle-fill"></i></button>
		<img id="zoomedImage" src="" alt="">
	</div>
</div>

{% block js %}
<!-- {# scripts de la seccion tema #} -->
<script src="{{url_for('static', filename='b_tema_subseccion/tema/tema.js')}}"></script>
<!-- ---------------- -->
<script src="{{url_for('static', filename='b_tema_subseccion/tema/btn-toggle.js')}}"></script>
<script src="{{url_for('static', filename='b_tema_subseccion/tema/zoomable.js')}}"></script>
{% endblock js %}

{% endblock body %}