{% extends "bee_django_course/base.html" %}
{% load bee_django_course_filter %}
{% block content %}
    <div class="col-md-12">
        <h4>课程详情</h4>

        {% if perms.bee_django_course.view_all_courses %}
            <a href="{% url 'bee_django_course:course_update'  course.id %}">修改课程</a>
        {% endif %}
        <table class="table">
            <tr>
                <td>显示状态</td>
                <td>{% course_status course.status %}</td>
            </tr>
            <tr>
                <td class="col-xs-3">名称</td>
                <td>{{ course.name }}</td>
            </tr>
            <tr>
                <td>副标题</td>
                <td>{{ course.subtitle|default:"" }}</td>
            </tr>
            <tr>
                <td>level</td>
                <td>{{ course.level }}</td>
            </tr>

            <tr>
                <td>配图</td>
                <td>
                    {% if course.image %}
                        <img src="{{ course.image.url }}" class="img-thumbnail img-responsive" style="height:200px;"/>
                    {% else %}
                        无
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>

    <div class="col-md-6">
        <h4>添加课件</h4>

        <form method="post" action="{% url 'bee_django_course:course_section_mid_add' course.id %}">
            {% csrf_token %}
            {% load bootstrap3 %}
            {% bootstrap_form form layout='horizontal' %}
{#            {% bootstrap_form form %}#}
            {% bootstrap_button '添加' %}
        </form>
    </div>
    <div class="col-md-12">
        <h4>包含的课件</h4>
        <table class="table" id="section-list">
            <thead>
            <tr>
                <th>顺序</th>
                <th>前缀</th>
                <th>课件</th>
                <th>获得</th>
                <th>移除</th>
            </tr>
            </thead>
            <tbody>
            {% for mid in mid_list %}
                <tr>
                    <td>{{ mid.order_by }}</td>
                    <td>{{ mid.pre_name | default:'' }}</td>
                    <td>{{ mid.section.name }}</td>
                    <td>
                        {{ mid.points|default:0 }}
                    </td>
                    <td>
                        <a href="{% url 'bee_django_course:update_coursesectionmid' mid.id %}" class="btn btn-default">修改</a>
                        <a href="#" class="btn btn-danger remove-section"
                           data-confirm="{% url 'bee_django_course:delete_courseectionmid' mid.id %}">移除</a>
                    </td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $(document).ready(function () {
            $('#id_section').select2(
                {placeholder: '输入课件标题'}
            );
            $(".remove-section").click(function (e) {
                e.preventDefault();
                if (confirm("此操作同时会删除用户对应的学习记录，是否继续？")) {
                    var url = $(this).attr('data-confirm');
                    var _this_tr = $(this).parent().parent();
                    $.post(url).done(function (data) {
                        alert('操作成功');
                        _this_tr.remove();
                    })
                }
            })
        })
    </script>
{% endblock %}