{% extends 'users/_user.html' %}
{% load form_helpers %}
{% load helpers %}
{% block title %}User Preferences{% endblock %}
{% block user_content %}
<form method="post" action="">
  {% csrf_token %}
  <div class="card mb-3">
    <div class="card-header"><strong>User Preferences</strong></div>
    <div class="card-body">
      {% for field in form.visible_fields %}
      {% render_field field %}
      {% endfor %}
      {% if table_preferences %}
      <div class="row mb-3">
        <label class="col-sm-3 col-form-label"><strong>Table Preferences</strong></label>
        <div class="col-sm-9">
          <table class="table table-striped table-sm mb-0">
            <thead>
              <tr>
                <th class="min-width"><input type="checkbox" class="toggle form-check-input" title="Toggle all"></th>
                <th>Table</th>
                <th>Columns</th>
              </tr>
            </thead>
            <tbody>
              {% for pref in table_preferences %}
              <tr>
                <td class="min-width"><input class="form-check-input" type="checkbox" name="clear_table_preferences" value="{{ pref.key }}" id="clear_{{ pref.key }}"></td>
                <td><code>{{ pref.table_name }}</code></td>
                <td><code>{{ pref.value }}</code></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="text-end mb-3">
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>
{% endblock %}
{% block javascript %}
<script>
  $(document).ready(function() {
    $('.toggle').on('click', function() {
      var table = $(this).closest('table');
      var checkboxes = table.find('input[type="checkbox"][name="clear_table_preferences"]');
      checkboxes.prop('checked', $(this).prop('checked'));
    });
  });
</script>
{% endblock %}