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

{% block content %}
    <h1>[{{ branch.acronym }}] {{ branch.name }}</h1>
    <h2>Description</h2>
    <p>{{ branch.description }}</p>
    <h2>Songs</h2>
    {% include 'components/song-table.html' with songs=page_obj %}
    <nav aria-label="Pages">
        <ul class="pagination">
            {% 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"><a class="page-link" href="?page={{ page_obj.number }}">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</a></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 %}