{% extends "base.html" %}

{% block title %}Change Favorite Charts{% endblock %}

{% block content %}
<form method="post">
  {% csrf_token %}
  <div class="grid_12 alpha">
    <div class="grid_4 alpha fav-form-header">
      <p><input type="submit" value="Update Favorites" class="button green small"/></p>
    </div>
  </div>
  {{ favorites_formset.management_form }}

  {% for favorites_form in favorites_formset %}
  <div class="fav-formset grid_4 alpha">
  <h2>Chart {{ forloop.counter }}</h2>
  <table>
    {{ favorites_form.as_table }}
  </table>
  </div>
  {% endfor %}
  <div class="grid_12 alpha">
    <p>&nbsp;</p>
  </div>
</form>



<!-- Include formset plugin - including jQuery dependency -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/static/js/jquery.formset.js"></script>
<script>
    $('.fav-formset').formset({
        addText: '<div class="grid_12">&nbsp;</div><div class="button grid_2 green small">add chart</div>',
        deleteText: '<div class="grid_12"><p>&nbsp;</p></div><div class="button grid_1 red small">remove</div>'
    });
</script>


{% endblock %}
