{% extends "_base.html" %}
{% load url from future %}

{% block title %}
  {{ block.super }} - Edit user preferences for {{ user }}
{% endblock %}

{% block css %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/toggle_buttons.css" media="screen" title="Normal" />
{% endblock %}

{% block javascript %}
  {{ block.super }}
  <script type="text/javascript" language="javascript" src="{{STATIC_URL}}js/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="{{STATIC_URL}}js/jquery.toggle.buttons.js"></script>
{% endblock %}


{% block content %}
  {% if updated %}
    <div class="alert alert-success">
      <strong>Saved!</strong> Your preferences has been saved
    </div>
  {% endif %}

  <h2>
    Edit user preferences
  </h2>

  <form id="preferences_form" method='post' action='.'>
    {% csrf_token %}
    <table class="table">
      {{ form }}
      <tr>
        <td></td>
        <td>
          <input class="btn" type='submit' value="Save" />
        </td>
      </tr>
    </table>
  </form>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#preferences_form").find("input:checkbox").each(function () {
        var div = $("<div/>")
          , td = $(this).closest("td");
        $(this).remove();
        td.append(div.append($(this)));
        div.toggleButtons();
      });
    });
  </script>
{% endblock %}