{% extends "base.html" %}
{% block title %}Membership — {{ club.name }}{% endblock %}

{% block content %}
<div class="card mx-auto" style="max-width: 600px;">
  <div class="card-body text-center">
    <h3 class="card-title mb-1">{{ club.name }}</h3>
    <p class="text-muted mb-3">{{ member.display_name }}</p>

    {% if member.club.show_member_barcode %}
      <div class="text-muted small mb-1">Membership number</div>
      <div class="font-monospace fs-4 mb-3">{{ member.membership_number }}</div>
      {% if member.barcode_image_link %}
        <div class="membership-barcode mb-3" style="max-width: 320px; margin-left: auto; margin-right: auto;">
          <img src="{{ member.barcode_image_link }}" alt="Membership barcode" style="width:100%;height:auto;">
        </div>
      {% endif %}
    {% endif %}

    {% if expiration %}
      {% if is_expired %}
        <div class="alert alert-danger">
          <strong>Expired</strong> on {{ expiration|date:"M j, Y" }}.
        </div>
      {% else %}
        <div class="alert alert-success">
          <strong>Active</strong> — expires {{ expiration|date:"M j, Y" }}.
        </div>
      {% endif %}
    {% elif club.membership_annual_fee and is_expired %}
      <div class="alert alert-danger">Expired</div>
    {% endif %}

    {% if membership_invoice %}
      {% include "partials/membership_payment_inline.html" %}
    {% elif club.membership_annual_fee and is_paid_member and not is_expired and not expiring_soon %}
      <p class="text-muted small mt-3">You're all paid up. You can renew again when your membership is close to expiring.</p>
    {% endif %}
  </div>
</div>
{% endblock %}