{% extends "tablon/base.html" %}
{% load bootstrap %}
{% block extra_header %}
{{ block.super }}
<script type="text/javascript">
  <!--
  function addEncuesta() {
    $('#encuesta').removeClass('hidden');
    $('#addEncuesta').addClass('hidden');
    $('#delEncuesta').removeClass('hidden');
    return false;
  }
  function delEncuesta() {
    $('#encuesta').addClass('hidden');
    $('#addEncuesta').removeClass('hidden');
    $('#delEncuesta').addClass('hidden');
    return false;
  }
  function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
  }
  
  function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first').clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
      updateElementIndex(this, prefix, formCount);
      $(this).val('');
    });
    $(row).find('.delete-row').click(function() {
      deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;
  }

  function deleteForm(btn, prefix) {
    $(btn).parents('.dynamic-form').remove();
    var forms = $('.dynamic-form');
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
    for (var i=0, formCount=forms.length; i<formCount; i++) {
      $(forms.get(i)).children().not(':last').children().each(function() {
          updateElementIndex(this, prefix, i);
      });
    }
    return false;
  }

  -->
</script>
{% endblock %}
{% block page-header %}Nuevo tema{% endblock %}
{% block tablon %}
<ul class="breadcrumb">
  <li><a href="/tablon/">Lista de foros</a> <span class="divider">/</span></li>
  <li><a href="/tablon/foro/{{ foro.id }}">{{ foro.nombre }}</a></li>
</ul>

<form method="post" class="form" action="../nuevo_tema/">
  {{ form|bootstrap }}
  <div id="encuesta" class="hidden">
    <h4>Encuesta</h4>
  </div>
  <div class="btn-toolbar">
    <button class="btn btn-primary" type="submit">Enviar tema</button>
    <a class="btn" href="../">Cancelar</a>
    <a id="addEncuesta" class="btn" href="#" onclick="addEncuesta()">Añadir encuesta</a>
    <a id="delEncuesta" class="hidden btn" href="#" onclick="delEncuesta()">Borrar encuesta</a>
  </div>
</form>
{% endblock %}