{% extends "frontend/base.html" %}
{% load random %}
{% load playlists %}
{% block content %}
<section class="portfolio-block project">
    <div class="container">
        <div class="heading">
            <h2>{{object.title}}</h2>
        </div>
        <div class="image">
            {% if playlist %}{% next_video playlist object as next %}{% endif %}
            <video controls poster="{{object.get_thumbnail_url}}" src="{{object.get_video_url}}" width="100%"
                height="100%" data-current="{{object.id}}" {% if next %}data-next="{{next.id}}" {% endif %}
                id="videoplayer" autoplay>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 offset-md-1 info">
                <h3>Description</h3>
                <p>{{object.description|linebreaksbr}}</p>
            </div>
            <div class="col-12 col-md-3 offset-md-1 meta">
                {% if object.playlist_set.all %}
                <div class="tags"><span class="meta-heading">Part of Playlists</span>
                    {% for pl in object.playlist_set.all %}
                    <a href="{{pl.get_absolute_url}}">{{pl.title}}</a>
                    {% endfor %}
                </div>
                <hr>
                {% endif %}
                {% if object.tags %}
                <div class="tags"><span class="meta-heading">Tags</span>
                    {% for tag in object.tags %}
                    <a href="#">{{tag}}</a>
                    {% endfor %}
                </div>
                <hr>
                {% endif %}
                <div class="tags"><span class="meta-heading">Date</span>
                    {{ object.published.date }}
                </div>
            </div>
        </div>
        {% if playlist %}
        <div class="more-projects">
            <h3 class="text-center">Other videos in {{playlist.title}}</h3>
            <div class="row gallery">
                {% other_videos playlist object as suggestions %}
                {% for video in suggestions %}
                <div class="col-md-4 col-lg-3">
                    <div class="item"><a href="{{video.get_absolute_url}}"><img class="img-fluid scale-on-hover"
                                src="{{video.get_thumbnail_url}}">{{video.title}}</a></div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        <div class="more-projects">
            <h3 class="text-center">Random Videos</h3>
            <div class="row gallery">
                {% random_videos as suggestions %}
                {% for video in suggestions %}
                <div class="col-md-4 col-lg-3">
                    <div class="item"><a href="{{video.get_absolute_url}}"><img class="img-fluid scale-on-hover"
                                src="{{video.get_thumbnail_url}}">{{video.title}}</a></div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block scripts %}
<script src="/static/js/nextvideo.js"></script>
{% endblock %}