{% extends "bee_django_course/base.html" %}
{% load bootstrap3 %}
{% load bee_django_course_filter %}
{% block styles %}
    <style>
        .section_info img {
            max-width: 100%;
        }
    </style>
{% endblock %}
{% block content %}
    <h4>课程详情</h4>

    <a href="{% url 'bee_django_course:section_update'  section.id %}">修改课件</a>
    <table class="table">
        <tr>
            <td class="col-xs-3">配图</td>
            <td>
                {% if section.image %}
                    <img src="{{ section.image.url }}" class="img-thumbnail img-responsive" style="width:100px;"/>
                {% else %}
                    无
                {% endif %}
            </td>
        </tr>
        <tr>
            <td class="col-xs-3">名称</td>
            <td>{{ section.name }}</td>
        </tr>

        <tr>
            <td class="col-xs-3">要求</td>
            <td>
                <div>{% if section.has_videowork %}直播{{ section.video_length_req }}分钟{% endif %}</div>
                <div>{% if section.has_imagework %}上传{{ section.image_count_req }}张图片{% endif %}</div>
                <div>{% if section.has_questionwork %}正确回答问卷问题{% endif %}</div>
            </td>
        </tr>
        <tr>
            <td class="col-xs-3">达到上述要求后是否自动通过</td>
            <td>{{ section.get_auto_pass_text }}</td>
        </tr>
        <tr>
            <td class="col-xs-3">文字作业</td>
            <td>{% if section.has_textwork %}{{ textwork_info }}{% else %}无{% endif %}</td>
        </tr>
        <tr>
            <td>说明</td>
            <td>
                <div class="section_info">
                    {{ section.info | safe }}
                </div>
            </td>
        </tr>
        <tr>
            <td>已添加的附件</td>
            <td>
                {% for e in attachs %}
                    <a href="{{ e.file.url }}">
                        {{ e.file_name }}
                    </a>
                {% endfor %}
            </td>
        </tr>
        <tr>
            <td>已关联的视频</td>
            <td>
                {% for e in section.sectionvideo_set.all %}
                    <div id="{{ e.id }}">
                        {{ e.order }} -
                        <a href="{% url 'bee_django_course:video_detail' pk=e.video.id %}">{{ e.video.title }}</a>
                        <a href="{% url 'bee_django_course:update_section_video_order' section_video_id=e.id %}">修改排序</a>
                        <a href="#" class="remove_video_button"
                           data-confirm="{% url 'bee_django_course:remove_section_video' e.id %}">解除关联</a>
                    </div>
                {% endfor %}
            </td>
        </tr>
        <tr>
            <td>测试问卷</td>
            <td>

                <a href="{% url 'bee_django_course:section_question' section.id %}">
                    {% if section.get_questions|length > 0 %}
                        查看:{{ section.get_questions|length }}问题
                    {% else %}
                        添加
                    {% endif %}
                </a>
            </td>
        </tr>
    </table>

    <div class="well">
        <h4>添加关联的视频</h4>
        <form method="post" action="{% url 'bee_django_course:create_section_video' section_id=section.id %}">
            {% csrf_token %}
            {% bootstrap_form section_video_form %}
            {% bootstrap_button '提交' %}
        </form>
    </div>



{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('.remove_video_button').click(function (e) {
                e.preventDefault();

                if (confirm('确定移除此视频吗?')) {
                    var url = $(this).attr('data-confirm');
                    $.post(url).done(function (data) {
                        alert(data['message']);
                        var id = data['section_video_id'];
                        $('#' + id).remove();
                    });
                }
            });
        })
    </script>
{% endblock %}