{% extends 'blog/base.html' %}

{% block content %}
<h2 class="mb-4">Your Posts</h2>

{% for post in page_obj %}
<div class="card mb-3 shadow-sm">
  <div class="card-body">
    <h4 class="card-title">{{ post.title }}</h4>
    <p class="card-text">{{ post.content|truncatewords:30 }}</p>

    <a href="{% url 'post_update' post.pk %}" class="btn btn-sm btn-primary">Edit</a>
    <a href="{% url 'post_delete' post.pk %}" class="btn btn-sm btn-danger">Delete</a>
  </div>
</div>
{% empty %}
<div class="alert alert-info">No posts yet.</div>
{% endfor %}

<!-- Pagination -->
<nav>
  <ul class="pagination justify-content-center">

    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page=1">First</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
      </li>
    {% endif %}

    <li class="page-item active">
      <span class="page-link">
        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
      </span>
    </li>

    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
      </li>
    {% endif %}

  </ul>
</nav>

{% endblock %}