{% extends "base.html" %}

{% block title %}Permissions for {{ database_name }}/{{ table_name }}{% endblock %}

{% block extra_head %}
<script src="{{ urls.static_plugins("datasette-acl", "choices-9.0.1.min.js") }}"></script>
<link rel="stylesheet" href="{{ urls.static_plugins("datasette-acl", "choices-9.0.1.min.css") }}">
<style>
#needs-save-message { 
  color: rgb(249, 114, 114);
  font-weight: bold;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  padding-left: 0.8em;
}
#needs-save-message.visible {
  opacity: 1;
}
table.audit {
  border-collapse: collapse;
}
table.audit td {
  border-top: 1px solid #aaa;
  border-right: 1px solid #eee;
  padding: 4px;
  vertical-align: top;
}
</style>
{% endblock %}

{% block content %}
<h1>Permissions for {{ database_name }}/{{ table_name }}</h1>

<p><a href=" {{ urls.table(database_name, table_name) }}">Back to table</a></p>

<form action="{{ request.path }}" method="post">
  {% if groups %}
  <h3>Groups</h3>
  {% for group in groups %}
    <div style="margin-bottom: 1em">
      <label style="display: block" for="id_group_permissions_{{ group }}"><a href="{{ urls.path("/-/acl/groups/" + group) }}">{{ group }}</a> ({{ group_sizes[group] }})</label>
      <select multiple name="group_permissions_{{ group }}" id="id_group_permissions_{{ group }}">
        {% for action in actions %}
          <option value="{{ action }}" {% if group_permissions and group_permissions.get(group, {}).get(action) %}selected{% endif %}>{{ action }}</option>
        {% endfor %}
      </select>
    </div>
  {% endfor %}
{% endif %}

<h3>Users</h3>
{% for user in user_permissions %}
  <div>
    {{ user }}
    <select multiple name="user_permissions_{{ user }}">
      {% for action in actions %}
        <option value="{{ action }}" {% if user_permissions and user_permissions.get(user, {}).get(action) %}selected{% endif %}>{{ action }}</option>
      {% endfor %}
    </select>
  </div>
{% endfor %}

<div style="margin-top: 2em">
  <label for="id_new_actor_id" style="display: block; font-size: 0.8em">Other user:</label>
  {% if valid_actors %}
    <select id="id_new_actor_id" name="new_actor_id">
      <option></option>
      {% for actor in valid_actors %}
        <option value="{{ actor[0] }}">{{ actor[1] }}</option>
      {% endfor %}
    </select>
  {% else %}
    <input data-1p-ignore placeholder="User ID" style="width: 8em" id="id_new_actor_id" name="new_actor_id">
  {% endif %}
</div>

<div>
  <label for="id_new_user_actions" style="display: block; font-size: 0.8em">Permissions for the additional user:</label>
  <select multiple name="new_user_actions" id="id_new_user_actions">
    {% for action in actions %}
      <option value="{{ action }}">{{ action }}</option>
    {% endfor %}
  </select>
</div>

<p style="margin-top: 1em">
  <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
  <input type="submit" value="Save changes" class="core">
  <span id="needs-save-message"></span>
</p>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selects = document.querySelectorAll('select');
    selects.forEach(select => {
        new Choices(select, {
            removeItemButton: true,
            containerOuter: 'choices'
        });
    });
});
</script>

{% if audit_log %}
<h2>Audit history</h2>
<table class="audit">
  <thead>
    <tr>
      <th>Date and time</th>
      <th>Operation by</th>
      <th>Operation</th>
      <th>Group</th>
      <th>User</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {% for entry in audit_log %}
      <tr>
        <td>{{ entry.timestamp }}</td>
        <td>{{ entry.operation_by }}</td>
        <td>{{ entry.operation }}</td>
        <td>{{ entry.group_name or '' }}</td>
        <td>{{ entry.actor_id or '' }}</td>
        <td>{{ entry.action_name }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

<script>
// "You have unsaved changes" message
const initialState = {};
const checkboxes = document.querySelectorAll('table input[type="checkbox"]');
const messageElement = document.getElementById("needs-save-message");

function updateInitialState() {
  checkboxes.forEach((checkbox) => {
    initialState[checkbox.name] = checkbox.checked;
  });
}

function hasStateChanged() {
  return Array.from(checkboxes).some(
    (checkbox) => initialState[checkbox.name] !== checkbox.checked,
  );
}

function updateMessage() {
  if (hasStateChanged()) {
    messageElement.textContent = "You have unsaved changes";
    messageElement.classList.add("visible");
  } else {
    messageElement.classList.remove("visible");
    setTimeout(() => {
      if (!hasStateChanged()) {
        messageElement.textContent = "";
      }
    }, 500);
  }
}

updateInitialState();

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener("change", updateMessage);
});
</script>

{% endblock %}
