{% extends "social/base.html" %}

{% from "social/macros.html" import render_field %}

{% block content %}
  <h2>{{ _("Create a new group") }}</h2>

  <form action="{{ request.path }}" method="POST" class="form-horizontal" id="edit-form">
    {{ form.csrf }}

    <fieldset>
      {%- for field in form %}
        {{ render_field(field) }}
      {%- endfor %}
    </fieldset>

    <div class="form-actions">
      {%- if for_new %}
        <button type="submit" class="btn btn-primary" name="_action" value="add">Add new</button>
        <button type="submit" class="btn cancel" name="_action" value="cancel">Cancel</button>
      {%- else %}
        <button type="submit" class="btn btn-primary" name="_action" value="save">Save changes</button>
        <button type="submit" class="btn cancel" name="_action" value="cancel">Cancel</button>
      {%- endif %}
    </div>

  </form>

  {%- if rules %}
    <script>
      $(document).ready(function () {
        var rules = {{ rules }};

        // Make bold labels for required fields
        $("label").each(function (i, e) {
          var for_ = $(e).attr("for");
          if (rules[for_] && rules[for_].required) {
            $(e).addClass("required");
          }
        });

        // Activate valitation plugin
        $("#edit-form").validate({
          /* debug: true, */
          rules: rules,
          highlight: function (label) {
            $(label).closest('.form-group').addClass('error');
          },
          unhighlight: function (label) {
            $(label).closest('.form-group').removeClass('error');
          },
        });
      });
    </script>
  {%- endif %}

{% endblock %}
