{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Backup User Control" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Backup User Control" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Control which hosting accounts are included in scheduled backups." %}</div>
        </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 "Backups" %}</span>
        <span class="eenos-breadcrumb-separator" aria-hidden="true">
            <i data-lucide="chevron-right"></i>
        </span>
        <span class="eenos-breadcrumb-current" aria-current="page">{% translate "User Control" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="mb-3">
            <div class="eenos-panel-title">{% translate "Hosting Accounts" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Enable or exclude accounts from automatic backup schedules." %}</div>
        </div>
        <div class="d-flex gap-2 mb-4">
            <button type="button"
                    class="btn btn-sm btn-outline-success bulk-user-action"
                    data-action="enable"><i data-lucide="circle-check"></i>{% translate "Enable Selected" %}</button><button type="button"
        class="btn btn-sm btn-outline-danger bulk-user-action"
        data-action="disable"><i data-lucide="circle-x"></i>{% translate "Disable Selected" %}</button>
        </div>
        <table id="backupUsersTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>
                        <input id="selectAllUsers"
                               type="checkbox"
                               class="form-check-input mt-0 align-middle"
                               aria-label="{% translate 'Select all users' %}">
                    </th>
                    <th>{% translate "User" %}</th>
                    <th>{% translate "Primary Domain" %}</th>
                    <th>{% translate "Backup Status" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="backupUserActionForm" class="d-none">
        {% csrf_token %}
        <input name="user" id="backupUser" disabled><input name="userlist" id="backupUsers" disabled><input name="suspend_account" id="disableBackupUser" disabled><input name="unsuspend_account" id="enableBackupUser" disabled><input name="bulk_suspend" id="disableBackupUsers" disabled><input name="bulk_unsuspend" id="enableBackupUsers" disabled>
    </form>
    <div class="modal fade"
         id="backupUserModal"
         tabindex="-1"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <h2 class="modal-title fs-5" id="backupUserTitle"></h2>
                    <button class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="border rounded-3 bg-body-tertiary p-3 mb-4">
                        <div class="d-flex align-items-center gap-3">
                            <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="user-round"></i></span>
                            <div class="min-w-0">
                                <div class="small text-muted text-uppercase fw-semibold"
                                     id="backupUserAccountLabel">{% translate "Hosting Account" %}</div>
                                <div class="fs-5 fw-bold text-break" id="backupUserAccount"></div>
                                <div class="small text-muted text-break d-flex align-items-center gap-2 mt-1"
                                     id="backupUserDomainRow">
                                    <i data-lucide="globe-2"></i><span id="backupUserDomain"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning" id="backupUserNotice">
                        <div class="eenos-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-title" id="backupUserHeading">{% translate "Confirm backup participation" %}</div>
                            <div class="eenos-notice-text" id="backupUserText"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button><button class="btn btn-warning" id="confirmBackupUser"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){const esc=v=>$('<div>').text(v==null?'':v).html(),selected=new Set(),modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('backupUserModal'));let pending=null;const table=$('#backupUsersTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,language:{processing:'{% translate "Loading..." %}'},pageLength:25,ajax:{url:"{% url 'backup_user_control_data' %}",dataSrc:'data'},order:[[1,'asc']],columns:[{data:'username',orderable:false,searchable:false,width:'44px',responsivePriority:1,render:(d,t)=>t==='display'?'<input type="checkbox" class="form-check-input user-select mt-0 align-middle" value="'+esc(d)+'" '+(selected.has(String(d))?'checked':'')+'>':''},{data:'username',responsivePriority:1,render:(d,t)=>t==='display'?'<span class="fw-semibold">'+esc(d)+'</span>':d},{data:'primary_domain',responsivePriority:3,render:(d,t,r)=>t==='display'&&r.site_url?'<a href="'+esc(r.site_url)+'" target="_blank" rel="noopener">'+esc(d)+'</a>':d},{data:'backup_enabled',width:'150px',className:'text-nowrap',responsivePriority:2,render:(d,t,r)=>t!=='display'?d:'<div class="d-inline-flex align-items-center gap-2"><div class="form-check form-switch m-0"><input type="checkbox" class="form-check-input backup-user-status-switch" role="switch" data-user="'+esc(r.username)+'" data-domain="'+esc(r.primary_domain)+'" data-enabled="'+d+'" aria-label="{% translate "Change account backup status" %}" '+(d?'checked':'')+'></div><span class="small '+(d?'text-success':'text-muted')+'">'+(d?'{% translate "Enabled" %}':'{% translate "Disabled" %}')+'</span></div>'}],drawCallback:()=>{if(typeof lucide!=='undefined')lucide.createIcons();$('.user-select').each(function(){$(this).prop('checked',selected.has(String(this.value)));});}});$(document).on('change','.user-select',function(){this.checked?selected.add(this.value):selected.delete(this.value)});$('#selectAllUsers').on('change',function(){table.rows({search:'applied'}).data().each(r=>this.checked?selected.add(r.username):selected.delete(r.username));table.draw(false)});function open(action,users,label,domain){pending={action,users};const enable=action==='enable',bulk=users.length>1;$('#backupUserTitle').text(enable?"{% translate 'Enable Account Backups' %}":"{% translate 'Disable Account Backups' %}");$('#backupUserAccountLabel').text(bulk?"{% translate 'Selected Accounts' %}":"{% translate 'Hosting Account' %}");$('#backupUserAccount').text(label);$('#backupUserDomain').text(domain||'');$('#backupUserDomainRow').toggleClass('d-none',!domain);$('#backupUserHeading').text(enable?"{% translate 'Include in scheduled backups' %}":"{% translate 'Exclude from scheduled backups' %}");$('#backupUserText').text(enable?"{% translate 'The selected account or accounts will be included in scheduled backups.' %}":"{% translate 'The selected account or accounts will be excluded from scheduled backups.' %}");$('#backupUserNotice').removeClass('eenos-notice-info eenos-notice-warning').addClass(enable?'eenos-notice-info':'eenos-notice-warning');$('#confirmBackupUser').show().text(enable?"{% translate 'Enable Backups' %}":"{% translate 'Disable Backups' %}").toggleClass('btn-success',enable).toggleClass('btn-danger',!enable).removeClass('btn-warning');if(typeof lucide!=='undefined')lucide.createIcons();modal.show();}$(document).on('change','.backup-user-status-switch',function(){const enabled=String($(this).data('enabled'))==='true';$(this).prop('checked',enabled);open(enabled?'disable':'enable',[$(this).data('user')],$(this).data('user'),$(this).data('domain'))});$('.bulk-user-action').on('click',function(){const action=$(this).data('action'),rows=table.rows().data().toArray(),eligible=rows.filter(r=>selected.has(r.username)&&(action==='enable'?!r.backup_enabled:r.backup_enabled)).map(r=>r.username);if(!eligible.length){$('#backupUserTitle').text("{% translate 'No Applicable Accounts' %}");$('#backupUserAccountLabel').text("{% translate 'Selected Accounts' %}");$('#backupUserAccount').text("{% translate 'No changes required' %}");$('#backupUserDomainRow').addClass('d-none');$('#backupUserHeading').text("{% translate 'No applicable accounts' %}");$('#backupUserText').text("{% translate 'The selected accounts are already in the requested backup state.' %}");$('#confirmBackupUser').hide();modal.show();return}open(action,eligible,eligible.length+" {% translate 'selected accounts' %}",'')});$('#confirmBackupUser').on('click',function(){const bulk=pending.users.length>1,user=pending.users[0],enable=pending.action==='enable';$('#backupUser,#backupUsers,#disableBackupUser,#enableBackupUser,#disableBackupUsers,#enableBackupUsers').prop('disabled',true);if(bulk){$('#backupUsers').prop('disabled',false).val(pending.users.join(','));$(enable?'#enableBackupUsers':'#disableBackupUsers').prop('disabled',false).val('yes')}else{$('#backupUser').prop('disabled',false).val(user);$(enable?'#enableBackupUser':'#disableBackupUser').prop('disabled',false).val('yes')}document.getElementById('backupUserActionForm').submit()});});
    </script>
{% endblock %}