{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='e_blog/a_all_posts.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='e_blog/0_all_posts_main.css') }}">
{% endblock css %}

{% block navbar %}
{% include 'z_comps/navbar.html' %}
{% endblock navbar %}

{% block body %}


<div class="container my-3">
  <div class="input-group mb-3">
    <!-- <input id="searchInput" type="text" autocomplete="off" /> -->

    <input id="search-input" type="text" class="form-control" placeholder="Buscar por autor, título o resumen..." autocomplete="off">
    
    <!-- Botón para limpiar -->
    <button id="clear-btn" class="btn btn-outline-secondary" type="button">&times;</button>
    
    <span class="input-group-text">
      <span id="result-count">0</span> &nbsp;resultado(s)
    </span>
  </div>
</div>

<div id="loading-indicator" class="text-center my-5">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="card-container"></div>

<nav aria-label="Page navigation" class="mt-4">
  <ul class="pagination justify-content-center" id="pagination"></ul>
</nav>



{% endblock body %}

{% block js %}

{% include 'z_comps/if_flash.html' %}

<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

<!-- {# vaciar info api en tarjetas #} -->
<script src="{{url_for( 'static', filename='e_blog/a_all_posts_visit.js' )}}"></script>


{% endblock js %}