{{ if .tickets }}
<div class="container max-w-3xl mx-auto px-4 py-12">
  <div class="w-full">
    {{ if .description }}
      <div class="{{ .description_class }}">
        {{ .description | markdownify }}
      </div>
    {{ end }}
    {{ $tickets := .tickets }}
    {{ range $index, $ticket := $tickets }}
    <h2 class="text-3xl font-bold {{ $ticket.title_class }}">{{ $ticket.title }}</h2>
    <h4 class="text-xl {{ $ticket.subtitle_class }}">{{ $ticket.subtitle }}</h2>
    {{/*  <div class="columns-3s">  */}}
    <div id="pricing"
        class="grid grid-cols-1 gap-4 leading-7 text-gray-900 border-0 border-gray-200 py-4 sm:gap-6 md:gap-4 lg:grid-cols-2 {{ $ticket.section_class }}">
      {{ range $option_index, $option := $ticket.options }}

      <!-- Ticket options -->
      {{/*  <div class="rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-2">{{ $option.name }}</h2>

        <div class="flex justify-between items-center mb-4">
          <span class="text-lg">{{ $option.title }}</span>
          <span class="font-bold text-2xl">${{ $option.price }}</span>
        </div>

        {{ with $option.button }}
        <a href=""
          class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded mt-4 transition duration-300">
          Register Now
        </a>
        {{ end }}

        <h3 class="text-xl font-semibold mt-6">Features</h3>
        <ul>
          {{ range $feature := $option.features }}
          <li class="{{ $feature.text_class }}">{{ $feature.text }}</li>
          {{ end }}
        </ul>
      </div>  */}}

    <div class="relative z-10 flex flex-col items-center max-w-md p-4 mx-auto border border-solid {{ $option.ticket_class }} rounded-lg sm:p-6 md:p-6">
    <p class="m-0 text-lg leading-tight tracking-tight border-0 border-gray-200 {{ $option.name_class }}">
      {{ $option.name | markdownify }}
    </p>
    <h3 class="m-0 text-2xl font-semibold leading-tight tracking-tight border-0 border-gray-200 sm:text-3xl md:text-4xl {{ $option.title_class }}">
      {{ $option.title | markdownify }}
    </h3>
    <div class="flex gap-2 items-center mt-4 leading-7 border-0 border-gray-200">
      {{ $original_styles := "box-border text-light line-through text-2xl font-semibold leading-none border-solid" }}
      {{ if $option.original_price }}
      <p class="{{ $original_styles }}">
        {{ $option.original_price | markdownify }}
      </p>
      {{ end }}

      <div class="flex items-center">
        <p class="text-3xl">$</p>
        <p class="box-border m-0 text-6xl font-semibold leading-none border-solid {{ $option.price_class }}">
          {{ $option.price | markdownify }}
        </p>
      </div>

      {{/* to center the overall content */}}
      {{ if $option.original_price }}
      <p class="{{ $original_styles }} invisible">
        {{ $option.original_price | markdownify }}
      </p>
      {{ end }}
    </div>
    <ul class="flex-1 p-0 mt-4 leading-7 text-gray-900 border-0 border-gray-200 {{ $option.features_class }}">
      {{ range $feature_index, $feature := $option.features }}
      <li class="inline-flex items-center block w-full mb-2 text-left border-solid">
        <span class="{{ $feature.text_class }} text-center w-full">{{ $feature.text }}</span>
      </li>
      {{ end }}
    </ul>
    <a href="{{ $option.button.url }}"
      class="inline-flex justify-center w-full px-4 py-3 mt-8 font-sans text-sm leading-none text-center no-underline sm:text-base md:text-lg {{ $option.button.class }}">
      {{ $option.button.title }}
    </a>
    {{ if $option.button.alt_paypal_id }}
      <!-- PayPal integration -->
      <div style="width:60%;margin:auto;">
      <br>
      <div id="smart-button-container">
        <div style="text-align: center;">
          <div id="{{ $option.button.alt_paypal_id }}"></div>
        </div>
      </div>
      </div>
    {{ end }}
  </div>

      <!-- / Ticket options -->

      {{ end }}
    </div>
    {{ end }}
    {{/* {{ if .options }}
    {{ range $index, $ticket := .options }}
    <li class="bg-white rounded-lg shadow-md p-6">
      <h3 class="text-xl font-semibold mb-2">{{ $ticket.title }}</h3>
      <p class="mb-4">{{ $ticket.subtitle }}</p>

      <div class="flex justify-between items-center mb-4 border-b pb-2">
        <span class="text-gray-600">Price:</span>
        <span class="font-bold text-green-500">${{ $ticket.price }}</span>
      </div>

      {{ if hasPrefix $ticket.button.title "Register" }}
      <a href="{{ $ticket.button.url }}"
        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-full">
        Register Now
      </a>
      {{ end }}

      <ul class="mt-4 space-y-2">
        {{ range $featureIndex, $feature := $ticket.features }}
        <li class="flex items-center justify-between">
          <span class="text-gray-600">{{ $feature.text }}</span>
          {{ if hasPrefix $feature.text_class "font-" }}
          <span class="{{ $feature.text_class }}">{{ $feature.text }}</span>
          {{ else }}
          <span>{{ $feature.text }}</span>
          {{ end }}
        </li>
        {{ end }}
      </ul>
    </li>
    {{ end }}
    {{ end }} */}}
  </div>
