{% extends "layout.html" %}
{% block title %}{{ _('Users & Hosts') }}{% endblock %}
{% block content %}

<!-- Main Tabs -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-white p-0 pt-3 border-bottom-0">
        <ul class="nav nav-tabs nav-tabs-custom px-4" id="mainTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" href="{{ url_for('users_page') }}">Users</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url_for('hosts_page') }}">Virtual Hosts</a>
            </li>
        </ul>
    </div>
    
    <div class="card-body bg-light bg-opacity-25 rounded-bottom">
        <div class="d-flex justify-content-between align-items-center mb-3 px-2">
            <h5 class="mb-0 fw-bold text-dark">System Users</h5>
            <button class="btn btn-primary btn-sm shadow-sm" data-bs-toggle="modal" data-bs-target="#createUserModal">
                <i class="fas fa-plus me-1"></i> Add User
            </button>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body p-0">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4 py-3 border-bottom-0 text-muted small text-uppercase">Username</th>
                            <th class="py-3 border-bottom-0 text-muted small text-uppercase">Home Directory</th>
                            <th class="py-3 border-bottom-0 text-muted small text-uppercase">Disk Usage</th>
                            <th class="text-end pe-4 py-3 border-bottom-0 text-muted small text-uppercase">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td class="ps-4 py-3 fw-bold text-dark">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-light me-3 d-flex align-items-center justify-content-center text-primary" style="width:36px;height:36px;">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    {{ user.username }}
                                </div>
                            </td>
                            <td class="text-muted font-monospace small">{{ user.home_dir }}</td>
                            <td class="text-muted small">
                                <div class="d-flex align-items-center">
                                    <div class="progress me-2" style="width: 80px; height: 6px;">
                                        {% set percent = 0 %}
                                        {% if user.quota_limit_mb > 0 %}
                                            {% set percent = ((user.current_disk_usage / 1024 / 1024) / user.quota_limit_mb * 100)|int %}
                                        {% endif %}
                                        <div class="progress-bar {% if percent > 90 %}bg-danger{% elif percent > 70 %}bg-warning{% else %}bg-success{% endif %}" role="progressbar" style="width: {{ percent }}%"></div>
                                    </div>
                                    <span>
                                        {{ (user.current_disk_usage / 1024 / 1024)|round(2) }} MB
                                        <span class="text-muted opacity-50">/ {% if user.quota_limit_mb > 0 %}{{ user.quota_limit_mb }} MB{% else %}∞{% endif %}</span>
                                    </span>
                                </div>
                            </td>
                            <td class="text-end pe-4">
                                <button class="btn btn-sm btn-light border shadow-sm me-1" data-bs-toggle="modal" data-bs-target="#editUserModal{{ user.id }}" title="Edit">
                                    <i class="fas fa-pen text-secondary"></i>
                                </button>
                                
                                {% if user.is_suspended %}
                                <form method="post" action="{{ url_for('suspend_user', user_id=user.id) }}" class="d-inline">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="action" value="unsuspend">
                                    <button type="submit" class="btn btn-sm btn-success me-1 shadow-sm" title="Unsuspend"><i class="fas fa-unlock"></i></button>
                                </form>
                                {% else %}
                                <form method="post" action="{{ url_for('suspend_user', user_id=user.id) }}" class="d-inline">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="action" value="suspend">
                                    <button type="submit" class="btn btn-sm btn-light border shadow-sm me-1 text-warning" title="Suspend"><i class="fas fa-lock"></i></button>
                                </form>
                                {% endif %}
                                
                                <form method="post" action="{{ url_for('delete_user', user_id=user.id) }}" class="d-inline" onsubmit="return confirm('Are you sure? This will delete the user, their home directory, and ALL their hosts!');">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="btn btn-sm btn-light border shadow-sm text-danger" title="Delete"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">
                                <i class="fas fa-users-slash fa-2x mb-3 text-light"></i>
                                <p class="mb-0">No users found. Create one to get started.</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Create User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form method="post" action="{{ url_for('create_user') }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Username</label>
                        <input type="text" name="username" class="form-control" placeholder="e.g. john_doe" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Password</label>
                        <input type="password" name="password" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Email</label>
                        <input type="email" name="email" class="form-control" placeholder="user@example.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small fw-bold">Total Disk Quota (MB)</label>
                        <input type="number" name="quota_mb" class="form-control" placeholder="0 = Unlimited" value="0">
                    </div>
                    <h6 class="mt-4 mb-3 border-bottom pb-2 text-uppercase small fw-bold text-muted">Resource Limits (Soft)</h6>
                    <div class="row g-2">
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">CPU (%)</label>
                            <input type="number" name="cpu_limit" class="form-control" placeholder="Unlimited" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">RAM (MB)</label>
                            <input type="number" name="ram_limit" class="form-control" placeholder="Unlimited" value="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label text-muted small fw-bold">I/O (MB/s)</label>
                            <input type="number" name="io_limit" class="form-control" placeholder="Unlimited" value="0">
                        </div>
                    </div>
                    <div class="alert alert-light small text-muted border-0 bg-light">
                        <i class="fas fa-info-circle me-1"></i> User will be jailed to <code>/home/username</code>. Limits are monitored via background process.
                    </div>
                    <div class="d-flex justify-content-end pt-3 border-top">
                        <button type="button" class="btn btn-light me-2 text-muted" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary px-4 fw-bold">Create Account</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% for user in users %}
<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal{{ user.id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 bg-light">
                <h5 class="modal-title fw-bold">Edit {{ user.username }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form method="post" action="{{ url_for('edit_user', user_id=user.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Password</label>
                        <input type="password" name="password" class="form-control" placeholder="Leave empty to keep current">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ user.email or '' }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted">Disk Quota (MB)</label>
                        <input type="number" name="quota_mb" class="form-control" value="{{ user.quota_limit_mb }}">
                    </div>
                    <h6 class="mt-4 mb-3 border-bottom pb-2 small fw-bold text-muted text-uppercase">Resource Limits</h6>
                    <div class="row g-2">
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-bold text-muted">CPU (%)</label>
                            <input type="number" name="cpu_limit" class="form-control" value="{{ user.cpu_limit_percent }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-bold text-muted">RAM (MB)</label>
                            <input type="number" name="ram_limit" class="form-control" value="{{ user.ram_limit_mb }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label small fw-bold text-muted">I/O (MB/s)</label>
                            <input type="number" name="io_limit" class="form-control" value="{{ user.io_limit_mb_s }}">
                        </div>
                    </div>
                    <div class="d-flex justify-content-end pt-3 border-top">
                        <button type="submit" class="btn btn-primary fw-bold px-4">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endblock %}