{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{url_for('static', filename='b_tema_subseccion/tema_subseccion.css')}}">
{% endblock %}

{% block usr_path %}
<li class="breadcrumb-item active" aria-current="page">
	<a href="{{url_for('subseccion', subseccion_name=subseccion_name)}}" class="path_ele">
		<span>{{cur_ext}}</span>
	</a>
</li>
{% endblock %}

{% block body %}

<div id="subseccion_intro">
	<!-- <div > -->
	<span id="icon">
		{{dataHome[0][4] | safe}}
	</span>
	<!-- </div> -->
	<!-- <div > -->
	<span id="resume">
		{{dataHome[0][3]}}
	</span>
	<!-- </div> -->
</div>

<form action="">
	<div class="form-group">
		<input type="search" class="form-control" id="search" aria-describedby="emailHelp" placeholder="Buscar...">
	  </div>
</form>


<div class="accordion accordion-flush" id="accordionFlushExample">
	{% for ele in db_subtemas %}
	<div class="accordion-item">

		<h2 class="accordion-header">
			<a href="{{url_for('subseccion_tema', subseccion_name=subseccion_name, index_tema=ele[0] )}}">
				{{dataHome[0][2] | safe}}
			</a>
			<span> | </span>
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
				data-bs-target="#flush-collapse_{{loop.index}}" aria-expanded="false" aria-controls="flush-collapseOne">
				{{ele[2]}}
			</button>
		</h2>
		<div id="flush-collapse_{{loop.index}}" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				<p>
					{{ele[3]}}
				</p>
			</div>
		</div>
	</div>
	{% endfor %}
</div>

<script>
let search = document.getElementById("search");
let whole_data = document.querySelectorAll("div.accordion-item");

search.addEventListener("input", () => {
    let value = search.value.toLowerCase();

    whole_data.forEach(ele => {
        let title = ele.querySelector("h2 button").innerText.toLowerCase();
        let desc = ele.querySelector("div.accordion-collapse div.accordion-body p").innerText.toLowerCase();

        if (!title.includes(value) && !desc.includes(value)) {
            ele.style.display = 'none';
        } else {
            ele.style.display = 'block';
        }
    });
});


</script>

{% endblock %}