{% extends 'courseset-manage/courseset-layout.html.twig' %}

{% block title %}{{'course.testpaper_manage.question'|trans}} - {{ parent() }}{% endblock %}

{% set side_nav = 'testpaper' %}

{% do script(['app/js/testpaper-manage/questions/index.js']) %}

{% block main %}

<style>
tr.placeholder {
  display: block;
  background: red;
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}
tr.placeholder:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left-color: red;
    margin-top: -5px;
    left: -5px;
    border-right: none;
}
</style>
{% set questionTypesDict = getQuestionTypes() %}
<div class="panel-col" id="testpaper-items-manager">
  <div class="courseset-manage-body__title">{{testpaper.name}}</div>
  <div class="clearfix">
    {% include 'testpaper/manage/form-breadcrumb.html.twig' with {title:'course.testpaper_manage.question'|trans} %}
    <div class="clearfix mbm">
      <button data-url="{{ path('course_set_manage_question_picker',{id:courseSet.id, testpaperId:testpaper.id}) }}" class="cd-btn cd-btn-info cd-btn-sm pull-right" data-role="pick-item"><i class="cd-icon cd-icon-add cd-text-sm"></i> {{'course.testpaper_manage.question.create_btn'|trans}}</button>
      <ul class="nav nav-pills nav-mini" id="testpaper-question-nav">
        {% for type, name in questionTypesDict %}
          <li {% if loop.index == 1 %}class="active"{% endif %}><a href="javascript:" data-type="{{ type }}" data-name="{{ questionTypesDict[type] }}" class="testpaper-nav-link">{{ questionTypesDict[type] }}</a></li>
        {% endfor %}
      </ul>
    </div>
    <form  method="post" id="question-checked-form" class="form-horizontal" action="{{ path('course_set_manage_testpaper_questions',{courseSetId:courseSet.id, testpaperId:testpaper.id}) }}">
      <div id="testpaper-stats" class="color-success"></div>
      <table class="table table-striped table-hover tab-content" id="testpaper-table">
        <thead>
          <tr>
            <th></th>
            <th><input type="checkbox" data-role="batch-select"></th>
            <th width="8%">{{'course.testpaper_manage.question.seq'|trans}}</th>
            <th width="35%">{{'course.testpaper_manage.question.stem'|trans}}</th>
            <th width="10%">{{'course.testpaper_manage.question.type'|trans}}</th>
            <th width="10%">{{'course.testpaper_manage.question.difficulty'|trans}}</th>
            <th width="10%">{{'course.testpaper_manage.question.score'|trans}}</th>
            <th width="20%">{{'course.testpaper_manage.question.operation'|trans}}</th>
          </tr>
        </thead>
        {% for type, typeDict in questionTypesDict if typeDict %}
          <tbody data-type="{{ type }}" id="testpaper-items-{{ type }}" class="testpaper-table-tbody {% if loop.index != 1 %}hide{% endif %}" data-role="question-body">
            {% for question in questions[type]|default(null) if question %}
              {% if not question.isDeleted|default(null) %}
                {% include 'question-manage/question-picked-tr.html.twig' %}
                {% if question.subs|default(null) %}
                  {% for question in question.subs %}
                    {% include 'question-manage/question-picked-tr.html.twig' %}
                  {% endfor %}
                {% endif %}
              {% endif %}
            {% endfor %}
          </tbody>
        {% endfor %}
      </table>
      <p>
        <label class="inline-block vertical-top checkbox-inline"><input type="checkbox" data-role="batch-select">{{'course.testpaper_manage.question.select_all'|trans}}</label>
        <button type="button" class="cd-btn cd-btn-default cd-btn-sm mlm" data-role="batch-delete-btn"  data-name="{{'course.testpaper_manage.question.content'|trans}}">{{'course.testpaper_manage.delete_btn'|trans}}</button>
      </p>
      <p class="text-right"><button type="button" class="cd-btn cd-btn-primary js-request-save">{{'course.testpaper_manage.question.save_btn'|trans}}</button></p>
      <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
    </form>
  </div>

  <div id="testpaper-confirm-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{{'course.testpaper_manage.question.save_modal.content_title'|trans}}</h4>
        </div>
        <div class="modal-body">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>{{'course.testpaper_manage.question.save_modal.type'|trans}}</th>
                <th>{{'course.testpaper_manage.question.save_modal.number'|trans}}</th>
                <th>{{'course.testpaper_manage.question.save_modal.total_score'|trans}}</th>
              </tr>
            </thead>
            <tbody class="detail-tbody"></tbody>
          </table>

          <p class="js-subjective-remask">
            {{ 'course.testpaper_manage.question.subjective_remask_tips'|trans({'%passedScoreDefault%': passedScoreDefault})|raw }}
          </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-link" data-dismiss="modal" type="button">{{'form.btn.close'|trans}}</button>
          <button type="button" class="btn btn-primary js-confirm-submit" data-loading-text="{{'form.btn.save.submiting'|trans}}">{{'form.btn.confirm'|trans}}</button>
        </div>
      </div>
    </div>
  </div>

</div>

{% endblock %}
