const source = document.getElementById('panel-data')
const target = document.getElementById('panel')

function renderCard(card) {
  const node = document.createElement('article')
  node.className = `card ${card.kind} ${card.visibility}`

  const header = document.createElement('h3')
  header.textContent = card.title
  node.appendChild(header)

  const meta = document.createElement('p')
  meta.className = 'meta'
  meta.textContent = `${card.kind} / ${card.visibility}`
  node.appendChild(meta)

  const body = document.createElement('div')
  body.className = 'body'

  if (card.rendered_html) {
    body.innerHTML = card.rendered_html
  } else {
    body.textContent = card.body
  }

  node.appendChild(body)
  return node
}

if (source && target) {
  const snapshot = JSON.parse(source.textContent)
  const title = document.createElement('h2')
  title.textContent = snapshot.panel_title
  target.appendChild(title)

  const mode = document.createElement('p')
  mode.className = 'meta'
  mode.textContent = `mode: ${snapshot.mode}, rendered: ${snapshot.rendered_at}`
  target.appendChild(mode)

  for (const card of snapshot.cards || []) {
    target.appendChild(renderCard(card))
  }
}