<head>
    <link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='videojs.css') }}">
</head>
{% extends "base.html" %}
{% block content %}
<div style="margin-top: 2em;" class="ui one column centered grid">
    <video class="video-js vjs-default-skin" 
           data-setup='{ "playbackRates": [0.5, 1, 1.25,1.5, 2] }' 
           width="720" height="420" 
           controls
           preload="auto">
           
        <source src="/stream?v={{video.id}}" type="video/mp4">
    </video>
</div>

<div style="margin-top: 2em;" class="ui one column center aligned grid">
    <h2 class="ui header">{{video.title}}</h2></a>
</div>

<div style="margin-top: 2em;" class="ui center aligned grid">
    <div class="two wide column">
        <a target="_blank" href="{{ url_for('channel', id=video.channelId)}}" class="ui label">
            {%if video.author.__len__() > 8%}
                <i class="user icon"></i> {{video.author[0:10]+'...'}}
            {%else%}
                <i class="user icon"></i> {{video.author}}
            {%endif%}
        </a>
    </div>
    <div class="two wide column">
        <div class="ui label">
            <i class="eye icon"></i>{{video.viewCount}}
        </div>
    </div>
    <div class="two wide column">
        <div class="para-light-grey">
            <div class="para-green" style="height:12px;width:{{video.averageRating.split(".")[0]}}%"></div>
        </div>
        <div class="label"> Rating: {{video.averageRating[0:4]}}% <i class="green thumbs up icon"></i></div>
    </div>
</div>



<div style="margin-top: 2em;" class="ui one column center aligned grid">
    <div style="margin-bottom: 2em;" class="ui comments">
        <h3 class="ui dividing header">Description</h3>
        {{video.description}}
    </div>
</div>
<script src="{{ url_for('static',filename='videojs.js') }}"></script>
{% endblock %}