{% extends 'base/base.html' %}
{% load static %}
{% load video_tag %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/dropload.css' %}">
{% endblock css %}

{% block content %}
<div class="ui unstackable two column grid">
    <div class=" ten wide column">
        <video class="video" autoplay="autoplay" controls="controls" controlslist="nodownload"
               disablePictureInPicture>
            <source src="{{video.file.url}}" type="video/mp4">
<!--            <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">-->
        </video>
        <div class="video-info">
            <div class="video-title">{{ video.title }}</div>
            <div class="video-view-count">{{ video.view_count }}次观看</div>
            <div class="video-view-operation">
                {{video.desc}}
            </div>
            <div class="extra content video-view-operation">
                <span class="left floated like">
                    <i class="like {%  user_liked_class video user %} icon cursor" id="like"
                       video-id="{{ video.id }}"></i>
                    <span id="like-count">{{ video.count_likers }}</span>
                </span>
                <span class="right floated star">
                    <i class="bookmark {%  user_collected_class video user %}  icon cursor" id="star"
                       video-id="{{ video.id }}"></i>
                    <span id="collect-count">{{ video.count_collecters }}</span>
                </span>
            </div>
            <div class="ui divider"></div>
        </div>
        <div class="ui comments">
            {% if user.is_authenticated %}
            <form class="ui reply form" id="comment_form" method="post"
                  action="{% url 'comment:submit_comment' video.pk %}">
                {% csrf_token %}
                <div class="field">
                    {{form.content}}
                    <input type="hidden" value="{{ video.id }}" name="video_id">
                </div>
                <button class="ui primary button" type="submit">
                    添加评论
                </button>
                <div class="ui info message n">
                    <div class="item" id="comment-result"></div>
                </div>
            </form>
            {% else %}
            <div class="ui ignored info attached message">
                <p>登录后即可评论 &nbsp;&nbsp;&nbsp;<a href="{% url 'users:login' %}?next={{ request.path }}">马上登录</a></p>
            </div>
            {% endif %}
            <h3 class="ui dividing header" id="id_comment_label">评论</h3>
            <div class="comment-list"></div>
        </div>
    </div>
    <div class="six wide column">
        {% include "video/recommend.html" %}
        {% include "video/ad.html" %}
    </div>
</div>
{% endblock content %}

{% block javascript %}

<script>
var comments_url = "{% url 'comment:get_comments' %}"
var video_id = {{ video.id }}
</script>

<script src="{% static 'js/dropload.js' %}"></script>
<script src="{% static 'js/load_comments.js' %}"></script>
<script src="{% static 'js/detail.js' %}"></script>
{% endblock javascript %}