{% extends "base.html" %}

{% block content %}
<div data-plugin="membership" class="membership-user-container">
    <div class="user-hero-header glass-card">
        <div class="hero-content">
            <h1 class="premium-gradient-text">{{ labels.profile_label | default(value='Membership') }}</h1>
            <p>Select a {{ labels.profile_label | default(value='Membership') | lower }} for this {{ labels.organization_label | default(value='Organization') | lower }} and confirm to continue.</p>
        </div>
        <div class="hero-icon"><i class="fas fa-id-badge"></i></div>
    </div>

    {% if my_applications | length > 0 %}
    <section class="glass-card membership-section">
        <h2>Your applications</h2>
        <div class="membership-app-chips">
            {% for a in my_applications %}
            {% if a.status == 'expired' %}
            <a href="/plugins/membership/apply/{{ a.profile_id }}" class="membership-app-chip status-expired">
                <span>{{ a.profile_name }}</span>
                <small>Expired{% if a.valid_until %} · {{ a.valid_until | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}{% endif %} — Renew</small>
            </a>
            {% elif a.status == 'rejected' %}
            <a href="/plugins/membership/apply/{{ a.profile_id }}" class="membership-app-chip status-rejected">
                <span>{{ a.profile_name }}</span>
                <small>Rejected — Reapply</small>
            </a>
            {% else %}
            <a href="/plugins/membership/application/{{ a.id }}" class="membership-app-chip status-{{ a.status }}">
                <span>{{ a.profile_name }}</span>
                <small>{{ a.status | replace(from='_', to=' ') }}</small>
            </a>
            {% endif %}
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <section class="glass-card membership-select-card">
        {% if profiles | length == 0 %}
        <div class="crud-empty-state">No profiles are available at this time.</div>
        {% else %}
        <h2>Choose your {{ labels.profile_label | default(value='Membership') | lower }}</h2>
        <form id="membership-select-form" class="membership-select-form" novalidate>
            <label class="membership-select-label" for="membership-profile-select">
                {{ labels.profile_label | default(value='Membership') }}
            </label>
            <select id="membership-profile-select" name="profile_id" required>
                <option value="">Select membership…</option>
                {% for p in profiles %}
                <option value="{{ p.id }}"
                        data-status="{{ p.user_app_status | default(value='') }}"
                        data-app-id="{{ p.user_app_id | default(value='') }}">
                    {{ p.display_name | default(value=p.name) }}
                </option>
                {% endfor %}
            </select>

            <label class="membership-disclaimer-check">
                <input type="checkbox" id="membership-disclaimer-agree" required>
                <span>
                    Membership cannot be transferred once applied. If I choose the wrong
                    {{ labels.profile_label | default(value='Membership') | lower }}, I must reapply.
                    I agree.
                </span>
            </label>

            <button type="submit" class="btn btn-primary" id="membership-select-continue" disabled>
                Continue
            </button>
        </form>
        {% endif %}
    </section>
</div>
{% endblock %}