{% extends 'template.html' %}

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

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

{% block body %}



<form method="get" class="mb-4">
  <div class="input-group">
    <input type="text" class="form-control" name="q" placeholder="Buscar título, autor o contenido..." value="{{ search }}">
    <button class="btn btn-outline-primary" type="submit">
      <i class="bi bi-search"></i> Buscar
    </button>
  </div>
</form>

<div class="container">

  <!-- {# i pagination #} -->
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center mt-4">

      <!-- Anterior -->
      <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page - 1 }}{% if search %}&q={{ search }}{% endif %}">Anterior</a>
      </li>

      <!-- Páginas -->
      {% for page_num in range(1, total_pages + 1) %}
      <li class="page-item {% if page_num == current_page %}active{% endif %}">
        <a class="page-link" href="?page={{ page_num }}{% if search %}&q={{ search }}{% endif %}">
          {{ page_num }}
        </a>
      </li>
      {% endfor %}

      <!-- Siguiente -->
      <li class="page-item {% if current_page >= total_pages %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page + 1 }}{% if search %}&q={{ search }}{% endif %}">Siguiente</a>
      </li>

    </ul>
  </nav>
  <!-- {# f pagination #} -->

  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="card-container" data-aos="fade" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">

    <!-- {# adaptación #} -->
    {% for post in data %}
    <div class="col card-wrapper">
      <div class="card h-100">
        <!-- {# img #} -->
        <img src="{{ post[7] if post[7] else url_for('static', filename='y_img/other/no_img.png') }}"
          class="card-img-top" alt="card image">

        <div class="card-body d-flex flex-column">
          <div class="mb-3">
            <!-- {# título #} -->
            <!-- <h5 class="card-title">{{ post[5] }}</h5> -->
            <a href="{{ url_for('blog_post', post_id = post[0] ) }}" class="btn btn-info"> <h5>{{post[5]}}</h5> </a> <br>
            <small class="text-muted">
              <!-- {# autor #} -->
              <i class="bi bi-file-person-fill"></i> {{ post[1] }} {{ post[2] }} <br>
              <!-- {# fecha creación #} -->
              <i class="bi bi-calendar-week"></i> {{ post[3] }}<br>
              <!-- {# if fecha actualización #} -->
              {% if post[4] is not none %}
              <i class="bi bi-arrow-repeat"></i> {{ post[4] }}<br>
              {% endif %}
              <!-- {# tiempo lectura #} -->
              <i class="bi bi-clock"></i> {{ post[8] }} min. <br>
              <i class="bi bi-eye"></i>
            </small>

            <!-- {# breve resumen #} -->
            <p class="card-text">{{ post[6] }}...</p>

          </div>
          <!-- <div class="mt-auto"></div> -->
        </div>
      </div>
    </div>
    {% endfor %}


  </div>
  <!-- {# i pagination #} -->
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center mt-4">

      <!-- Anterior -->
      <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page - 1 }}{% if search %}&q={{ search }}{% endif %}">Anterior</a>
      </li>

      <!-- Páginas -->
      {% for page_num in range(1, total_pages + 1) %}
      <li class="page-item {% if page_num == current_page %}active{% endif %}">
        <a class="page-link" href="?page={{ page_num }}{% if search %}&q={{ search }}{% endif %}">
          {{ page_num }}
        </a>
      </li>
      {% endfor %}

      <!-- Siguiente -->
      <li class="page-item {% if current_page >= total_pages %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page + 1 }}{% if search %}&q={{ search }}{% endif %}">Siguiente</a>
      </li>

    </ul>
  </nav>
  <!-- {# f pagination #} -->

</div>



{% endblock body %}

{% block js %}

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

{% endblock js %}