{% extends "base.html" %}

{% block title %}Users · LibreSignage{% endblock %}

{% block content %}
  <div class="d-flex justify-content-between align-items-start gap-3 mb-4">
    <div>
    <h1 class="mb-1">Users & permissions</h1>
    <p class="text-body-secondary mb-0">
      Admins control publishing and devices, editors manage content, and
      viewers have read-only CMS access.
    </p>
    </div>
    <a class="btn btn-outline-secondary" href="{{ url_for('auth.audit_log') }}">
      Audit log
    </a>
  </div>

  <div class="row g-4">
    <div class="col-lg-4">
      <form method="post" class="card card-body">
        <h2 class="h5">Add user</h2>
        <label class="form-label" for="username">Username</label>
        <input
          class="form-control mb-3"
          id="username"
          name="username"
          minlength="3"
          maxlength="64"
          required
        >
        <label class="form-label" for="password">Temporary password</label>
        <input
          class="form-control mb-3"
          id="password"
          name="password"
          type="password"
          minlength="12"
          autocomplete="new-password"
          required
        >
        <label class="form-label" for="role">Role</label>
        <select class="form-select mb-3" id="role" name="role">
          {% for role in roles %}
            <option value="{{ role }}">{{ role|title }}</option>
          {% endfor %}
        </select>
        <fieldset class="mb-3">
          <legend class="h6">Fleet access</legend>
          <div class="form-check">
            <input class="form-check-input" id="scope-scoped" name="scope_mode" type="radio" value="scoped" checked>
            <label class="form-check-label" for="scope-scoped">Selected groups / sites</label>
          </div>
          <div class="form-check mb-2">
            <input class="form-check-input" id="scope-global" name="scope_mode" type="radio" value="global">
            <label class="form-check-label" for="scope-global">Global fleet access</label>
          </div>
          {% for group in groups %}
            <div class="border rounded p-2 mb-2">
              <div class="form-check">
                <input class="form-check-input" id="new-group-{{ group.id }}" name="group_ids" type="checkbox" value="{{ group.id }}">
                <label class="form-check-label" for="new-group-{{ group.id }}">{{ group.name }}</label>
              </div>
              <div class="form-check ms-3">
                <input class="form-check-input" id="new-publish-{{ group.id }}" name="publish_group_ids" type="checkbox" value="{{ group.id }}">
                <label class="form-check-label" for="new-publish-{{ group.id }}">May publish this group</label>
              </div>
            </div>
          {% endfor %}
          <div class="form-check">
            <input class="form-check-input" id="new-publish-all" name="can_publish_all" type="checkbox">
            <label class="form-check-label" for="new-publish-all">May publish the global fleet</label>
          </div>
        </fieldset>
        <button class="btn btn-primary" type="submit">Add user</button>
      </form>
    </div>

    <div class="col-lg-8">
      <div class="vstack gap-3">
        {% for account in users %}
          <form
            method="post"
            action="{{ url_for('auth.update_user_route', user_id=account.id) }}"
            class="card card-body"
          >
            <div class="d-flex justify-content-between gap-3">
              <div>
                <h2 class="h5 mb-0">{{ account.username }}</h2>
                <small class="text-body-secondary">
                  Last login: {{ account.last_login_at or "Never" }}
                </small>
              </div>
              {% if account.id == g.user.id %}
                <span class="badge text-bg-primary align-self-start">You</span>
              {% endif %}
            </div>
            <div class="row g-3 align-items-end mt-1">
              <div class="col-md-4">
                <label class="form-label" for="role-{{ account.id }}">Role</label>
                <select
                  class="form-select"
                  id="role-{{ account.id }}"
                  name="role"
                >
                  {% for role in roles %}
                    <option
                      value="{{ role }}"
                      {% if role == account.role %}selected{% endif %}
                    >
                      {{ role|title }}
                    </option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-md-5">
                <label class="form-label" for="password-{{ account.id }}">
                  New password
                </label>
                <input
                  class="form-control"
                  id="password-{{ account.id }}"
                  name="password"
                  type="password"
                  minlength="12"
                  autocomplete="new-password"
                  placeholder="Leave unchanged"
                >
              </div>
              <div class="col-md-3">
                <div class="form-check mb-2">
                  <input
                    class="form-check-input"
                    id="active-{{ account.id }}"
                    name="active"
                    type="checkbox"
                    {% if account.active %}checked{% endif %}
                  >
                  <label class="form-check-label" for="active-{{ account.id }}">
                    Active
                  </label>
                </div>
              </div>
              <div class="col-12 d-flex gap-2">
                <button class="btn btn-sm btn-outline-primary" type="submit">
                  Save
                </button>
                {% if account.id != g.user.id %}
                  <button
                    class="btn btn-sm btn-outline-danger"
                    type="submit"
                    formaction="{{ url_for(
                      'auth.delete_user_route',
                      user_id=account.id
                    ) }}"
                  >
                    Delete
                  </button>
                {% endif %}
              </div>
              <fieldset class="col-12 border-top pt-3">
                <legend class="h6">Fleet scope</legend>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="scope-scoped-{{ account.id }}" name="scope_mode" type="radio" value="scoped" {% if account.scope_mode == 'scoped' and account.role != 'admin' %}checked{% endif %}>
                  <label class="form-check-label" for="scope-scoped-{{ account.id }}">Selected groups / sites</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" id="scope-global-{{ account.id }}" name="scope_mode" type="radio" value="global" {% if account.scope_mode == 'global' or account.role == 'admin' %}checked{% endif %}>
                  <label class="form-check-label" for="scope-global-{{ account.id }}">Global</label>
                </div>
                <div class="row g-2 mt-1">
                  {% for group in groups %}
                    {% set grant = permission_maps[account.id].get(group.id) %}
                    <div class="col-md-6 border rounded p-2">
                      <div class="form-check">
                        <input class="form-check-input" id="group-{{ account.id }}-{{ group.id }}" name="group_ids" type="checkbox" value="{{ group.id }}" {% if grant %}checked{% endif %}>
                        <label class="form-check-label" for="group-{{ account.id }}-{{ group.id }}">{{ group.name }}</label>
                      </div>
                      <div class="form-check ms-3">
                        <input class="form-check-input" id="publish-{{ account.id }}-{{ group.id }}" name="publish_group_ids" type="checkbox" value="{{ group.id }}" {% if grant and grant.can_publish %}checked{% endif %}>
                        <label class="form-check-label" for="publish-{{ account.id }}-{{ group.id }}">May publish</label>
                      </div>
                    </div>
                  {% endfor %}
                </div>
                <div class="form-check mt-2">
                  <input class="form-check-input" id="publish-all-{{ account.id }}" name="can_publish_all" type="checkbox" {% if account.can_publish_all %}checked{% endif %}>
                  <label class="form-check-label" for="publish-all-{{ account.id }}">May publish global fleet</label>
                </div>
              </fieldset>
            </div>
          </form>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock %}