enviPy-bayer/templates/modals/objects/edit_group_member_modal.html

{% load static %}
<!-- Edit Group Member -->
<dialog
  id="edit_group_member_modal"
  class="modal"
  x-data="{
    isSubmitting: false,

    reset() {
      this.isSubmitting = false;
    },

    submitForm(form) {
      if (form && form.checkValidity()) {
        form.submit();
      } else if (form) {
        form.reportValidity();
      }
    }
  }"
  @close="reset()"
>
  <div class="modal-box">
    <!-- Header -->
    <h3 class="text-lg font-bold">Add or Remove Group Member</h3>

    <!-- Close button (X) -->
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
        :disabled="isSubmitting"
      >
        ✕
      </button>
    </form>

    <!-- Body -->
    <div class="py-4">
      <p class="mb-4">
        To add member (either User or entire Groups) to this group select the
        entity you want to add below and click the check mark.
        <br />
        To remove member simply click the X button next to the member.
      </p>

      <!-- Add Member Form -->
      <form
        id="modal-form-group-member"
        accept-charset="UTF-8"
        action=""
        method="post"
        class="mb-4"
      >
        {% csrf_token %}
        <div class="flex gap-2 items-end">
          <div class="form-control flex-1">
            <label class="label">
              <span class="label-text">User or Group</span>
            </label>
            <select
              id="select_member"
              name="member"
              class="select select-bordered w-full"
              required
            >
              <optgroup label="Users">
                {% for u in users %}
                  <option value="{{ u.url }}">{{ u.username }}</option>
                {% endfor %}
              </optgroup>
              <optgroup label="Groups">
                {% for g in groups %}
                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
                {% endfor %}
              </optgroup>
            </select>
            <input type="hidden" name="action" value="add" />
          </div>
          <button type="submit" class="btn btn-primary">Add</button>
        </div>
      </form>

      <!-- User Members -->
      {% if group.user_member.all %}
        <div class="divider">User Members</div>
        <div class="space-y-2">
          {% for u in group.user_member.all %}
            <form
              id="modal-form-group-member_{{ u.uuid }}"
              accept-charset="UTF-8"
              action=""
              method="post"
            >
              {% csrf_token %}
              <div class="flex items-center gap-2">
                <span class="flex-1">{{ u.username }}</span>
                <input type="hidden" name="member" value="{{ u.url }}" />
                <input type="hidden" name="action" value="remove" />
                <button type="submit" class="btn btn-error btn-sm">
                  Remove
                </button>
              </div>
            </form>
          {% endfor %}
        </div>
      {% endif %}

      <!-- Group Members -->
      {% if group.group_member.all %}
        <div class="divider">Group Members</div>
        <div class="space-y-2">
          {% for g in group.group_member.all %}
            <form
              id="modal-form-group-member_{{ g.uuid }}"
              accept-charset="UTF-8"
              action=""
              method="post"
            >
              {% csrf_token %}
              <div class="flex items-center gap-2">
                <span class="flex-1">{{ g.name|safe }}</span>
                <input type="hidden" name="member" value="{{ g.url }}" />
                <input type="hidden" name="action" value="remove" />
                <button type="submit" class="btn btn-error btn-sm">
                  Remove
                </button>
              </div>
            </form>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
      >
        Close
      </button>
    </div>
  </div>

  <!-- Backdrop -->
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>