{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Backup Storage Pools" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header">
        <div>
            <h1 class="eenos-page-title">{% translate "Backup Storage Pools" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Manage remote destinations used to store backups for your hosting account." %}</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>{% translate "Manage 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 "Storage Pools" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <section class="eenos-card mb-4" aria-labelledby="addPoolTitle">
        <div class="d-flex align-items-start justify-content-between gap-3 mb-4">
            <div><div class="eenos-panel-title" id="addPoolTitle">{% translate "Add Storage Pool" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Select the destination type that matches where your backups will be stored." %}</div></div>
            <div class="eenos-card-action-icon"><i data-lucide="hard-drive"></i></div>
        </div>
        <div class="row g-3">
            <div class="col-md-6 col-xl-4">
                <a href="{% url 'backup_pool_add_ssh' %}"
                   class="eenos-option-card d-flex align-items-start gap-3 h-100 p-3 text-decoration-none">
                    <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="key-round"></i></span>
                    <span><span class="d-block fw-semibold mb-1">{% translate "SSH" %}</span><span class="d-block small text-muted">{% translate "Connect securely using an SSH key pair." %}</span></span>
                </a>
            </div>
            <div class="col-md-6 col-xl-4">
                <a href="{% url 'backup_pool_add_sftp' %}"
                   class="eenos-option-card d-flex align-items-start gap-3 h-100 p-3 text-decoration-none">
                    <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="folder-sync"></i></span>
                    <span><span class="d-block fw-semibold mb-1">{% translate "SFTP" %}</span><span class="d-block small text-muted">{% translate "Transfer backups securely with SFTP credentials." %}</span></span>
                </a>
            </div>
            <div class="col-md-6 col-xl-4">
                <a href="{% url 'backup_pool_add_ftp' %}"
                   class="eenos-option-card d-flex align-items-start gap-3 h-100 p-3 text-decoration-none">
                    <span class="eenos-modal-info-icon flex-shrink-0"><i data-lucide="folder-up"></i></span>
                    <span><span class="d-block fw-semibold mb-1">{% translate "FTP" %}</span><span class="d-block small text-muted">{% translate "Transfer backups to a standard FTP server." %}</span></span>
                </a>
            </div>
        </div>
    </section>
    <div class="eenos-card">
        <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
            <div><div class="eenos-panel-title">{% translate "Configured Destinations" %}</div>
            <div class="eenos-panel-subtitle">{% translate "Test connectivity, change availability, or update each backup destination." %}</div></div>
            <div class="eenos-card-action-icon"><i data-lucide="hard-drive"></i></div>
        </div>
        <table id="backupPoolsTable"
               class="table table-hover align-middle w-100 mb-0">
            <thead>
                <tr>
                    <th>{% translate "Pool" %}</th>
                    <th>{% translate "Type" %}</th>
                    <th>{% translate "Storage Path" %}</th>
                    <th>{% translate "Status" %}</th>
                    <th class="text-end">{% translate "Action" %}</th>
                </tr>
            </thead>
        </table>
    </div>
    <form method="post" id="poolActionForm" class="d-none">
        {% csrf_token %}
        <input type="hidden" name="pool" id="poolActionId"><input type="hidden" name="status" id="poolStatus"><input type="hidden" name="change_status" id="poolChangeStatus" disabled><input type="hidden" name="delete_pool" id="poolDelete" disabled><input type="hidden" name="test_pool" id="poolTest" disabled>
    </form>
    <div class="modal fade"
         id="poolActionModal"
         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="poolActionTitle"></h2>
                    <button type="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="database"></i>
                            </span>
                            <div class="min-w-0">
                                <div class="small text-muted text-uppercase fw-semibold">{% translate "Storage Pool" %}</div>
                                <div class="fs-5 fw-bold text-break" id="poolActionName"></div>
                                <div class="small text-muted mt-1">
                                    {% translate "Pool ID" %}: <code class="user-select-all" id="poolActionPoolId"></code>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-notice eenos-notice-warning" id="poolActionNotice">
                        <div class="eenos-notice-icon" id="poolActionNoticeIcon">
                            <i data-lucide="info"></i>
                        </div>
                        <div class="eenos-notice-content">
                            <div class="eenos-notice-text" id="poolActionText"></div>
                        </div>
                    </div>
                </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-warning" id="confirmPoolAction"></button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_js %}
    <script>
$(function(){
const esc=value=>$('<div>').text(value==null?'':value).html();
const modal=bootstrap.Modal.getOrCreateInstance(document.getElementById('poolActionModal'));
let selected=null;
function openAction(action,id,name,enabled){selected={action,id,name,enabled};const config=action==='test'?["{% translate 'Test Pool Connection' %}","{% translate 'Eenos will connect to this destination and verify that the configured storage path is accessible.' %}","{% translate 'Test Connection' %}",'btn-primary','eenos-notice-info','plug-zap']:action==='delete'?["{% translate 'Delete Storage Pool' %}","{% translate 'This storage pool configuration will be permanently removed. Existing backup files at the destination will not be deleted.' %}","{% translate 'Delete Pool' %}",'btn-danger','eenos-notice-danger','triangle-alert']:enabled?["{% translate 'Disable Storage Pool' %}","{% translate 'New backup jobs will no longer use this destination.' %}","{% translate 'Disable Pool' %}",'btn-warning','eenos-notice-warning','pause']: ["{% translate 'Enable Storage Pool' %}","{% translate 'This destination will become available to backup schedules.' %}","{% translate 'Enable Pool' %}",'btn-success','eenos-notice-info','play'];$('#poolActionTitle').text(config[0]);$('#poolActionName').text(name||"{% translate 'Unnamed pool' %}");$('#poolActionPoolId').text(id);$('#poolActionText').text(config[1]);$('#poolActionNotice').removeClass('eenos-notice-info eenos-notice-warning eenos-notice-danger').addClass(config[4]);$('#poolActionNoticeIcon').html('<i data-lucide="'+config[5]+'"></i>');$('#confirmPoolAction').text(config[2]).removeClass('btn-primary btn-danger btn-warning btn-success').addClass(config[3]);if(typeof lucide!=='undefined')lucide.createIcons();modal.show()}
const table=$('#backupPoolsTable').DataTable({responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},processing:true,pageLength:25,lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"{% translate 'All' %}"]],ajax:{url:"{% url 'backup_storage_pools_data' %}",dataSrc:'data'},order:[[0,'asc']],columns:[{data:'name',responsivePriority:1,render:(data,type,row)=>type==='display'?'<div class="fw-semibold">'+esc(data)+'</div><div class="small text-muted font-monospace">'+esc(row.pool_key)+'</div>':data},{data:'type_label',responsivePriority:3},{data:'path',responsivePriority:4,render:(data,type)=>type==='display'?'<span class="font-monospace text-break">'+esc(data||'—')+'</span>':data},{data:'enabled',width:'125px',className:'text-nowrap',responsivePriority:2,render:(data,type,row)=>type!=='display'?data:'<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 pool-status-switch" role="switch" data-id="'+esc(row.pool_key)+'" data-name="'+esc(row.name)+'" data-enabled="'+data+'" aria-label="{% translate "Change pool status" %}" '+(data?'checked':'')+'></div><span class="small '+(data?'text-success':'text-muted')+'">'+(data?'{% translate "Enabled" %}':'{% translate "Disabled" %}')+'</span></div>'},{data:null,orderable:false,searchable:false,width:'130px',className:'text-end',responsivePriority:1,render:(data,type,row)=>type!=='display'?'':'<div class="eenos-dt-actions d-flex justify-content-end gap-1">'+(row.can_edit?'<a href="'+esc(row.edit_url)+'" class="btn btn-sm btn-outline-secondary" title="{% translate "Edit pool" %}" aria-label="{% translate "Edit pool" %}"><i data-lucide="pencil"></i></a>':'')+'<button type="button" class="btn btn-sm btn-outline-primary pool-action" data-action="test" data-id="'+esc(row.pool_key)+'" data-name="'+esc(row.name)+'" title="{% translate "Test connection" %}" aria-label="{% translate "Test connection" %}"><i data-lucide="plug-zap"></i></button><button type="button" class="btn btn-sm btn-outline-danger pool-action" data-action="delete" data-id="'+esc(row.pool_key)+'" data-name="'+esc(row.name)+'" title="{% translate "Delete pool" %}" aria-label="{% translate "Delete pool" %}"><i data-lucide="trash-2"></i></button></div>'}],language:{lengthMenu:"{% translate 'Show' %} _MENU_"},drawCallback:()=>{if(typeof lucide!=='undefined')lucide.createIcons()}});
table.on('responsive-display',()=>{if(typeof lucide!=='undefined')lucide.createIcons()});
$(document).on('change','.pool-status-switch',function(){const enabled=String($(this).data('enabled'))==='true';$(this).prop('checked',enabled);openAction('toggle',$(this).data('id'),$(this).data('name'),enabled)});
$(document).on('click','.pool-action',function(){openAction($(this).data('action'),$(this).data('id'),$(this).data('name'),false)});
$('#confirmPoolAction').on('click',function(){$('#poolActionId').val(selected.id);$('#poolChangeStatus,#poolDelete,#poolTest').prop('disabled',true);if(selected.action==='test')$('#poolTest').prop('disabled',false).val('yes');else if(selected.action==='delete')$('#poolDelete').prop('disabled',false).val('yes');else{$('#poolChangeStatus').prop('disabled',false).val('yes');$('#poolStatus').val(selected.enabled?'off':'on')}document.getElementById('poolActionForm').submit()});
});
    </script>
{% endblock %}