{% extends "base.html" %}

{% block body %}
{% include "partials/header.html" %}

<div class="section" style="padding-top:0">
  <div class="section-title"><span>Gestion des utilisateurs</span></div>

  <table class="users-table" id="users-table" style="width:100%;border-collapse:collapse;font-size:13px">
    <thead>
      <tr style="border-bottom:1px solid var(--border);text-align:left">
        <th style="padding:8px 6px">Avatar</th>
        <th style="padding:8px 6px">Nom</th>
        <th style="padding:8px 6px">Couleur</th>
        <th style="padding:8px 6px">Admin</th>
        <th style="padding:8px 6px">Mot de passe</th>
        <th style="padding:8px 6px"></th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr data-user-id="{{ u.id }}" style="border-bottom:1px solid var(--border)">
        <td style="padding:6px">
          <div class="task-avatar" style="background:{{ u.color }};width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700">{{ u.name[0]|upper }}</div>
        </td>
        <td style="padding:6px"><input type="text" class="u-name" value="{{ u.name }}" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px"><input type="text" class="u-color" value="{{ u.color }}" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px;text-align:center"><input type="checkbox" class="u-admin" {% if u.is_admin %}checked{% endif %}></td>
        <td style="padding:6px"><input type="password" class="u-password" placeholder="(inchangé)" autocomplete="new-password" style="width:100%"></td>
        <td style="padding:6px;white-space:nowrap">
          <button class="btn-edit btn-save-user" onclick="saveUser(this)">Enregistrer</button>
          <button class="btn-edit btn-delete-user" onclick="prepareDeleteUser(this)">Supprimer</button>
        </td>
      </tr>
      {% endfor %}
      <tr style="border-top:2px solid var(--border)"><td colspan="6" style="padding:8px 6px 4px 6px;font-size:11px;color:var(--dimmed);text-transform:uppercase;letter-spacing:0.5px;font-weight:600">Nouvel utilisateur</td></tr>
      <tr id="users-add-row" style="border-bottom:1px solid var(--border);background:var(--bg)">
        <td style="padding:6px"></td>
        <td style="padding:6px"><input type="text" id="new-name" placeholder="Nom" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px"><input type="text" id="new-color" placeholder="#0969da ou var(--accent)" autocomplete="off" style="width:100%"></td>
        <td style="padding:6px;text-align:center"><input type="checkbox" id="new-admin"></td>
        <td style="padding:6px"><input type="password" id="new-password" placeholder="Mot de passe" autocomplete="new-password" style="width:100%"></td>
        <td style="padding:6px"><button class="btn btn-save" id="users-create-btn" onclick="createUser()">Créer</button></td>
      </tr>
    </tbody>
  </table>
</div>

{% endblock %}

{% block scripts %}
<script>
let _userDeleteId = null;

async function saveUser(btn) {
  const tr = btn.closest('tr');
  const id = tr.dataset.userId;
  const body = {
    name: tr.querySelector('.u-name').value,
    color: tr.querySelector('.u-color').value,
    is_admin: tr.querySelector('.u-admin').checked,
  };
  const pwd = tr.querySelector('.u-password').value;
  if (pwd) body.password = pwd;
  try {
    await apiCall('/api/v1/users/' + id, {
      method: 'PATCH',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    location.reload();
  } catch (e) { /* error popup already shown by apiCall */ }
}

function prepareDeleteUser(btn) {
  _userDeleteId = btn.closest('tr').dataset.userId;
  confirmDelete(btn, deleteUser);
}

async function deleteUser() {
  if (!_userDeleteId) return;
  try {
    await apiCall('/api/v1/users/' + _userDeleteId, {method: 'DELETE'});
    location.reload();
  } catch (e) { /* popup shown */ }
}

async function createUser() {
  const body = {
    name: document.getElementById('new-name').value,
    color: document.getElementById('new-color').value,
    is_admin: document.getElementById('new-admin').checked,
  };
  const pwd = document.getElementById('new-password').value;
  if (pwd) body.password = pwd;
  if (!body.name || !body.color) {
    showError('Validation', 'Nom et couleur requis');
    return;
  }
  try {
    await apiCall('/api/v1/users', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body),
    });
    location.reload();
  } catch (e) { /* popup shown */ }
}
</script>
{% endblock %}