{* Mailboxes tab — read-only observer for admin. Client area owns CRUD. *}
<div style="margin-bottom:8px;">
    <button type="button" class="btn btn-default btn-xs" id="puq-svc-mb-reload"><i class="fa fa-sync"></i> Reload</button>
    <span class="text-muted small" id="puq-svc-mb-count" style="margin-left:8px;"></span>
</div>
<table class="table table-striped table-condensed" id="puq-svc-mb-table" style="width:100%;">
    <thead><tr>
        <th>ID</th><th>Email</th><th>Used / Quota</th><th>Status</th>
        <th>Created</th><th>Updated</th><th>Error</th>
    </tr></thead>
    <tbody></tbody>
</table>
{literal}
<script>
(window.puqSvc = window.puqSvc || {}).init_mailboxes = function(ctx){
    var esc = ctx.esc, baseUrl = ctx.baseUrl, puqId = ctx.puqId, fmtDate = ctx.fmtDate;
    var dt = null;
    function load() {
        puqAjax({ container: '#puq-svc-mb-table', loadingCaption: 'Loading mailboxes…',
            url: baseUrl + 'listServiceMailboxes&id=' + puqId, dataType: 'json',
            success: function(r){
                var rows = (r.status === 'success' && r.data) ? r.data : [];
                $('#puq-svc-mb-count').text(rows.length + ' mailbox(es)');
                if (dt) { dt.destroy(); $('#puq-svc-mb-table tbody').empty(); }
                rows.forEach(function(m){
                    var cls = ({queued:'default',deploying:'info',active:'success',error:'danger',pending_delete:'warning',deleting:'warning'})[m.deploy_status] || 'default';
                    // Match the client mailbox page: show used disk / quota, with
                    // quota 0 rendered as ∞ (unlimited). Sizes are in MB → bytes.
                    var mbUsed = parseFloat(m.u_disk_mb || 0), mbQuota = parseInt(m.quota_mb, 10) || 0;
                    var quotaTxt = mbQuota > 0 ? fmtBytes(mbQuota * 1048576) : '<span class="text-muted">∞</span>';
                    var usedQuota = (mbUsed <= 0 && mbQuota <= 0) ? '<span class="text-muted">∞</span>'
                                    : (fmtBytes(mbUsed * 1048576) + ' <small class="text-muted">/</small> ' + quotaTxt);
                    $('#puq-svc-mb-table tbody').append('<tr>' +
                        '<td>' + esc(m.id) + '</td>' +
                        '<td><strong>' + esc(m.email) + '</strong></td>' +
                        '<td style="white-space:nowrap;">' + usedQuota + '</td>' +
                        '<td><span class="label label-' + cls + '">' + esc(m.deploy_status) + '</span></td>' +
                        '<td>' + fmtDate(m.created_at) + '</td>' +
                        '<td>' + fmtDate(m.updated_at) + '</td>' +
                        '<td><small class="text-danger">' + esc(m.deploy_error || '') + '</small></td>' +
                        '</tr>');
                });
                dt = $('#puq-svc-mb-table').DataTable({ order: [[0, 'desc']], pageLength: 25, autoWidth: false });
            }
        });
    }
    $('#puq-svc-mb-reload').on('click', load);
    load = ctx.armAutoRefresh('mailboxes', { selector: '#puq-svc-mb-table', load: load });
    load();
};
</script>
{/literal}
