{% extends "bee_django_course/base.html" %}
{% load bee_django_course_filter %}
{% load bootstrap3 %}
{% block content %}

    <h4>{{ usercoursesection.section.name }}</h4>


    {% for e in usercoursesection.section.sectionvideo_set.all %}
        <div class="video">
            {{ e.video.title }}
            {% if video_provider_name == 'cc' %}
                <iframe src="{{ e.video.video_id | get_video_src }}" frameborder="0" width="100%"
                        height="100%"></iframe>
            {% elif video_provider_name == 'qiniu' %}
                <div align="center" class="embed-responsive embed-responsive-16by9">
                    <video width='320' height='240' controls class="embed-responsive-item"
                           data-url="{% url 'bee_django_course:ucs_video_finished' ucs_id=usercoursesection.id video_id=e.video.id %}"
                           {% has_user_watched_this_video usercoursesection e.video.id as video_record %}
                           {% if video_record %}
                           {% else %}
                            onended="course_video_finished($(this))"
                           {% endif %}
                    >
                        <source src="{{ e.video.file_name | get_qiniu_video_src }}" type="video/mp4">
                        你的浏览器不支持video标签.
                    </video>
                </div>
            {% endif %}
            {{ e.video.info |default:"" | linebreaks }}
        </div>
    {% endfor %}

    <br/>
    <div>
        {{ usercoursesection.section.info | safe }}
    </div>
    <hr>
    <div><h4>附件：</h4></div>
    {% for attach in usercoursesection.section.sectionattach_set.all %}
        <div>
            <span class="text-danger">教材：</span>
            <a href="{{ attach.file.url }}">
                {{ attach.file_name }}
            </a>
        </div>
    {% endfor %}
    <hr>
    <div><h4>要求：</h4></div>
    {% if usercoursesection.section.has_textwork %}
        <h5>{{ usercoursesection.section.textwork_info }}</h5>
    {% endif %}

    {% if usercoursesection.section.has_imagework %}
        <h5>需要上传{{ usercoursesection.section.image_count_req }}张图片</h5>
    {% endif %}

    {% if usercoursesection.section.has_videowork %}
        <h5>需要录制{{ usercoursesection.section.video_length_req }}分钟的作业</h5>
    {% endif %}
    {% if usercoursesection.section.has_questionwork %}
        <h5>需要答题</h5>
    {% endif %}
    <hr>

    <ul class="nav nav-tabs" id="section_notes">
        <li class="active"><a href="#all_notes" data-toggle="tab">全部笔记</a></li>
        <li><a href="#my_note" data-toggle="tab">我的笔记</a></li>
    </ul>

    <div class="tab-content">
        <div id="all_notes" class="tab-pane active">
            {% include "bee_django_course/user/section_notes.html" with notes=all_notes %}
            {% bootstrap_pagination all_notes %}
        </div>
        <div id="my_note" class="tab-pane">
            {% include "bee_django_course/user/section_notes.html" with notes=my_notes %}
            {% bootstrap_pagination my_notes %}
        </div>
    </div>

{% endblock content %}

{% block scripts %}
    <script type="text/javascript">
        {# 将课件视频观看结束的消息上报给服务器 #}
        function course_video_finished(t) {
            var url = t.attr('data-url');
            $.post(url).done(function () {
                console.log('观看记录已保存');
            })
        }
    </script>
{% endblock scripts %}