# Purchases

<div id="purchases-container">
<p style="color:var(--color-text-secondary)">Loading...</p>
</div>

<script>
(function() {
  function init() {
  var auth = window.__sitemdAuth;
  if (!auth) return;

  var container = document.getElementById('purchases-container');

  var productNames = {};
  productNames.starter = "Starter License";
  productNames.addon = "Add-On Site";
  productNames.bulk = "Bulk Site Pack";

  function formatDate(dateStr) {
    var d = new Date(dateStr);
    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
  }

  function formatAmount(cents, currency) {
    return String.fromCharCode(36) + (cents / 100).toFixed(2);
  }

  function esc(s) {
    var d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
  }

  auth.getPayments().then(function(data) {
    var payments = data.payments || [];
    var html = '';

    html += '<div class="auth-section">';
    html += '<h1>Purchase History</h1>';

    if (payments.length === 0) {
      html += '<p style="color:var(--color-text-secondary)">No purchases yet.</p>';
    } else {
      html += '<div style="overflow-x:auto">';
      html += '<table style="width:100%;border-collapse:collapse;font-size:var(--font-sm)">';
      html += '<thead><tr style="border-bottom:2px solid var(--color-border)">';
      html += '<th style="text-align:left;padding:var(--space-xs) var(--space-sm)">Date</th>';
      html += '<th style="text-align:left;padding:var(--space-xs) var(--space-sm)">Item</th>';
      html += '<th style="text-align:right;padding:var(--space-xs) var(--space-sm)">Qty</th>';
      html += '<th style="text-align:right;padding:var(--space-xs) var(--space-sm)">Total</th>';
      html += '<th style="text-align:right;padding:var(--space-xs) var(--space-sm)">Receipt</th>';
      html += '</tr></thead><tbody>';

      for (var i = 0; i < payments.length; i++) {
        var p = payments[i];
        html += '<tr style="border-bottom:1px solid var(--color-border)">';
        html += '<td style="padding:var(--space-xs) var(--space-sm)">' + formatDate(p.created_at) + '</td>';
        html += '<td style="padding:var(--space-xs) var(--space-sm)">' + esc(productNames[p.product_type] || p.product_type) + '</td>';
        html += '<td style="text-align:right;padding:var(--space-xs) var(--space-sm)">' + (p.quantity || 1) + '</td>';
        html += '<td style="text-align:right;padding:var(--space-xs) var(--space-sm)">' + formatAmount(p.amount_cents, p.currency) + '</td>';
        html += '<td style="text-align:right;padding:var(--space-xs) var(--space-sm)">';
        if (p.receipt_url) {
          html += '<a href="' + esc(p.receipt_url) + '" target="_blank">View</a>';
        } else {
          html += '<span style="color:var(--color-text-secondary)">—</span>';
        }
        html += '</td>';
        html += '</tr>';
      }

      html += '</tbody></table>';
      html += '</div>';
    }

    html += '<p style="margin-top:var(--space-lg)"><a href="/account">← Back to Account</a></p>';
    html += '</div>';

    container.innerHTML = html;

  }).catch(function() {
    container.innerHTML = '<p style="color:#dc2626">Failed to load purchase history. <a href="/login">Try logging in again</a>.</p>';
  });
  }
  if (window.__sitemdAuth) { window.__sitemdAuth.ready.then(init); }
  else { document.addEventListener('sitemd:auth-ready', init); }
})();
</script>