{% extends "bee_django_course/user_base.html" %}
{% load bee_django_course_filter %}
{% load bootstrap3 %}
{% block styles %}
    <style>
        img {
            max-width: 100%;
        }
    </style>

{% endblock %}
{% block content %}
    <div>
        <a href="{% url 'bee_django_course:custom_user_course_detail' usercoursesection.user_course.id %}"
           class="btn btn-default">返回</a>
        {% next_user_course_section usercoursesection as next_ucs %}
        {% if next_ucs %}
            <a href="{% url 'bee_django_course:custom_user_course_section_detail' next_ucs.id %}"
               class="btn btn-default" style="float:right;">下一节</a>
        {% endif %}
    </div>

    <div class="text-center"><h4>{{ usercoursesection.section.name }}</h4></div>


    {% for e in usercoursesection.section.sectionvideo_set.all %}
        {% include 'bee_django_course/custom_user/_video.html' %}
    {% endfor %}


    <div class="info">
        {{ usercoursesection.section.info |default:""| safe }}
    </div>
    {% for attach in usercoursesection.section.sectionattach_set.all %}
        <hr>
        <div>
            <span class="text-danger">【教材】</span>
            <a href="{{ attach.file.url }}">
                {{ attach.file_name }}
            </a>
        </div>
    {% endfor %}
    <hr>
    {% if user and user.is_pause %}
    {% else %}
        {% 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>
            {% if  request.user == usercoursesection.user_course.user %}
                <a href="{% url 'bee_django_course:custom_user_live_page' request.user.id %}"
                   class="btn btn-info">去练习</a>
            {% endif %}
        {% endif %}

        {% if usercoursesection.section.has_questionwork %}
            <h5>问答作业：回答问题</h5>
        {% endif %}

        {% if usercoursesection.section.has_to_finish_course_video %}
            <h5>看视频作业：需看完所有视频</h5>
        {% endif %}

        {% if usercoursesection.section.pass_cooldown > 0 %}
            <h5>其他要求：距离上一课件通过，需要间隔{{ usercoursesection.section.pass_cooldown }}天</h5>
        {% endif %}

        {% if request.user == usercoursesection.user_course.user %}
            {% if usercoursesection.section.has_imagework or usercoursesection.section.has_textwork %}
                <a href="{% url 'bee_django_course:user_assignment' ucs_id=usercoursesection.id %}"
                   class="btn btn-info">去做作业</a>
            {% endif %}

            {% if usercoursesection.section.has_questionwork %}
                <h5>需要答题</h5>
                {% if usercoursesection.question_passed %}
                    <h5>
                        已通过答题
                    </h5>

                    {% for question in questions %}
                        <div><b>{{ forloop.counter }}. {{ question.question }}</b></div>
                        {% get_user_question_answer question user as records %}
                        我的答案：
                        {% for record in records %}
                            {{ record.answer.option }}
                            {% if not  forloop.last %},{% endif %}
                        {% endfor %}
                    {% endfor %}
                    {% for record in my_questions %}


                    {% endfor %}
                {% else %}
                    <h5>
                        <a href="{% url 'bee_django_course:question_answer' usercoursesection.id %}"
                           class="btn btn-default">去答题</a>
                    </h5>
                {% endif %}
            {% endif %}
        {% endif %}
    {% endif %}

    {% if user and user.is_pause %}

    {% else %}
        <hr>
        <form method="post" action="">
            {% csrf_token %}
            {% bootstrap_form note_form %}
            {% bootstrap_button '提交' %}
        </form>
    {% endif %}
    <hr>
    <ul class="nav nav-tabs" id="section_notes">

        <li class="active"><a href="#other_notes" data-toggle="tab">全部笔记</a></li>
        <li><a href="#my_note" data-toggle="tab">我的笔记</a></li>
    </ul>

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

{% endblock content %}

{% block scripts %}
    <script>
        window.addEventListener('DOMContentLoaded', function (e) {

            // or, to resize all iframes:
            var iframes = document.querySelectorAll("iframe");
            for (var i = 0; i < iframes.length; i++) {
                resizeIFrameToFitContent(iframes[i]);
            }
        });

        function resizeIFrameToFitContent(iFrame) {

            {#        iFrame.width = iFrame.contentWindow.document.body.scrollWidth;#}
            var _div = document.getElementsByClassName("video_div")[0];
            var width = _div.offsetWidth;
            var height = (9.0 / 16) * width;
            iFrame.height = height;
        }
    </script>
{% endblock %}