{% extends "frontend/base.html" %}
{% block content %}
<section class="portfolio-block projects-with-sidebar">
    <div class="container">
        <div class="heading">
            <h2>{{title}}</h2>
        </div>
        <div class="row">
            <div class="col-md-3">
                <ul class="list-unstyled sidebar">
                    <a href="{% url "randomvideo" %}">Random Video</a>
                    <hr>
                    <li><a class="active" href="/">All</a></li>
                    {% for pl in playlists %}
                    <li><a href="{{pl.get_absolute_url}}">{{pl.title}}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="col-md-9">
                <div class="row">
                    {% for video in object_list %}
                    <div class="col-md-6 col-lg-4 project-sidebar-card"><a
                            href="{{video.get_absolute_url}}{% if playlist %}?playlist={{playlist.id}}{% endif %}"><img
                                class="img-fluid image scale-on-hover"
                                src="{{video.get_thumbnail_url}}">{{video.title}}</a></div>
                    {% endfor %}
                </div>
            </div>
            <nav>
                <ul class="pagination">
                    {% if not page_obj.number <= 2 %} <li class="page-item">
                        <a class="page-link" href="?page=1" tabindex="-1">First<a>
                                </li>
                                {% endif %}
                                {% if page_obj.number != 1 %}
                                <li class="page-item">
                                    <a class="page-link"
                                        href="?page={{page_obj.previous_page_number}}">{{page_obj.previous_page_number}}</a>
                                </li>
                                {% endif %}
                                <li class="page-item active">
                                    <a class="page-link" href="?page={{page_obj.number}}">{{page_obj.number}}</a>
                                </li>
                                {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link"
                                        href="?page={{page_obj.next_page_number}}">{{page_obj.next_page_number}}</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{page_obj.paginator.num_pages}}">Last</a>
                                </li>
                                {% endif %}
                </ul>
            </nav>
        </div>
    </div>
</section>
{% endblock content %}