{% extends 'base_index.html' %}
{% block head %}
    <script src="/static/js/ckeditor/ckeditor.js"></script>
    <script src="/static/js/ckeditor/adapters/jquery.js"></script>
{% endblock %}
{% block title %}{{ course.head.title }} / Домашнее задание{% endblock %}

  <!-- content -->
{% block content %}

    {% if exam.heaad.status == 'T' %}
        <script>
            $('[name=big_info_block]').html('Ваше задание проверяется преподавателем').fadeIn('fast')
        </script>
    {% endif %}
  <!-- main -->
  <div class="col">
    <!-- main header -->
          <div style="background:url({{ course.head.big_img }}) top right; background-size:cover">
            <div class="visible-sm visible-xs" style="background-color: rgba(0, 0, 0, 0.5);">
                <div class="wrapper-lg">
              <div class="row m-t">
                <div class="col-sm-7">
                  <div class="clear m-b">
                         <div class="panel-heading no-border" style="background: {{ course.level.background }};color:{{ course.level.color }};">
                            <span class="text-lt ">{{ course.level.title }} уровень</span>
                          </div>
                    <div class="m-b m-t-sm">
                      <span class="h1 text-warning text-u-c" style="font-weight: bold;">
                          {{ course.head.title }}
                      </span>
                    </div>
                        <div style="color: #fff;margin-bottom: 5px;">
                            <b style="margin-right: 5px;">Приобретаемые навыки:</b>
                            {% for skill in course.head.skills %}
                                <span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
    height: 10px;
    margin-right: 5px;">{% endif %}{{ skill }}</span>
                            {% endfor %}
                        </div>
                  <div style="color: #fff;">
                      {{ course.head.lessons }} урока(-ов)
                  </div>
                  </div>
                </div>
              <div class="col-sm-5" style="text-align: center;">
                        {% if course.head.progress != 0 %}
                              <div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
                                   style="text-align: center;color: #fff;">
                                  <span id="canvas_length">{{ course.head.progress }}%</span>
                              </div>
                        {% endif %}
              </div>
              </div>
            </div>
            </div>
          <div class="hidden-sm hidden-xs wrapper-lg">
              <div class="row m-t">
                <div class="col-sm-7">
                  <div class="clear m-b">
                         <div class="panel-heading no-border" style="background: {{ course.level.background }};color:{{ course.level.color }};">
                            <span class="text-lt ">{{ course.level.title }} уровень</span>
                          </div>
                    <div class="m-b m-t-sm">
                      <span class="h1 text-warning text-u-c" style="font-weight: bold;">
                          {{ course.head.title }}
                      </span>
                    </div>
                        <div style="color: #fff;margin-bottom: 5px;">
                            <b style="margin-right: 5px;">Приобретаемые навыки:</b>
                            {% for skill in course.head.skills %}
                                <span class="label font-normal text-white" style="background: {{ skill.color }}">{% if skill.mini_icon %}<img src="{{ skill.mini_icon.url }}" style="margin-top: -1px;width: 10px;
    height: 10px;
    margin-right: 5px;">{% endif %}{{ skill }}</span>
                            {% endfor %}
                        </div>
                  <div style="color: #fff;">
                      {{ course.head.lessons }} урока(-ов)
                  </div>
                  </div>
                </div>
              <div class="col-sm-5" style="text-align: center;">
                        {% if course.head.progress != 0 %}
                              <div class="chart" data-percent="{{ course.head.progress }}" data-scale-color="#fff"
                                   style="text-align: center;color: #fff;">
                                  <span id="canvas_length">{{ course.head.progress }}%</span>
                              </div>
                        {% endif %}
              </div>
              </div>
            </div>
          </div>
          <div class="wrapper bg-white b-b">
                <ul class="nav nav-pills nav-sm">
                    <li>
                        <a type="button" style="width: 100%;" class="col-lg-10 btn btn-default dropdown-toggle" href="/courses/{{ course.head.course_id }}">
                              <i class="glyphicon glyphicon-chevron-left"></i>  &nbsp;Страница курса
                          </a>
                    </li>
                    <!-- Кнопка нового урока -->
                    <li name="next_button" {% if exam.head.status.flag != 'F' %}style="display: none;"{% endif %}>
                        <a type="button" href="{{ exam.next.button.link }}{{ exam.next.obj.id }}" style="background: {{ exam.next.button.background }}; color: {{ exam.next.button.color }}"
                                    by_type="{{ exam.next.button.by_type }}"
                                    self_id="{{ exam.next.obj.id }}"
                                    course_id="{{ exam.next.obj.course.id }}">
                                {{ exam.next.button.title }} <i class="glyphicon glyphicon-chevron-right"></i>
                        </a>
                    </li>
                    <!-- Статус -->
                    <li style="float: right; padding: 6px 12px;">
                        <span style="padding: 6px 12px;font-weight: bold;">
                            <span class="label font-normal text-white bg-{{ exam.head.status.color }}" style="margin-left: 10px;font-size: 19px;{{ exam.head.status.styles }}">{{ exam.head.status.title }}<i class="{{ exam.head.status.icon }}" style="margin-right: 5px; margin-left: 10px;    top: 3px;"></i></span>
                        </span>
                    </li>

                </ul>
          </div>
        <div class="wrapper-md">
        <div class="row m-l-xs">
          <div class="panel col-lg-6 p-r-none">
            <div class="wrapper-lg">
              <h2 class="m-t-none text-black">Описание задания</h2>
              <div>
                {{ exam.head.description|safe }}
              </div>
            </div>
          </div>
          <div class="col-lg-6 pl-fix p-r-none">
            <div class="col-lg-12 p-l-none p-r-none">
                                            {% if exam.materials %}
                  <div class="col-sm-12">
                    <div draggable="true" class="panel panel-info">
                      <div class="panel-heading">
                        Материалы к заданию
                      </div>
                        {% for i in exam.materials %}
                      <div class="list-group bg-white">
                      {% if i.format == 'I' %}
                        <a href="{{ i.url }}" class="list-group-item" target="_blank" id="single_image">
                        {% else %}
                          <a href="{{ i.url }}" class="list-group-item" target="_blank">
                        {% endif %}
                            {% if i.icon_type != 'class' %}
                                <img src="{{ i.icon }}">
                            {% else %}
                                <i class="{{ i.icon }} text-lg inline text-primary"></i>
                            {% endif %}
                          <span class="clear inline">
                            <span>{{ i.title }}</span>
                            <small class="text-muted clear text-ellipsis">{{ i.name }}</small>
                          </span>
                        </a>
                      </div>
                        {% endfor %}
                    </div>
                  </div>
                {% endif %}
                          </div>
          </div>
        </div>

