{% extends 'base.html.twig' %}

{% block title %}
	{{ parent() }}
	- Purchase
{% endblock %}

{% set freq_text = {
  'monthly': 'every month',
  'onetime': 'one time payment',
} %}

{% block content %}
  {% if not product.enabled %}
    <div class="row g-2">
      <div class="col">
        <div class="card mb-2">
          <div class="card-body">
            {# Error page for disabled product #}
            <div class="alert alert-danger mb-2">
              <h5 class="alert-heading">Product Disabled</h5>
              <p>This product is currently disabled and cannot be purchased.</p>
              <p class="m-0">If you believe this is an error, please contact support.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <div class="row g-2">
      <!-- Product Info Card - Always visible on top for mobile -->
      <div class="col-12 d-lg-none mb-2">
        <div class="card">
          <div class="row g-0">
            <div class="col-4">
              <img src="{{ product.image }}" class="img-fluid rounded-start" alt="{{ product.name }}">
            </div>
            <div class="col-8">
              <div class="card-body d-flex flex-column text-center h-100 justify-content-center">
                <h5 class="card-title">{{ product.name }}</h5>
                <p class="card-text">
                  <span class="text-success">{{ product.price | tarin_price(2) }}</span>
                  {{ freq_text[product.frequency] }}
                </p>
                <a href="{{ path('checkout', {'id': product.id}) }}" class="btn btn-primary w-100">Purchase</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Main Content Column -->
      <div class="col-12 col-lg-9 order-2 order-lg-1">
        {% if product.readme %}
          <div class="alert alert-warning mb-2">
            <div><strong>Read me</strong></div>
            <div>
              {{ product.readme }}
            </div>
          </div>
        {% endif %}
        <div class="card mb-2">
          <div class="card-body">
            {{ product.description|raw }}
          </div>
        </div>
      </div>

      <!-- Sidebar Product Info - Only visible on large screens -->
      <div class="col-lg-3 d-none d-lg-block order-1 order-lg-2">
        <div class="card mb-2 overflow-hidden">
          <img src="{{ product.image }}" class="card-img-top" alt="{{ product.name }}">
          <div class="card-body text-center">
            <h5 class="card-title">{{ product.name }}</h5>
            <p class="card-text">
              <span class="text-success">{{ product.price | tarin_price(2) }}</span>
              {{ freq_text[product.frequency] }}</p>
            <a href="{{ path('checkout', {'id': product.id}) }}" class="btn btn-primary w-100">Purchase</a>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock %}