{% load humanize %}
{% load ratings %}

<div class="video-gallery container-fluid">
    <div class="row">
        {% for video in videos %}
            <div class="card-wrapper d-flex align-items-stretch" style="width: 18rem;">
                <div class="card mx-auto">
                    <a href="{% url 'video' video.id %}" target="_blank">
                        <img class="card-img-top" src="{{ video.thumbnail }}" alt="Thumbnail">
                    </a>
                    <div class="card-body">
                        <h5 class="card-title">
                            {% if video.new and not video.watched %}
                            <sup class="badge badge-primary">New</sup>
                            {% endif %}
                            <a href="{% url 'video' video.id %}" target="_blank">
                                {{ video.name }}
                            </a>
                        </h5>
                        <p class="card-text small text-muted">
                            <span>{{ video.views | intcomma }} views</span>
                            <span>&#x2022;</span>
                            <span>{{ video.publish_date | naturaltime }}</span>
                        </p>
                        <p class="card-text">{{ video.description | truncatechars:120 }}</p>
                    </div>
                    <div class="card-footer dropdown show">
                        <span class="typcn typcn-eye {{ video.watched | yesno:"video-icon-yes,video-icon-no" }}"
                              title="{{ video.watched | yesno:"Watched,Not watched" }}"></span>
                        <span class="typcn typcn-download {{ video.downloaded_path | yesno:"video-icon-yes,,video-icon-no" }}"
                              title="{{ video.downloaded_path | yesno:"Downloaded,,Not downloaded" }}"></span>
                        <small class="text-muted">{{ video.publish_date }}</small>
                        <a class="card-more float-right text-muted"
                           href="#" role="button" id="dropdownMenuLink"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="typcn typcn-cog"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                            {% if video.watched %}
                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_unwatched' video.id %}">
                                    Mark not watched
                                </a>
                            {% else %}
                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_mark_video_watched' video.id %}">
                                    Mark watched
                                </a>
                            {% endif %}

                            {% if video.downloaded_path %}
                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_delete_video_files' video.id %}">
                                    Delete downloaded
                                </a>
                            {% else %}
                                <a class="dropdown-item ajax-link" href="#" data-post-url="{% url 'ajax_action_download_video_files' video.id %}" >
                                    Download
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="pagination row">
        <div class="btn-toolbar mx-auto">
            <div class="btn-group mr-2" role="group">
                <button id="btn_page_first" type="button" class="btn btn-light btn-paging"
                        data-toggle="tooltip" title="First page"
                        {% if videos.has_previous %} data-navigation-page="1" {% else %} disabled {% endif %}>
                    <span class="typcn typcn-chevron-left-outline" aria-hidden="true"></span>
                </button>
                <button id="btn_page_prev" type="button" class="btn btn-light btn-paging"
                        data-toggle="tooltip" title="Previous"
                        {% if videos.has_previous %} data-navigation-page="{{ videos.previous_page_number }}" {% else %} disabled {% endif %} >
                    <span class="typcn typcn-chevron-left" aria-hidden="true"></span>
                </button>
            </div>

            <small class="my-auto mx-2">
                Page {{ videos.number }} of {{ videos.paginator.num_pages }}
            </small>

            <div class="btn-group mx-2" role="group">
                <button id="btn_page_next" type="button" class="btn btn-light btn-paging"
                        data-toggle="tooltip" title="Next"
                        {% if videos.has_next %} data-navigation-page="{{ videos.next_page_number }}" {% else %} disabled {% endif %} >
                    <span class="typcn typcn-chevron-right" aria-hidden="true"></span>
                </button>
                <button id="btn_page_last" type="button" class="btn btn-light btn-paging"
                        data-toggle="tooltip" title="Last"
                        {% if videos.has_next %} data-navigation-page="{{ videos.paginator.num_pages }}" {% else %} disabled {% endif %} >
                    <span class="typcn typcn-chevron-right-outline" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
</div>