document.addEventListener('DOMContentLoaded', async () => {
  // Fetch the list of subscriptions for this customer.
  const {subscriptions} = await fetch('/subscriptions').then((r) => r.json());

  // Construct and display each subscription, its status, last4 of the card
  // used, and the current period end.
  const subscriptionsDiv = document.querySelector('#subscriptions');
  console.log(subscriptions);
  subscriptionsDiv.innerHTML = subscriptions.data.map((subscription) => {
    console.log(subscription);
    let last4 = subscription.default_payment_method?.card?.last4 || '';
    return `
      <hr>
      <h4>
        <a href="https://dashboard.stripe.com/test/subscriptions/${subscription.id}">
          ${subscription.id}
        </a>
      </h4>

      <p>
        Status: ${subscription.status}
      </p>

      <p>
        Card last4: ${last4}
      </p>
      <small>If the last4 is blank, ensure webhooks are being handled. The default payment method is set in the webhook handler.</small>

      <p>
        Current period end: ${new Date(subscription.current_period_end * 1000)}
      </p>

      <a href="change-payment-method.html?subscription=${subscription.id}"> Update payment method </a><br />
      <a href="change-plan.html?subscription=${subscription.id}"> Change plan </a><br /> 
      <a href="cancel.html?subscription=${subscription.id}"> Cancel </a><br />
    `;
  }).join('<br />');
});