{% macro render_fields(field, extra_field) %}
  <p>
    <label>{{ field.label }}</label>
      {{ field|safe }}

      {% if extra_field %}
        {{extra_field(**kwargs)|safe}}
      {% endif %}

      {% if field.errors or extra_field.errors %}
      <span class="error">
          {% for error in field.errors %}{{ error }}{% endfor %}
          {% for error in extra_field.errors %}{{ error }}{% endfor %}
      </span>
      {% endif %}
  </p>
{% endmacro %}

{% macro render_field(field) %}
  {{ render_fields(field, None) }}
{% endmacro %}

{% extends "layout.html" %}
{% block body %}
    <h3>neue Klausur hochladen</h3>

    <div id="upload">
      <form method="POST" enctype="multipart/form-data"
      action="{{url_for('upload', study=study, module=module)}}">
        {{ form.csrf_token }}

        {{ render_field(form.exam) }}
        {{ render_fields(form.module, form.module_new, placeholder='Modulname') }}
        {{ render_field(form.year) }}

        <p>
          <input type="submit" value="Hochladen" />
        </p>
      </form>

      <div id="module-index">
        {% if module and module_list %}
          <h4>{{module}}</h4>
          {% from 'module_show.html' import render_module_list %}
          {{ render_module_list(module_list)}}
        {% endif %}
      </div>
    </div>

  <script type="text/javascript">                                         
    $(document).ready(function() {
      var elem = $('#module_new');
      var module = $('#module');

      if(module.val() != 'new')
        elem.hide();

      module.change(function(){
        var current = $(this);
        var value = current.val();
        var text = current.find("option:selected").text();
        
        if(value == 'new') {
          $('#module-index').fadeOut('fast', function() {
            elem.fadeIn();
          });
        } else {
          elem.fadeOut('fast', function() {
            if(value != '') {
              $.get('/{{study}}/modules/' + text, function(data) {
                $('#upload div').replaceWith($(data).find('#module-index'));
              });
            } else {
                $('#module-index').fadeOut('fast');
            }
          });

        }
     }); 
    });
  </script>
{% endblock %}