<div class="row">

            <a name="comment_list_place"></a>
            {% if exam.tries %}
            <h3 style="margin-bottom: 25px;margin-left: 20px;font-weight: bold;border-bottom: 1px dotted #ccc;padding-bottom: 5px;"><i class="glyphicon glyphicon-briefcase"></i>&nbsp;Попыток: (<span name="comments_length">{{ exam.tries|length }}</span>) : </h3>
            {% endif %}
              <div class="col-lg-12" name="exam_comments_block">
              {% if exam.tries %}
                        {% for try in exam.tries %}
                            <div class="m-b b-l m-l-md streamline" name="try_comments_{{ try.id }}" exam_id="{{ exam.head.mid }}">
                                    <div name="try_{{ try.id }}">
                                            <span class="pull-left thumb-sm avatar m-l-n-md">
                                            <img src="/static/img/mini_logo.png" class="img-circle"></span>
                                            <div class="m-l-lg panel b-a" style="background:#CCFFFF;">
                                            <div class="panel-heading pos-rlt b-b b-light">
                                            <span class="arrow left" style="display: none;"></span>
                                            <b>LMS: ~# </b>
                                            <span class="arrow left" style="border-right-color:#CCFFFF;"></span>
                                            <span style="font-size: 16px;color: #666;font-weight: bold;">Попытка №{{ forloop.counter }}</span>
                                                <script>window.last_try = {{ forloop.counter }}</script>

                                            <span class="text-muted m-l-sm pull-right" style="margin-top: -6px;">
                                               <span class="label font-normal text-white bg-success" style="margin-left: 10px;text-shadow: 0 0 0;font-size: 16px">
                                                    <span class="hidden-xs hidden-sm">{{ try.teacher.get_full_name }}</span>
                                                    <span class="hidden-md hidden-lg">{{ try.teacher.get_short_name }}</span>
                                                    <span class="thumb-sm avatar" style="margin-left: 10px;top: -3px;position: relative;">
                                                        <img src="{{ try.teacher.get_image_url }}" class="img-circle">
                                                    </span>
                                                </span>
                                                <span class="label font-normal text-white bg-{{ try.status.color }}" style="margin-left: 10px;font-size: 19px;font-weight: bold;{{ try.status.styles }}">
                                                    <span class="hidden-sm hidden-xs hidden-md">{{ try.status.title }}</span><i class="{{ try.status.icon }}" style="top: 3px;    margin: 0 15px;"></i>
                                                </span>

                                            </span>
                                            </div>
                                                </div>
                                            <!-- -->
                                    </div>
                                {% for comment in try.comments %}
                                    <a href="comment{{ comment.id }}"></a>
                                    <div name="comment_{{ comment.id }}">
                                            <span class="pull-left thumb-sm avatar m-l-n-md">
                                            <img src="{{ comment.owner_avatar }}" class="img-circle"></span>
                                            <div class="m-l-lg panel b-a" style="background: {% if comment.owner_type.flag == 'T' %}#f5fce5{% endif %}">
                                            <div class="panel-heading pos-rlt b-b b-light">
                                            <span class="arrow left" style="display: none;"></span>
                                            <b style="margin-right: 5px;">{{ comment.owner }}</b>
                                            <span class="arrow left" style="border-right-color: {% if comment.owner_type.flag == 'T' %}#f5fce5{% endif %}"></span>
                                            <label class="label {{ comment.owner_type.background }} m-l-xs">{{ comment.owner_type.title }}</label>
                                            <span class="text-muted m-l-sm pull-right">{{ comment.date }}</span>
                                            </div>
                                            <div class="panel-body" readable_comment="{{ comment.id }}">
                                            <div class="m-b-xs">{{ comment.text|safe }}</div>
                                            {% for file in comment.files %}
                                                <div name="message_files" message_id="{{ comment.id }}">
                                                    <div class="panel m-b-none" style="box-shadow: none; border: 1px solid rgba(0, 0, 0, 0.05); padding: 4px; margin-bottom: 3px !important;">
                                                        <a href="{{ file.url }}" target="{% if file.format == 'F' %}_blank{% endif %}" id="">
                                                            <i class="{{ file.icon }} text-primary"></i> &nbsp;{{ file.name }}
                                                        </a>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                            </div>
                                                </div>
                                            <!-- -->
                                    </div>

                                {% endfor %}
                            </div>
                        {% endfor %}
                {% endif %}
                      {% if request.user.is_authenticated %}
                          {% if exam.head.status.flag != 'N' and exam.head.status.flag != 'F'  %}
                              <div class="progress" name="sent_comment_progress" style="height: 40px;display: none;">
                                  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
                                       style="width: 100%; font-weight: bold; font-size: 15px;padding: 10px;">
                                    ОТПРАВКА КОММЕНТАРИЯ
                                  </div>
                              </div>
                                  <a name="comment_send_form_place"></a>
                                <form name="comment_send_form" onsubmit="return false" method="POST">
                                <h3 style="margin-bottom: 10px;
    margin-left: 40px;font-weight: bold;border-top: 1px dotted #ccc;padding-top: 10px;"><i class="glyphicon glyphicon-comment"></i>&nbsp;ОСТАВИТЬ СООБЩЕНИЕ <span name="reply_info"></span>: </h3>
                                   <div style="background: #ccc;
    padding: 10px;
    margin-left: 15px;
    border-radius: 20px 20px 0 0;
    text-align: center;">
                                        {% if request.user.is_authenticated and resuqest.user.in_role == 'Ts' or request.user.in_role == 'A' %}
                                            <i class="glyphicon glyphicon-wrench" style="    font-size: 40px;
    float: left;
    padding-right: 20px;"></i>
                                            <span class="btn btn-default btn-lg" onclick="CKEDITOR.instances.homework_text.setData('TEXT');send_comment('comment_send_form', 'form_file_load')">Просто отправить</span>
                                            <span class="btn btn-success btn-lg" onclick="CKEDITOR.instances.homework_text.setData('GO_TO_SUCCESS');send_comment('comment_send_form', 'form_file_load')">Заставить одобрить</span>
                                            <span class="btn btn-danger btn-lg" onclick="CKEDITOR.instances.homework_text.setData('GO_TO_FAIL');send_comment('comment_send_form', 'form_file_load')">Заставить отказать</span>
                                        {% endif %}
                                    </div>
                                <div class="clearfix" style="margin-bottom:10px;">
                                  <div class="form-group">
                                    <div class="col-sm-12 p-r-none">
                                        <input type="text" name="exam_id" readonly value="{{ exam.head.id }}" style="display: none;">
                                        <textarea style="overflow:scroll;height:200px;max-height:200px;width: 100%;border-radius:3px;font-weight: bold;padding: 15px 20px;" name="exam_text" class="form-control"></textarea>
                                    </div>
                                  </div>
                                </div>
                                <div class="form-group">
                                  <div class="col-xs-12 col-sm-12 col-md-9 p-r-none m-b-md" name="files_sketches">

                                  </div>
                                  <div class="col-xs-12 col-sm-12 col-md-3 p-r-none m-b-md">
                                    <button class="btn btn-lg btn-info m-t-xs pull-right" style="min-width: 240px;width: 100%;border-radius: 3px;" onclick="send_comment('comment_send_form', 'form_file_load')">Отправить сообщение</button>
                                  </div>

                                </div>
                                  </form>
                                <form enctype='multipart/form-data'
                                          action='/storage/upload_file/'
                                          method='post'
                                          name='load_file'
                                          id="form_file_load_form"
                                          target='hidden_frame'
                                          class="load_file" style="text-align: right; clear: right; margin-bottom: 20px;">
                                    <input type='hidden' name='MAX_FILE_SIZE' value='64000'>
                                        <input id="form_file_load" name='file_load' type='file' data-icon="false" data-classbutton="btn btn-default" data-classinput="form-control inline v-middle input-s"  tabindex="-1"
                                           style="outline: 0;background: #ffc; padding: 5px 10px;border-radius: 5px;margin: auto;position: absolute; clip: rect(0px, 0px, 0px, 0px);" sketch_place="files_sketches">
                                            <button class="btn btn-default" onclick="return false;" style="display: none;" name="form_file_load_progress">
                                                <img src="/static/img/ui-anim_basic_16x16.gif">
                                            </button>
                                                          <div class="bootstrap-filestyle input-group" name="form_file_load_button">
                                                              <span tabindex="0" class="group-span-filestyle input-group-btn" style="text-align: right;">
                                                                  <label for="form_file_load" class="btn btn-default ">
                                                                      <span><span class="glyphicon glyphicon-save-file"></span> Добавить файл</span>
                                                                  </label>
                                                              </span>
                                                          </div>
                                    <input type="text" name="clip_file_id" readonly value="0" style="display: none;">
                                </form>
                          {% endif %}
                  {% else %}
                      <p>Для работы с домашним заданием, авторизуйтесь.</p>
                  {% endif %}
                  </div>
            </div>
        </div>
      </div>
    <!-- / main header -->

  <!-- / main -->
{% include 'right_site.html' %}

  <!-- / right col -->
    <input name="exam_ID" value="{{ exam.id }}" style="display: none;">
{% endblock %}
  <!-- / content -->
{% block js %}
    <script type="text/javascript" src='/static/js/exam.js'></script>
    <!--<script type="text/javascript" src='/static/js/video_reloader.js'></script>-->
    <script>
    $(function() {
        $('.chart').easyPieChart({
                          rotate: 0,
                          lineWidth: 57,
                          trackColor: 'rgba(255,255,255,0)',
                          barColor: 'rgba(35,183,229,0.7)',
                          size: 120,
                          lineCap: 'butt',
                          animate: 1000,
                          scaleLength: 0
        });
    });
</script>
{% endblock %}