{% load static %}
<!-- Edit Package Permission -->
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Grant or Revoke Permissions</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          Modify permissions for this package. Note that if you give
          <code>write</code> permissions to a user or group,
          <code>read</code> permissions will be granted automatically.
          <br />
          To allow users to perform destructive actions, such as deleting the
          package, <code>owner</code>
          permissions must be granted.
        </p>

        <div class="row">
          <div class="col-xs-4">
            <legend>User or Group</legend>
          </div>
          <div class="col-xs-2">
            <legend>Read</legend>
          </div>
          <div class="col-xs-2">
            <legend>Write</legend>
          </div>
          <div class="col-xs-2">
            <legend>Owner</legend>
          </div>
        </div>

        <div class="row">
          <form
            id="modal-form-permissions"
            class="form-inline"
            role="form"
            accept-charset="UTF-8"
            action=""
            data-remote="true"
            method="post"
          >
            {% csrf_token %}
            <div class="col-xs-4">
              <select
                id="select_grantee"
                name="grantee"
                data-actions-box="true"
                class="selPackages"
                data-width="100%"
              >
                <option disabled selected>User</option>
                {% for u in users %}
                  <option value="{{ u.url }}">{{ u.username }}</option>
                {% endfor %}
                <option disabled>Groups</option>
                {% for g in groups %}
                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-xs-2">
              <input type="checkbox" name="read" id="read_new" />
            </div>
            <div class="col-xs-2">
              <input type="checkbox" name="write" id="write_new" />
            </div>
            <div class="col-xs-2">
              <input type="checkbox" name="owner" id="owner_new" />
            </div>
            <div class="col-xs-2">
              <button
                type="submit"
                style="width:60%;"
                class="btn col-xs-2 modify-perm-button"
              >
                <span class="glyphicon glyphicon-plus"></span>
              </button>
            </div>
          </form>
        </div>
        <p></p>
        {% for up in user_permissions %}
          <div class="row">
            <form
              id="modal-form-permissions_{{ up.user.uuid }}"
              class="form-inline"
              role="form"
              accept-charset="UTF-8"
              action=""
              data-remote="true"
              method="post"
            >
              {% csrf_token %}
              <div class="col-xs-4">
                {{ up.user.username }}
                <input type="hidden" name="grantee" value="{{ up.user.url }}" />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="read"
                  id="read_{{ up.user.uuid }}"
                  {% if up.has_read %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="write"
                  id="write_{{ up.user.uuid }}"
                  {% if up.has_write %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="owner"
                  id="owner_{{ up.user.uuid }}"
                  {% if up.has_all %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <button
                  type="submit"
                  style="width:60%;"
                  class="btn col-xs-2 modify-perm-button"
                >
                  <span class="glyphicon glyphicon-ok"></span>
                </button>
              </div>
            </form>
          </div>
        {% endfor %}
        <p></p>
        {% for gp in group_permissions %}
          <div class="row">
            <form
              id="modal-form-permissions_{{ gp.user.uuid }}"
              class="form-inline"
              role="form"
              accept-charset="UTF-8"
              action=""
              data-remote="true"
              method="post"
            >
              {% csrf_token %}
              <div class="col-xs-4">
                {{ gp.group.name|safe }}
                <input
                  type="hidden"
                  name="grantee"
                  value="{{ gp.group.url }}"
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="read"
                  id="read_{{ gp.group.uuid }}"
                  {% if gp.has_read %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="write"
                  id="write_{{ gp.group.uuid }}"
                  {% if gp.has_write %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <input
                  type="checkbox"
                  name="owner"
                  id="owner_{{ gp.group.uuid }}"
                  {% if gp.has_all %}checked{% endif %}
                />
              </div>
              <div class="col-xs-2">
                <button
                  type="submit"
                  style="width:60%;"
                  class="btn col-xs-2 modify-perm-button"
                >
                  <span class="glyphicon glyphicon-ok"></span>
                </button>
              </div>
            </form>
          </div>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          Close
        </button>
        <button
          type="button"
          class="btn btn-primary"
          id="edit-package-modal-submit"
        >
          Update
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  function checkboxClick() {
    // id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
    parts = this.id.split("_");
    perm = parts[0];
    id = parts[1];

    readbox = "#read_" + id;
    writebox = "#write_" + id;
    ownerbox = "#owner_" + id;

    if (perm == "read" && !$(readbox).prop("checked")) {
      $(writebox).prop("checked", false);
      $(ownerbox).prop("checked", false);
    }

    if (perm == "write") {
      if ($(writebox).prop("checked")) {
        $(readbox).prop("checked", true);
      }
      if (!$(writebox).prop("checked")) {
        $(ownerbox).prop("checked", false);
      }
    }

    if (perm == "owner") {
      if ($(ownerbox).prop("checked")) {
        $(readbox).prop("checked", true);
        $(writebox).prop("checked", true);
      }
    }
  }

  $(function () {
    $("#edit-package-modal-submit").click(function (e) {
      e.preventDefault();
      $("#edit-package-modal-form").submit();
    });

    $("#select_grantee").selectpicker();

    // Add click functions to permission checkboxes
    $('[id^="read_"]').on("click", checkboxClick);
    $('[id^="write_"]').on("click", checkboxClick);
    $('[id^="owner_"]').on("click", checkboxClick);
  });
</script>