{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "FTP Denied Users" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap">
        <div>
            <h1 class="eenos-page-title">{% translate "FTP Denied Users" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Control which system accounts are prohibited from authenticating through FTP." %}</div>
        </div>
        <div class="d-grid col-12 col-sm-auto">
            <a href="{% url 'ftp_settings' %}"
               class="btn btn-outline-secondary btn-sm text-nowrap"><i data-lucide="settings"></i>{% translate "FTP Settings" %}</a>
        </div>
    </div>
    <nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>{% translate "FTP & SSH" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span>FTP</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <a href="{% url 'ftp_settings' %}">{% translate "Settings" %}</a>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "Denied Users" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="row justify-content-center">
        <div class="col-12 col-xl-9 col-xxl-8">
            <div class="eenos-card">
                <div class="d-flex flex-column flex-sm-row align-items-sm-start justify-content-between gap-3 mb-4">
                    <div>
                        <div class="eenos-panel-title">{% translate "FTP Access Deny List" %}</div>
                        <div class="eenos-panel-subtitle">{% translate "Accounts listed here cannot log in to Pure-FTPd." %}</div>
                    </div>
                    <button type="button"
                            class="btn btn-primary btn-sm flex-shrink-0 align-self-start"
                            id="denyFtpUser"><i data-lucide="user-x"></i>{% translate "Deny New User" %}</button>
                </div>
                <div class="eenos-notice eenos-notice-warning mb-4">
                    <div class="eenos-notice-icon">
                        <i data-lucide="triangle-alert"></i>
                    </div>
                    <div class="eenos-notice-content">
                        <div class="eenos-notice-title">{% translate "Root access requires two settings" %}</div>
                        <div class="eenos-notice-text">{% translate "Removing root from this list does not enable root login unless Allow Root Login is also enabled in FTP Settings." %}</div>
                    </div>
                </div>
                <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between gap-2 mb-3">
                    <div class="input-group input-group-sm flex-grow-1">
                        <span class="input-group-text"><i data-lucide="search"></i></span>
                        <input type="search"
                               class="form-control"
                               id="ftpDenySearch"
                               placeholder="{% translate 'Search denied users' %}"
                               aria-label="{% translate 'Search denied users' %}">
                    </div>
                    <span class="badge eenos-badge-neutral align-self-start align-self-sm-center"
                          id="ftpDenyCount">0 {% translate "users" %}</span>
                </div>
                <div id="ftpDenyList"
                     class="eenos-compact-list list-group list-group-flush border rounded"
                     aria-live="polite">
                    <div class="d-flex align-items-center justify-content-center gap-2 text-muted p-4">
                        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span><span>{% translate "Loading denied users..." %}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form method="post" id="ftpDenyForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="deny" value="yes"><input type="hidden" name="user" id="ftpDenyUsername">
    </form>
    <form method="post" id="ftpAllowForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="allow" value="yes"><input type="hidden" name="user" id="ftpAllowUsername">
    </form>
    <div class="modal fade" id="ftpDenyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">{% translate "Deny FTP User" %}</h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <form id="ftpDenyInputForm" class="eenos-form" data-parsley-validate>
                        <label for="ftpDenyUserInput" class="form-label">{% translate "Username" %}</label>
                        <input type="text"
                               class="form-control"
                               id="ftpDenyUserInput"
                               maxlength="500"
                               autocomplete="off"
                               required
                               data-parsley-required-message="{% translate 'Enter the FTP username to deny.' %}">
                        <div class="form-text">{% translate "The account will be added to /etc/ftpusers." %}</div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-danger" id="confirmDenyFtpUser"><i data-lucide="user-x"></i>{% translate "Deny User" %}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="ftpAllowModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5">{% translate "Allow FTP User" %}</h2>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="eenos-modal-info">
                        <div class="eenos-modal-info-icon">
                            <i data-lucide="user-check"></i>
                        </div>
                        <div class="eenos-modal-info-content">
                            <div class="eenos-modal-info-label">{% translate "Username" %}</div>
                            <div class="eenos-modal-info-value font-monospace"
                                 id="ftpAllowUserDisplay"></div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0">{% translate "Remove this account from the FTP deny list?" %}</p>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal">{% translate "Cancel" %}</button><button type="button" class="btn btn-success" id="confirmAllowFtpUser">{% translate "Allow User" %}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
    const esc=value=>$('<div>').text(value==null?'':value).html();
    let deniedUsers=[];
    function renderUsers(){
        const query=$('#ftpDenySearch').val().trim().toLowerCase();
        const users=deniedUsers.filter(row=>row.username.toLowerCase().includes(query));
        $('#ftpDenyCount').text(users.length+' '+(users.length===1?"{% translate 'user' %}":"{% translate 'users' %}"));
        if(!users.length){
            $('#ftpDenyList').html('<div class="text-center text-muted p-4"><i data-lucide="'+(query?'search-x':'user-check')+'"></i><div class="mt-2">'+(query?"{% translate 'No matching denied users found.' %}":"{% translate 'No users are denied FTP access.' %}")+'</div></div>');
        }else{
            $('#ftpDenyList').html(users.map(row=>'<div class="list-group-item d-flex align-items-center justify-content-between gap-3 py-3"><div class="eenos-compact-list-value fw-semibold font-monospace" title="'+esc(row.username)+'">'+esc(row.username)+'</div><button type="button" class="btn btn-sm btn-outline-success allow-ftp-user flex-shrink-0" data-user="'+esc(row.username)+'"><i data-lucide="user-check"></i><span class="d-none d-sm-inline">{% translate "Allow" %}</span></button></div>').join(''));
        }
        if(typeof lucide!=='undefined')lucide.createIcons();
    }
    $.ajax({url:"{% url 'ftp_deny_users' %}",dataType:'json'}).done(response=>{deniedUsers=Array.isArray(response.data)?response.data:[];renderUsers();}).fail(()=>{$('#ftpDenyList').html('<div class="text-center text-danger p-4"><i data-lucide="circle-alert"></i><div class="mt-2">{% translate "Unable to load the FTP deny list." %}</div></div>');if(typeof lucide!=='undefined')lucide.createIcons();});
    $('#ftpDenySearch').on('input',renderUsers);
    const denyModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('ftpDenyModal')),allowModal=bootstrap.Modal.getOrCreateInstance(document.getElementById('ftpAllowModal'));
    $('#denyFtpUser').on('click',function(){$('#ftpDenyUserInput').val('');$('#ftpDenyInputForm').parsley().reset();denyModal.show();setTimeout(()=>$('#ftpDenyUserInput').trigger('focus'),200);});
    $('#confirmDenyFtpUser').on('click',function(){const form=$('#ftpDenyInputForm').parsley();if(!form.validate())return;$('#ftpDenyUsername').val($('#ftpDenyUserInput').val().trim());document.getElementById('ftpDenyForm').submit();});
    $(document).on('click','.allow-ftp-user',function(){const user=$(this).data('user');$('#ftpAllowUsername').val(user);$('#ftpAllowUserDisplay').text(user);allowModal.show();});
    $('#confirmAllowFtpUser').on('click',function(){document.getElementById('ftpAllowForm').submit();});
});
    </script>
{% endblock %}