{% if not request.headers.get("Hx-Request") %}
  {% extends "base.html" %}
{% endif %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" id="nav-breadcrumb" hx-swap-oob="true">
  <ul>
    <li>System</li>
    <li><a href="#" hx-target="#body-main" hx-get="{{ request.path }}">Groups</a></li>
  </ul>
</nav>
{% endblock breadcrumb %}

{% block body %}

<h5>Groups</h5>

<div class="grid split-grid">
  <article class="hide-below-lg">
    <hgroup>
      <h6>Groups object</h6>
      <p>Create an object by defining a unique name.</p>
    </hgroup>
    <form hx-disable _="on submit
        halt the event
        add @disabled to <fieldset/> in me
        if $names does not contain #group.value and #group.value is not empty
          append #group.value to $names
          render #group-template with (name: #group.value, members: [], newGroup: true)
          put the result at the end of #user-groups
          call htmx.process(#user-groups)
          add @hidden to .no-user-groups
          transition .user-group's opacity to 1 over 175ms
        end
        remove @disabled from <fieldset/> in me
      end">
      <fieldset>
        <input autocomplete="off" id="group" name="group" type="text" placeholder="New group name" />
        <button type="submit">Create</button>
      </fieldset>
    </form>
  </article>
  <article>
  {% include "system/includes/users/groups.html" %}
  </article>
</div>


{% endblock body %}