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

{% block title %} Songs {% endblock %}

{% block content %}
    <h1>Songs</h1>
    <form action="{{ request.path }}" method="GET">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="search-button" name="q">
            <button class="btn btn-outline-secondary" type="submit" id="search-button">Search</button>
        </div>
    </form>
    {% 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 %}