{% extends "base.html" %}
{% block title %}Users{% endblock %}
{% block page_title %}User Management{% endblock %}
{% block topbar_actions %}
  <a href="/users/new" class="btn btn-primary btn-sm">+ New User</a>
{% endblock %}

{% block content %}
<div class="table-wrap">
  <table>
    <thead>
      <tr>
        <th>Username</th>
        <th>Role</th>
        <th>Employee</th>
        <th>Status</th>
        <th>Created</th>
        <th>API Key</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr>
        <td style="font-weight:500">{{ u.username }}</td>
        <td>
          {% if u.role == 'admin' %}<span class="badge badge-pink">admin</span>
          {% elif u.role == 'staff' %}<span class="badge badge-blue">staff</span>
          {% else %}<span class="badge badge-overlay">viewer</span>{% endif %}
        </td>
        <td>
          {% if u.employee %}
            <span style="font-size:0.8125rem">{{ u.employee.name }}</span>
          {% else %}
            <span style="color:var(--overlay0)">—</span>
          {% endif %}
        </td>
        <td>
          {% if u.is_active %}<span class="badge badge-green">Active</span>
          {% else %}<span class="badge badge-red">Inactive</span>{% endif %}
        </td>
        <td style="color:var(--subtext0)">{{ u.created_at | fmt_date }}</td>
        <td>
          {% if u.api_key %}
            <code style="font-size:0.7rem;color:var(--subtext0)">{{ u.api_key[:12] }}…</code>
          {% else %}
            <span style="color:var(--overlay0)">None</span>
          {% endif %}
        </td>
        <td>
          <div class="actions">
            {% if u.id != user.id %}
            <form method="post" action="/users/{{ u.id }}/toggle-active" style="display:inline">
              <button type="submit" class="btn btn-ghost btn-sm"
                      onclick="return confirm('{{ 'Deactivate' if u.is_active else 'Activate' }} {{ u.username }}?')">
                {{ 'Deactivate' if u.is_active else 'Activate' }}
              </button>
            </form>
            {% endif %}
            <form method="post" action="/users/{{ u.id }}/regenerate-api-key" style="display:inline">
              <button type="submit" class="btn btn-ghost btn-sm"
                      onclick="return confirm('Regenerate API key for {{ u.username }}?')">
                Regen Key
              </button>
            </form>
            <button class="btn btn-ghost btn-sm"
                    onclick="document.getElementById('reset-{{ u.id }}').style.display='flex';this.style.display='none'">
              Reset PW
            </button>
            <button class="btn btn-ghost btn-sm"
                    onclick="document.getElementById('link-emp-{{ u.id }}').style.display='flex';this.style.display='none'">
              Link Employee
            </button>
          </div>
          <form id="reset-{{ u.id }}" method="post" action="/users/{{ u.id }}/reset-password"
                style="display:none;margin-top:.375rem;gap:.375rem;align-items:center">
            <input type="password" name="new_password" placeholder="New password" required
                   style="padding:.25rem .5rem;background:var(--surface0);border:1px solid var(--surface1);border-radius:.25rem;color:var(--text);font-size:.75rem;width:140px;outline:none">
            <button type="submit" class="btn btn-primary btn-sm">Set</button>
          </form>
          <form id="link-emp-{{ u.id }}" method="post" action="/users/{{ u.id }}/set-employee"
                style="display:none;margin-top:.375rem;gap:.375rem;align-items:center">
            <select name="employee_id"
                    style="padding:.25rem .5rem;background:var(--surface0);border:1px solid var(--surface1);border-radius:.25rem;color:var(--text);font-size:.75rem;outline:none">
              <option value="">— None —</option>
              {% for emp in employees %}
                <option value="{{ emp.id }}" {% if u.employee_id == emp.id %}selected{% endif %}>{{ emp.name }}</option>
              {% endfor %}
            </select>
            <button type="submit" class="btn btn-primary btn-sm">Save</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card" style="margin-top:1.25rem">
  <div class="card-title">API Access</div>
  <p style="font-size:0.8125rem;color:var(--subtext0);margin-bottom:0.75rem">
    Use your API key with the <code style="color:var(--pink)">Authorization: Bearer &lt;key&gt;</code> header or <code style="color:var(--pink)">X-API-Key: &lt;key&gt;</code> header.
    Interactive docs available at <a href="/api/docs" style="color:var(--pink)">/api/docs</a>.
  </p>
  {% if user.api_key %}
  <div style="background:var(--surface0);border:1px solid var(--surface1);border-radius:.375rem;padding:.625rem .875rem;font-family:monospace;font-size:.8rem;word-break:break-all;color:var(--text)">
    {{ user.api_key }}
  </div>
  {% else %}
  <p style="font-size:0.8125rem;color:var(--overlay0)">You don't have an API key. Click "Regen Key" next to your username above.</p>
  {% endif %}
</div>
{% endblock %}