<%
  var _plan       = locals.plan       || {};
  var _isCurrent  = !!locals.isCurrent;
  var _isSelected = !!locals.isSelected;
  var _loading    = !!locals.loading;
  var _action     = locals.action     || '';
  var _className  = locals.className   || '';

  var planId      = _plan.planId      || '';
  var planName    = _plan.name        || '';
  var description = _plan.description || '';
  var price       = typeof _plan.price === 'number' ? _plan.price : 0;
  var currency    = _plan.currency    || 'USD';
  var interval    = _plan.interval    || 'MONTHLY';
  var features    = _plan.features    || [];
  var isPopular   = !!_plan.isPopular;

  var INTERVAL_LABEL = {
    MONTHLY: '/ month',
    YEARLY:  '/ year',
    ONCE:    'one-time',
  };
  var intervalLabel = INTERVAL_LABEL[interval] || INTERVAL_LABEL.MONTHLY;

  var formattedPrice;
  try {
    formattedPrice = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
      minimumFractionDigits: (price % 100 === 0) ? 0 : 2,
    }).format(price / 100);
  } catch (e) {
    formattedPrice = (price / 100).toFixed(2) + ' ' + currency;
  }

  var highlighted = isPopular || _isSelected || _isCurrent;

  var cardClass = 'relative flex flex-col rounded-2xl border p-6 transition-shadow ' +
                  (highlighted
                    ? 'border-primary shadow-md shadow-primary/10'
                    : 'border-border shadow-sm hover:shadow-md');

  var btnDisabled = _isCurrent || _loading || !_action;
  var btnText = _isCurrent ? 'Current Plan' : (_loading ? 'Processing…' : ('Choose ' + planName));
  var btnClass = 'mt-auto w-full rounded-xl px-4 py-2.5 text-sm font-medium transition-colors ' +
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ' +
                 (_isCurrent
                   ? 'bg-surface-raised text-text-secondary cursor-default'
                   : 'bg-primary text-primary-fg hover:bg-primary-hover active:bg-primary-active disabled:opacity-50 disabled:cursor-not-allowed');
%>

  <% if (isPopular && !_isCurrent) { %>
  
    
    Popular
  
  <% } %>

  <% if (_isCurrent) { %>
  
    
    Current Plan
  
  <% } %>

  

    
<%= planName %>
    <% if (description) { %>
    
<%= description %>
    <% } %>
  

  

    <%= formattedPrice %>
    <%= intervalLabel %>
  

  <% if (features && features.length > 0) { %>
  

    <% features.forEach(function(feature) { %>
    

      
      <%= feature %>
    
    <% }); %>
  
  <% } %>

  <% if (_action && !_isCurrent) { %>
  

    
    
            class="<%= btnClass %>">
      <%= btnText %>
    
  
  <% } else { %>
  
    <%= btnText %>
  
  <% } %>