{% extends "base.html" %}
{% block title %}Nginx 사용자 관리 - 리얼컴 NAS UI{% endblock %}
{% block content %}
<style>
.smui-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 600px;
  margin: 36px auto 16px auto;
}
.smui-title {
  font-size: 1.36em;
  font-weight: 700;
  color: #222e3a;
  letter-spacing: 0.2px;
}
.smui-btn-add {
  background: #1566c1;
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  padding: 7px 22px;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  transition: background .14s;
}
.smui-btn-add:hover { background: #124da0; color: #fff; }

.smui-user-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  background: #f9fbfd;
  overflow: hidden;
}
.smui-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 54px;
  border-bottom: 1px solid #e2e7ef;
  background: #fff;
  font-size: 1.08em;
  transition: background .13s;
}
.smui-user-row:last-child { border-bottom: none; }
.smui-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.smui-user-avatar {
  font-size: 1.2em;
  color: #b8bfc7;
}
.smui-user-name {
  font-weight: 600;
  color: #202939;
}
.smui-user-name.admin { color: #1566c1; }
.smui-user-actions {
  display: flex;
  gap: 6px;
}
.smui-btn-action {
  border-radius: 4px;
  font-size: .97em;
  padding: 4.5px 14px;
  border: 1.1px solid #dbe4ee;
  background: #f5f8fb;
  color: #2256a2;
  font-weight: 500;
  transition: background .13s, color .12s;
}
.smui-btn-action:hover {
  background: #e6eefd;
  color: #10376a;
  border-color: #b6d1f7;
}
.smui-btn-del {
  border: 1.1px solid #edd8da;
  background: #fbf4f4;
  color: #b83636;
  margin-left: 4px;
}
.smui-btn-del:hover {
  background: #f6dddd;
  color: #861a1a;
  border-color: #f1c2c6;
}
.smui-empty {
  text-align: center;
  color: #c0c3ca;
  padding: 70px 0 28px 0;
  background: #f9fbfd;
  border: 1px solid #e2e7ef;
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.08em;
}
.smui-empty i {
  font-size: 36px;
  margin-bottom: 10px;
  color: #dbe4ee;
}
</style>

<div class="smui-header">
  <div class="smui-title">Nginx 사용자 관리</div>
  <a href="{{ url_for('nginx_users_add') }}" class="smui-btn-add">
    사용자 추가
  </a>
</div>

{% if users %}
  <div class="smui-user-list">
    {% for user in users %}
      <div class="smui-user-row">
        <div class="smui-user-info">
          <i class="bi bi-person-circle smui-user-avatar"></i>
          <span class="smui-user-name{% if user == 'admin' %} admin{% endif %}">{{ user }}</span>
        </div>
        <div class="smui-user-actions">
          <a href="{{ url_for('nginx_users_change_password', username=user) }}"
             class="smui-btn-action"
             title="비밀번호 변경">
            비밀번호 변경
          </a>
          <form method="post"
                action="{{ url_for('nginx_users_delete', username=user) }}"
                style="display:inline;"
                onsubmit="return confirm('사용자 {{ user }} 을(를) 삭제하시겠습니까?');">
            <button type="submit"
                    class="smui-btn-action smui-btn-del"
                    title="삭제">
              삭제
            </button>
          </form>
        </div>
      </div>
    {% endfor %}
  </div>
{% else %}
  <div class="smui-empty">
    <i class="bi bi-person-dash"></i>
    <div style="margin-top:8px;">등록된 사용자가 없습니다.</div>
  </div>
{% endif %}
{% endblock %}