{% extends "base.html" %}
{% block title %}Users — ArtNode{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <a href="{{ url_for('settings.index') }}" style="font-size:0.75rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;">&larr; Settings</a>
    <div class="page-title" style="margin-top:4px;">Users</div>
  </div>
</div>

<div class="page-body" style="max-width:720px;">

  <!-- Current users -->
  <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
    <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Team Members</div>
    {% for user in users %}
    <div style="display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) 0;border-bottom:1px solid var(--border-light);">
      <div style="flex:1;">
        <div style="font-size:0.88rem;font-weight:400;">
          {{ user.first_name or "" }} {{ user.last_name or "" }}
          {% if not user.first_name and not user.last_name %}<span style="color:var(--text-muted);">—</span>{% endif %}
        </div>
        <div style="font-size:0.78rem;color:var(--text-secondary);">{{ user.email }}</div>
      </div>
      <form method="POST" action="{{ url_for('settings.set_user_role', id=user.id) }}" style="display:flex;align-items:center;gap:8px;">
        {{ csrf_token_field() if csrf_token_field is defined }}
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <select name="role" class="form-control" style="font-size:0.75rem;padding:4px 8px;width:auto;"
                onchange="this.form.submit()" {% if user.id == current_user.id %}disabled{% endif %}>
          <option value="staff" {% if not user.roles or user.roles[0].name == "staff" %}selected{% endif %}>Staff</option>
          <option value="admin" {% if user.roles and user.roles[0].name == "admin" %}selected{% endif %}>Admin</option>
        </select>
      </form>
      {% if user.id != current_user.id %}
      <form method="POST" action="{{ url_for('settings.delete_user', id=user.id) }}"
            onsubmit="return confirm('Delete {{ user.email }}?')">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn-secondary" style="padding:4px 10px;font-size:0.72rem;">Delete</button>
      </form>
      {% else %}
      <span style="font-size:0.72rem;color:var(--text-muted);padding:4px 10px;">You</span>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <!-- Invite new user -->
  <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);">
    <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Invite New User</div>
    <form method="POST" action="{{ url_for('settings.invite_user') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md);">
        <div class="form-group" style="margin:0;">
          <label class="form-label">First Name</label>
          <input type="text" name="first_name" class="form-control">
        </div>
        <div class="form-group" style="margin:0;">
          <label class="form-label">Last Name</label>
          <input type="text" name="last_name" class="form-control">
        </div>
      </div>
      <div style="display:grid;grid-template-columns:1fr auto auto;gap:var(--space-md);align-items:end;">
        <div class="form-group" style="margin:0;">
          <label class="form-label">Email *</label>
          <input type="email" name="email" class="form-control" required placeholder="colleague@gallery.ch">
        </div>
        <div class="form-group" style="margin:0;">
          <label class="form-label">Role</label>
          <select name="role" class="form-control">
            <option value="staff">Staff</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary" style="margin-bottom:1px;">Send Invitation</button>
      </div>
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:var(--space-md);">
        The user will receive an email with a link to set their password.
      </p>
    </form>
  </div>

</div>
{% endblock %}