{* FTP tab — read-only observer. *}
<div style="margin-bottom:8px;">
    <button type="button" class="btn btn-default btn-xs" id="puq-svc-ftp-reload"><i class="fa fa-sync"></i> Reload</button>
    <span class="text-muted small" id="puq-svc-ftp-count" style="margin-left:8px;"></span>
</div>
<table class="table table-striped table-condensed" id="puq-svc-ftp-table" style="width:100%;">
    <thead><tr>
        <th>ID</th><th>Username</th><th>Path</th><th>Status</th><th>Created</th><th>Error</th>
    </tr></thead>
    <tbody></tbody>
</table>
{literal}
<script>
(window.puqSvc = window.puqSvc || {}).init_ftp = function(ctx){
    var esc = ctx.esc, baseUrl = ctx.baseUrl, puqId = ctx.puqId, fmtDate = ctx.fmtDate;
    var dt = null;
    function load() {
        puqAjax({ container: '#puq-svc-ftp-table', loadingCaption: 'Loading FTP accounts…',
            url: baseUrl + 'listServiceFtp&id=' + puqId, dataType: 'json',
            success: function(r){
                var rows = (r.status === 'success' && r.data) ? r.data : [];
                $('#puq-svc-ftp-count').text(rows.length + ' account(s)');
                if (dt) { dt.destroy(); $('#puq-svc-ftp-table tbody').empty(); }
                rows.forEach(function(f){
                    var cls = ({queued:'default',deploying:'info',active:'success',error:'danger',pending_delete:'warning',deleting:'warning'})[f.deploy_status] || 'default';
                    $('#puq-svc-ftp-table tbody').append('<tr>' +
                        '<td>' + esc(f.id) + '</td>' +
                        '<td><strong>' + esc(f.username) + '</strong></td>' +
                        '<td><code style="font-size:11px;">' + esc(f.path) + '</code></td>' +
                        '<td><span class="label label-' + cls + '">' + esc(f.deploy_status) + '</span></td>' +
                        '<td>' + fmtDate(f.created_at) + '</td>' +
                        '<td><small class="text-danger">' + esc(f.deploy_error || '') + '</small></td>' +
                        '</tr>');
                });
                dt = $('#puq-svc-ftp-table').DataTable({ order: [[0, 'desc']], pageLength: 25, autoWidth: false });
            }
        });
    }
    $('#puq-svc-ftp-reload').on('click', load);
    load = ctx.armAutoRefresh('ftp', { selector: '#puq-svc-ftp-table', load: load });
    load();
};
</script>
{/literal}
