/**
 * javascript/pods.js
 *
 * Pods panel: one card per pod with its member containers nested inside,
 * backed by ajax/pods.php (which itself cross-references containers.php's
 * data server-side — see that file for why).
 */
(function () {
  'use strict';
  const P = window.Podman;

  function memberRow(m) {
    return '' +
      '<tr>' +
      '<td>' + P.escapeHtml(m.name) + '</td>' +
      '<td class="mono podman-row-sub">' + P.escapeHtml(m.image) + '</td>' +
      '<td><span class="podman-chip ' + P.stateChipClass(m.state) + '"><span class="d"></span>' + P.escapeHtml(m.state) + '</span></td>' +
      '</tr>';
  }

  function podCard(pod) {
    const members = pod.members.length
      ? pod.members.map(memberRow).join('')
      : '<tr><td colspan="3" class="podman-empty-note">No member containers</td></tr>';

    return '' +
      '<div class="podman-pod-card">' +
      '<div class="podman-pod-head">' +
      '<span class="podman-chip ' + P.stateChipClass(pod.status) + '"><span class="d"></span>' + P.escapeHtml(pod.status) + '</span>' +
      '<span class="name">' + P.escapeHtml(pod.name) + '</span>' +
      '<span class="infra">' + pod.containersTotal + ' container(s)</span>' +
      '</div>' +
      '<div class="podman-table-wrap"><table><thead><tr><th>Container</th><th>Image</th><th>Status</th></tr></thead>' +
      '<tbody>' + members + '</tbody></table></div>' +
      '</div>';
  }

  function load() {
    const container = P.el('podman-panel-pods');
    return P.get('pods', 'list').then(function (pods) {
      container.innerHTML = pods.length
        ? pods.map(podCard).join('')
        : '<div class="podman-card"><div class="podman-empty-note">No pods yet.</div></div>';
    }).catch(function (err) {
      container.innerHTML = '<div class="podman-card"><div class="podman-error">' + P.escapeHtml(err.message) + '</div></div>';
    });
  }

  P.registerPanel('pods', { init: load, refresh: load });
})();