{% extends "base.html" %}

{% block content %}
<div data-plugin="membership" class="membership-user-container membership-my-page">
    <div class="user-hero-header glass-card mb-4">
        <h1>My {{ labels.profile_label | default(value='Membership') }}</h1>
        <p>Your digital {{ labels.entity_singular | default(value='Member') | lower }} identity cards.</p>
    </div>

    {% if memberships | length == 0 and expired_memberships | default(value=[]) | length == 0 %}
    <div class="glass-card crud-empty-state">
        <p>You do not have an active membership yet.</p>
        <a href="/plugins/membership/index" class="btn btn-primary mt-3">Browse profiles</a>
    </div>
    {% else %}
    <div class="membership-id-cards">
        {% for m in memberships %}
        <article class="membership-id-card"
                 data-token="{{ m.badge_token }}"
                 data-badge-color="{{ m.badge_color | default(value='') }}">
            <header class="membership-id-card__header">
                <div class="membership-id-card__brand">
                    {% if m.badge_icon_url %}
                    <img src="{{ m.badge_icon_url }}" alt="" class="membership-id-card__brand-icon">
                    {% elif m.badge_icon %}
                    <i class="{{ m.badge_icon }} membership-id-card__brand-icon-fa" aria-hidden="true"></i>
                    {% else %}
                    <i class="fas fa-id-badge membership-id-card__brand-icon-fa" aria-hidden="true"></i>
                    {% endif %}
                    <span class="membership-id-card__brand-label">{{ m.badge_label | default(value=m.profile_name) }}</span>
                </div>
            </header>

            <div class="membership-id-card__body">
                <div class="membership-id-card__avatar" aria-hidden="true">
                    {% if m.badge_icon_url %}
                    <img src="{{ m.badge_icon_url }}" alt="">
                    {% elif m.badge_icon %}
                    <i class="{{ m.badge_icon }}"></i>
                    {% else %}
                    <i class="fas fa-user"></i>
                    {% endif %}
                </div>

                <div class="membership-id-card__info">
                    <span class="membership-id-card__role">{{ labels.entity_singular | default(value='Member') }}</span>
                    <h2 class="membership-id-card__name">{{ m.member_name | default(value=m.user_name) | default(value=m.user_email) }}</h2>
                    <p class="membership-id-card__profile">{{ m.profile_name }}</p>

                    {% if m.profile_data %}
                    <div class="membership-id-card__fields">
                        {% for key, val in m.profile_data %}
                        <div class="membership-id-card__field">
                            <span>{{ m.profile_field_labels[key] | default(value=key | replace(from='_', to=' ') | title) }}</span>
                            <strong>{{ val }}</strong>
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <div class="membership-id-card__dates">
                        <div>
                            <span>Valid from</span>
                            <strong>{{ m.member_since }}</strong>
                        </div>
                        <div>
                            <span>Valid until</span>
                            <strong>{{ m.valid_until | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</strong>
                        </div>
                    </div>
                </div>

                <div class="membership-id-card__qr">
                    <div class="membership-qr-box membership-member-qr" data-verify-url="{{ m.verify_url }}"></div>
                    <span class="membership-id-card__qr-label">Scan to verify</span>
                </div>
            </div>

            <footer class="membership-id-card__footer">
                <span>Authorized {{ labels.entity_singular | default(value='Member') | lower }}</span>
                {% if m.id %}<span class="membership-id-card__number">No. {{ m.id }}</span>{% endif %}
            </footer>
        </article>
        {% endfor %}
    </div>
    {% endif %}

    {% if expired_memberships | default(value=[]) | length > 0 %}
    <section class="glass-card membership-section membership-expired-section">
        <h2>Expired memberships</h2>
        <p class="text-muted">These memberships are no longer active. Renew to submit a new application for approval.</p>
        <div class="membership-expired-list">
            {% for m in expired_memberships %}
            <article class="membership-expired-card">
                <div>
                    <strong>{{ m.profile_name }}</strong>
                    {% if m.valid_until %}<span class="text-muted"> · expired {{ m.valid_until | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</span>{% endif %}
                </div>
                <a href="/plugins/membership/apply/{{ m.membership_profile_id | default(value=m.profile_id) }}" class="btn btn-primary btn-sm">Renew</a>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}