{% extends "base.html" %}

{% block content %}
<div class="pp-user-container"
     data-gateway-script="{{ gateway_script_url | default(value='') }}"
     data-active-gateway="{{ active_gateway | default(value='') }}">
    <div class="pp-page-header">
        <h1>Premium Pass</h1>
        <p>Unlock premium benefits and exclusive discounts with our subscription passes.</p>
    </div>

    {% if lifetime_savings is defined and lifetime_savings > 0 %}
    <section class="pp-lifetime-savings" aria-label="Lifetime Premium Pass savings">
        <div class="pp-lifetime-card">
            <span class="pp-lifetime-icon" aria-hidden="true">✨</span>
            <div class="pp-lifetime-text">
                <p class="pp-lifetime-label">Lifetime savings with Premium Pass</p>
                <p class="pp-lifetime-amount">{{ currency_symbol }}{{ lifetime_savings | price }}</p>
            </div>
        </div>
    </section>
    {% endif %}

    {% if my_subscriptions | length > 0 %}
    <section class="active-subscriptions">
        <h2 class="pp-section-title">My Active Subscriptions</h2>
        <div class="pp-subscriptions-grid">
            {% for sub in my_subscriptions %}
            <div class="pp-sub-card">
                <div class="pp-sub-header">
                    <i class="fas fa-check-circle"></i>
                    <h3>{{ sub.pass_title }}</h3>
                </div>
                <div class="sub-body">
                    {% if sub.offer_description %}
                    <p class="pp-pass-offer">{{ sub.offer_description }}</p>
                    {% endif %}
                    <p>Valid until: <strong>{{ sub.end_date | date_in_tz(timezone=settings.timezone, format='%d %b, %Y') }}</strong></p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="available-passes">
        <h2 class="pp-section-title">Available Passes</h2>
        {% if passes | length > 0 %}
        <div class="pp-passes-grid">
            {% for pass in passes %}
            <div class="pp-pass-card">
                <div class="pass-info">
                    <h3>{{ pass.title }}</h3>
                    {% if pass.offer_description %}
                    <p class="pp-pass-offer">{{ pass.offer_description }}</p>
                    {% endif %}
                    {% if pass.offer_benefits and pass.offer_benefits | length > 1 %}
                    <ul class="pp-pass-benefits">
                        {% for benefit in pass.offer_benefits %}
                        <li>{{ benefit }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% if pass.description %}
                    <p class="pp-pass-description">{{ pass.description }}</p>
                    {% endif %}
                    <div class="pass-meta">
                        <span class="pp-pass-price">{{ currency_symbol }}{{ pass.price | price }}</span>
                        <span class="pp-pass-duration">/ {{ pass.duration_days }} Days</span>
                    </div>
                </div>
                <div class="pass-actions">
                    <button type="button" class="blocks-button blocks-button-primary w-full buy-pass-btn"
                            data-id="{{ pass.id }}"
                            data-title="{{ pass.title }}">
                        Purchase Pass
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="pp-empty-state">
            <i class="fas fa-id-card"></i>
            <p>No passes are currently available for purchase.</p>
        </div>
        {% endif %}
    </section>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/premium-pass/assets/js/premium-pass.js"></script>
{% endblock %}