</div>

<!-- PayPal JS - Live ID (?) -->
  <script src="https://www.paypal.com/sdk/js?client-id=AZc6g3jzPRR4Ahf6ZeFKzBUw-TWzSIPev386n8eRe4XBTJSqnL7OtXx4YbcTN5mcI_MtvT30Bo9dxXOb&disable-funding=credit,card&currency=USD" data-sdk-integration-source="button-factory">
  </script>

  <script>
    function hmbPhysicalTicket() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"HMB Physical Track (2025)","amount":{"currency_code":"USD","value":199}}],
            application_context: { shipping_preference: 'NO_SHIPPING'}
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            // Redirect
            actions.redirect('https://handmadecities.com/registered');          
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-hmb-physical-ticket');
    }

    function hmsPhysicalTicket() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"HMS Physical Track (2025)","amount":{"currency_code":"USD","value":199}}],
            application_context: { shipping_preference: 'NO_SHIPPING'}
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            // Redirect
            actions.redirect('https://handmadecities.com/registered');          
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-hms-physical-ticket');
    }

    function hmcPhysicalTicket() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"HMC Physical Track (2025)","amount":{"currency_code":"USD","value":299}}],
            application_context: { shipping_preference: 'NO_SHIPPING'}
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            // Redirect
            actions.redirect('https://handmadecities.com/registered');          
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-hmc-physical-ticket');
    }

    function onlineTicket() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"HMS Online Track (2025)","amount":{"currency_code":"USD","value":59}}],
            application_context: { shipping_preference: 'NO_SHIPPING'}
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            // Redirect
            actions.redirect('https://handmadecities.com/registered');          
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-online-ticket');
    }

    function onlineTicketPremium() {
      paypal.Buttons({
        style: {
          shape: 'pill',
          color: 'gold',
          layout: 'vertical',
          label: 'pay',
          
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"HMS Online Track Premium (2025)","amount":{"currency_code":"USD","value":99}}],
            application_context: { shipping_preference: 'NO_SHIPPING'}
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(orderData) {
            // Full available details
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            // Redirect
            actions.redirect('https://handmadecities.com/registered');          
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-online-ticket-premium');
    }

    hmbPhysicalTicket();
    hmsPhysicalTicket();
    hmcPhysicalTicket();

    onlineTicket();
    onlineTicketPremium();
  </script>
{{ end }}