{% extends "base.html" %}
{% block content %}
<div class="card">
  <div class="card-header"><div class="card-title"><i class="fas fa-user-plus"></i> Create New User</div></div>
  <div class="form-grid">
    <div class="form-group"><label class="form-label">USERNAME</label><input type="text" id="new-username" class="form-input" placeholder="e.g. secuser2"></div>
    <div class="form-group"><label class="form-label">PASSWORD (optional)</label><input type="password" id="new-password" class="form-input"></div>
    <div class="form-group"><label class="form-label">DISK SIZE MB (creates dedicated virtual disk)</label><input type="number" id="new-quota" class="form-input" placeholder="e.g. 10240 for 10GB"></div>
    <div class="form-group" style="justify-content:flex-end;">
      <label class="form-check" style="margin-bottom:8px;"><input type="checkbox" id="new-docker" checked><span>Setup rootless Docker</span></label>
      <button class="btn btn-primary" onclick="createUser()"><i class="fas fa-plus"></i> Create User</button>
    </div>
  </div>
  <div id="create-user-result" class="alert" style="margin-top:14px;"></div>
  <div id="create-user-log" class="log-console" style="display:none; margin-top:12px; max-height:200px;"></div>
</div>

<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-users"></i> System Users</div>
    <button class="btn btn-ghost btn-sm" onclick="loadUsers()"><i class="fas fa-sync-alt"></i> Refresh</button>
  </div>
  <div class="users-grid" id="users-grid">
    {% for u in users %}
    <div class="user-card" data-user="{{ u.name }}" onclick="loadUserContainers('{{ u.name }}')">
      <div class="user-card-top">
        <div class="user-avatar" style="background:#3b82f6">{{ u.name[0].upper() }}</div>
        <div>
          <div class="user-name">{{ u.name }}</div>
          <div class="user-uid">uid {{ u.uid }}</div>
        </div>
      </div>
      <div class="user-tags">
        {% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}
        {% if u.linger %}<span class="user-tag linger"><i class="fas fa-clock"></i> linger</span>{% endif %}
        {% if u.has_vdisk %}<span class="user-tag vdisk"><i class="fas fa-hard-drive"></i> vdisk</span>{% endif %}
      </div>
      <div class="user-stats">
        <div class="user-stat"><span class="user-stat-label">Disk</span><strong>{{ u.disk_used }}</strong></div>
        <div class="user-stat"><span class="user-stat-label">Containers</span><strong>{{ u.container_count }}</strong></div>
      </div>
    </div>
    {% else %}
    <div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
    {% endfor %}
  </div>
</div>

<div class="card" id="user-detail-panel" style="display:none;">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-cube"></i> <span id="user-detail-title">Containers</span></div>
    <div style="display:flex;gap:8px;">
      <button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button>
      <button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'; document.querySelectorAll('.user-card.selected').forEach(c=>c.classList.remove('selected'))" title="Close">✕</button>
    </div>
  </div>
  <div class="user-detail-table-wrap">
    <table class="ct-table user-containers-table">
      <thead>
        <tr>
          <th>NAME</th>
          <th>STATUS</th>
          <th>IMAGE</th>
          <th>PORTS</th>
        </tr>
      </thead>
      <tbody id="user-containers-body"></tbody>
    </table>
  </div>
  <div id="user-action-result" class="alert" style="margin-top:14px;"></div>
</div>
{% endblock %}