{% 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" 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">linger</span>{% endif %}{% if u.has_vdisk %}<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan);">💾 vdisk</span>{% endif %}</div>
      <div class="user-stats"><div class="user-stat">Disk: <strong>{{ u.disk_used }}</strong></div><div class="user-stat">Ctrs: <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'">✕</button></div>
  </div>
  <div style="overflow-x:auto;"><table class="ct-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 %}