{% extends "base.html" %}
{% block title %}사용자관리 - 리얼컴 NAS UI{% endblock %}
{% block content %}
<div class="container" style="display:flex; gap:20px;">

    <!-- 사용자 추가 -->
    <div class="panel" style="width:360px;">
        <h2>사용자 추가</h2>
        <form method="post">
            <input type="hidden" name="action" value="add">
            <div class="form-row">
                <label>이름</label>
                <input type="text" name="username" required maxlength="16" autocomplete="off">
            </div>
            <div class="form-row">
                <label>비밀번호</label>
                <input type="password" name="password" required maxlength="32" autocomplete="off">
            </div>
            <div class="form-row" style="justify-content:flex-end;">
                <button type="submit" class="edit-btn">추가</button>
            </div>
        </form>
    </div>

    <!-- 비밀번호 변경 -->
    <div class="panel" style="width:360px;">
        <h2>비밀번호 변경</h2>
        <form method="post">
            <input type="hidden" name="action" value="change_password">
            <div class="form-row">
                <label>사용자</label>
                <select name="username" required>
                    {% for u in users %}
                    <option value="{{ u }}">{{ u }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-row">
                <label>새 비밀번호</label>
                <input type="password" name="new_password" required maxlength="32" autocomplete="off">
            </div>
            <div class="form-row" style="justify-content:flex-end;">
                <button type="submit" class="edit-btn">변경</button>
            </div>
        </form>
    </div>

    <!-- 사용자 목록 -->
    <div class="panel" style="flex:1;">
        <h2>사용자 목록</h2>
        <table>
            <thead>
                <tr>
                    <th>이름</th>
                    <th>옵션</th>
                </tr>
            </thead>
            <tbody>
                {% for u in users %}
                <tr>
                    <td>{{ u }}</td>
                    <td class="actions">
                        <form method="post" style="display:inline;">
                            <input type="hidden" name="action" value="remove">
                            <input type="hidden" name="username" value="{{ u }}">
                            <input type="submit" value="삭제" class="del-btn" onclick="return confirm('삭제하시겠습니까?');">
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="2">등록된 사용자가 없습니다.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}