{% extends "components/base.html" %}
{% load static %}
{% load html_truncate %}
{% load safe_html %}
{% block title %}Blog{% endblock %}

{% block content %}

<main class="main">

  <!-- Page Title -->
  <div class="page-title">
    <div class="heading">
      <div class="container">
        <div class="row d-flex justify-content-center text-center">
          <div class="col-lg-8">
            <h1>Blog</h1>
            <h2 class="mb-0">Últimas publicaciones y novedades</h2>
          </div>
        </div>
      </div>
    </div>
  </div><!-- End Page Title -->

  <!-- Blog Posts Section -->
  <section id="recent-posts" class="recent-posts section">
    <div class="container">
      <div class="row gy-5">

        {% for post in posts %}
        <div class="col-xl-4 col-md-6">
          <div class="post-item position-relative h-100" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:'100' }}">

            <div class="post-img position-relative overflow-hidden">
              {% if post.image %}
              <img src="{{ post.image.url }}" class="img-fluid" alt="{{ post.title }}">
              {% else %}
              <img src="{% static 'img/blog/blog-1.jpg' %}" class="img-fluid" alt="{{ post.title }}">
              {% endif %}
              <span class="post-date">{{ post.published_at|date:"d M Y" }}</span>
            </div>

            <div class="post-content d-flex flex-column">
              <h3 class="post-title">{{ post.title }}</h3>

              <div class="meta d-flex align-items-center">
                <div class="d-flex align-items-center">
                  <i class="bi bi-person"></i> <span class="ps-2">{{ post.author.get_full_name }}</span>
                </div>
                <span class="px-3 text-black-50">/</span>
                <div class="d-flex align-items-center">
                  <i class="bi bi-folder2"></i> <span class="ps-2">{{ post.category.name }}</span>
                </div>
              </div>

              <hr>
              <p>{{ post.content|truncate_html_words:25|safe_html }}</p>

              <a href="{% url 'blog:post_detail' post.slug %}" class="readmore stretched-link">
                <span>Leer Más</span><i class="bi bi-arrow-right"></i>
              </a>
            </div>

          </div>
        </div>
        {% empty %}
        <p>No hay publicaciones aún.</p>
        {% endfor %}

      </div>

      <!-- Pagination -->
      {% if is_paginated %}
      <div class="pagination mt-5 text-center">
        {% if page_obj.has_previous %}
        <a class="btn btn-outline-primary me-2" href="?page={{ page_obj.previous_page_number }}">Anterior</a>
        {% endif %}
        <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
        {% if page_obj.has_next %}
        <a class="btn btn-outline-primary ms-2" href="?page={{ page_obj.next_page_number }}">Siguiente</a>
        {% endif %}
      </div>
      {% endif %}

    </div>
  </section><!-- End Blog Posts Section -->

</main>

{% endblock %}