{% extends "course/base.html" %}

{% block two_col_media %}
  {{ form.media.css }}
  <style type="text/css">
    .field-order, .field-title, .field-points {
      display: inline-flex;
    }
    .form-header {
      margin-bottom: 0.5em;
    }
  </style>
{% endblock %}

{% block js_media %}
  {{ form.media.js }}
  <script>
    $(function() {
      $('select').each(function() {
        var selectedValues = $(this).val();

        $(this).select2();

        $(this).val(selectedValues);
      });
    });
  </script>
{% endblock %}

{% block middle_content %}
  <form method="post">
    {% csrf_token %}
    {{ formset.management_form }}

    {% for lesson_form in formset %}
      {% set ns = namespace(problem_formset_has_error=false) %}

      {% if lesson_form.instance.id %}
        {% set problem_formset = problem_formsets[lesson_form.instance.id] %}
        {% for form in problem_formset %}
          {% if form.errors %}
            {% set ns.problem_formset_has_error = true %}
            {% break %}
          {% endif %}
        {% endfor %}
      {% endif %}
      <h3 class="toggle {{'open' if lesson_form.errors or ns.problem_formset_has_error else 'closed'}} form-header">
        <i class="fa fa-chevron-right fa-fw"></i>
        {% if lesson_form.title.value() %}
          {{lesson_form.order.value()}}. {{lesson_form.title.value()}}
        {% else %}
          + {{_("Add new")}}
        {% endif %}
      </h3>
      <div class="toggled" style="{{'display: none;' if not lesson_form.errors and not ns.problem_formset_has_error}} margin-bottom: 1em">
        {{lesson_form.id}}
        {% if lesson_form.errors %}
          <div class="alert alert-danger alert-dismissable">
            <a href="#" class="close">x</a>
            {{_("Please fix below errors")}}
          </div>
        {% endif %}
        {% for field in lesson_form %}
          {% if not field.is_hidden %}
            <div style="margin-bottom: 1em;">
              {{ field.errors }}
              <label for="{{field.id_for_label }}"><b>{{ field.label }}{% if field.field.required %}<span class="red"> * </span>{% endif %}:</b> </label>
              <div class="org-field-wrapper field-{{field.name}}" id="org-field-wrapper-{{field.html_name}}">
                {{ field }}
              </div>
              {% if field.help_text %}
                <small class="org-help-text"><i class="fa fa-exclamation-circle"></i> {{ field.help_text|safe }}</small>
              {% endif %}
            </div>
          {% endif %}
        {% endfor %}

        <!-- Problems Table -->
        {% if problem_formset %}
          {{ problem_formset.management_form }}
          <table class="table">
            <thead>
              <tr>
                {% for field in problem_formset.forms.0 %}
                  {% if not field.is_hidden %}
                    <th class="problems-{{field.name}}">
                      {{field.label}}
                    </th>
                  {% endif %}
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for form in problem_formset %}
                <tr>
                  {% for field in form %}
                    <td class="problems-{{field.name}}" title="{{ field.help_text|safe if field.help_text }}" style="{{ 'display:none' if field.is_hidden }}">
                      {{field}}<div class="red">{{field.errors}}</div>
                    </td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
        <hr/>
      </div>
    {% endfor %}
    <input type="submit" value="{{_('Save')}}" style="float: right">
  </form>
{% endblock %}