{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{url_for('static', filename='a.1_new_posts/new_posts.css')}}">
{% endblock %}


{% block usr_path %}
<li class="breadcrumb-item active" aria-current="page">
	<a href="">
		<span>Notas</span>
	</a>
</li>
{% endblock %}


{% block body %}


<h3>Todas las notas</h3>
<!-- {# seccion de topicos generales checkbox #} -->

<div id="section_topics">
	{% for ele in db_mainSections %}
	<div class="form-check">
		<input id="lst_{{ele[0]}}" class="form-check-input" type="checkbox" value="{{ele[0]}}">
		<label class="form-check-label" for="lst_{{ele[0]}}">
			{{ele[1]}}
		</label>
	</div>
	{% endfor %}
</div>

<div class="input-group" style="margin: 1em;">
	<div class="input-group-prepend">
		<span class="input-group-text" id="">Buscar nota</span>
	</div>
	<input id="search_all_posts" type="text" class="form-control" placeholder="Palabra clave de busqueda">
</div>

<div class="all_new_posts">
	{% for ele in db_newPosts %}
	<div class="card mb-3 lst_{{ele[1]}} card-cont" style="max-width: 18rem; display: none;">
		<div class="card-header">{{ ele[5] | safe }} {{ ele[1].upper() }}</div>
		<div class="card-body">
			<i>
				<span class="title-card"><i class="bi bi-calendar-week"></i> {{ ele[2] }}</span>
				<!-- http://127.0.0.1:8088/section/python/tema/15 -->
				<a href="{{url_for('subseccion_tema', subseccion_name=ele[1], index_tema=ele[0])}}"
					class="btn btn-outline-primary btn-sm">
					<i class="fa-solid fa-link"></i>
				</a>
			</i>

			<div style="margin-top: 0.5em;">
				<button class="btn btn-outline-primary" type="button" data-toggle="collapse"
					data-target="#multiCollapse_{{loop.index}}" aria-expanded="false"
					aria-controls="multiCollapse_{{loop.index}}">{{ ele[3] }}</button>
				<div class="col">
					<div class="collapse multi-collapse" id="multiCollapse_{{loop.index}}">
						<div class="card card-body-text">
							{{ ele[4] }}
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
	{% endfor %}
</div>


<hr>

<!-- {{ db_newPosts[0] }}

<div id="accordion">
  {% for ele in db_newPosts %}
  <div class="card">
    <div class="card-header lst_{{ele[1]}}" id="headingTwo">
      <h5 class="mb-0">
				{{ele[5] | safe}}
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse_{{ele[0]}}" aria-expanded="false" aria-controls="collapse_{{ele[0]}}">
          {{ele[3]}}
        </button>
      </h5>
    </div>
    <div id="collapse_{{ele[0]}}" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        {{ ele[4] }}
      </div>
    </div>
  </div>
	{% endfor %}

</div>

<hr> -->


<!-- bootstrap accordion -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="{{url_for('static', filename='a.1_new_posts/new_posts.js')}}"></script>
<script src="{{ url_for('static', filename='a.1_new_posts/btn_sear_note.js') }}"></script>

{% endblock %}