{* Databases tab — read-only observer. *}
<div style="margin-bottom:8px;">
    <button type="button" class="btn btn-default btn-xs" id="puq-svc-db-reload"><i class="fa fa-sync"></i> Reload</button>
    <span class="text-muted small" id="puq-svc-db-count" style="margin-left:8px;"></span>
</div>
<table class="table table-striped table-condensed" id="puq-svc-db-table" style="width:100%;">
    <thead><tr>
        <th>ID</th><th>Name</th><th>User</th><th>Engine</th><th>Charset</th><th>Size</th>
        <th>Status</th><th>Created</th><th>Error</th>
    </tr></thead>
    <tbody></tbody>
</table>
{literal}
<script>
(window.puqSvc = window.puqSvc || {}).init_databases = function(ctx){
    var esc = ctx.esc, baseUrl = ctx.baseUrl, puqId = ctx.puqId, fmtDate = ctx.fmtDate;
    var dt = null;
    function load() {
        puqAjax({ container: '#puq-svc-db-table', loadingCaption: 'Loading databases…',
            url: baseUrl + 'listServiceDatabases&id=' + puqId, dataType: 'json',
            success: function(r){
                var rows = (r.status === 'success' && r.data) ? r.data : [];
                $('#puq-svc-db-count').text(rows.length + ' database(s)');
                if (dt) { dt.destroy(); $('#puq-svc-db-table tbody').empty(); }
                rows.forEach(function(d){
                    var cls = ({queued:'default',deploying:'info',active:'success',error:'danger',pending_delete:'warning',deleting:'warning'})[d.deploy_status] || 'default';
                    $('#puq-svc-db-table tbody').append('<tr>' +
                        '<td>' + esc(d.id) + '</td>' +
                        '<td><strong>' + esc(d.db_name) + '</strong></td>' +
                        '<td><code>' + esc(d.db_user) + '</code></td>' +
                        '<td>' + esc(d.engine) + '</td>' +
                        '<td>' + esc(d.charset) + '</td>' +
                        '<td style="white-space:nowrap;">' + fmtBytes((parseFloat(d.size_mb) || 0) * 1048576) + '</td>' +
                        '<td><span class="label label-' + cls + '">' + esc(d.deploy_status) + '</span></td>' +
                        '<td>' + fmtDate(d.created_at) + '</td>' +
                        '<td><small class="text-danger">' + esc(d.deploy_error || '') + '</small></td>' +
                        '</tr>');
                });
                dt = $('#puq-svc-db-table').DataTable({ order: [[0, 'desc']], pageLength: 25, autoWidth: false });
            }
        });
    }
    $('#puq-svc-db-reload').on('click', load);
    load = ctx.armAutoRefresh('databases', { selector: '#puq-svc-db-table', load: load });
    load();
};
</script>
{/literal}
