{% load membership_tags %}

<div class="text-center">
  <h3 class="mb-1">{{ member.display_name }}</h3>
  <p class="text-muted mb-3">{{ club.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 member.club.membership_annual_fee and member.membership_expiration_date %}
    <p class="mb-3">Membership expires: <strong>{{ member.membership_expiration_date|date:"M j, Y" }}</strong></p>
  {% endif %}

  {% if member.bap_points or member.hap_points or member.culture_points %}
    <p class="mb-3 text-muted small">
      {% if member.bap_points %}BAP: {{ member.bap_points }} pts{% endif %}
      {% if member.hap_points %}{% if member.bap_points %} &nbsp;|&nbsp; {% endif %}HAP: {{ member.hap_points }} pts{% endif %}
      {% if member.culture_points %}{% if member.bap_points or member.hap_points %} &nbsp;|&nbsp; {% endif %}Culture: {{ member.culture_points }} pts{% endif %}
    </p>
  {% endif %}

  <p class="mb-3 text-muted small">Member since: {{ member.createdon|date:"M j, Y" }}</p>

  {% google_wallet_save_url member as wallet_url %}
  {% comment %}
  In the app, only the wallet that phone actually has: the Google Wallet save URL opens in the
  system browser, so on an iPhone it's a button that leaves the app to do nothing, and an Apple
  Wallet download on Android is the same in reverse. On the web both are offered, since the browser
  could be on either platform.
  {% endcomment %}
  <div class="d-flex flex-wrap justify-content-center gap-2 mb-3">
    {% if wallet_url and request.mobile_app_platform != 'ios' %}
      <a class="btn btn-dark btn-sm" href="{{ wallet_url }}" target="_blank" rel="noopener">
        <i class="bi bi-google"></i> Add to Google Wallet
      </a>
    {% endif %}
    {% if apple_wallet_enabled and member.club.show_member_barcode %}
      {% if request.mobile_app_platform != 'android' %}
      <a class="btn btn-dark btn-sm" href="{% url 'club_member_apple_wallet_by_uuid' slug=club.slug uuid=member.uuid %}">
        <i class="bi bi-apple"></i> Add to Apple Wallet
      </a>
      {% endif %}
    {% elif wallet_url and not request.is_mobile_app %}
      {% comment %}
      Google Wallet is configured but Apple isn't — show a stub that explains why. Web only: the
      explainer's "or just take a screenshot" is written for someone reading on a computer, and it
      reads as nonsense on the phone that would have held the pass.
      {% endcomment %}
      <button class="btn btn-dark btn-sm" type="button"
        data-bs-toggle="collapse" data-bs-target="#apple-wallet-explainer"
        aria-expanded="false" aria-controls="apple-wallet-explainer">
        <i class="bi bi-apple"></i> Add to Apple Wallet
      </button>
    {% endif %}
  </div>

  {% if not apple_wallet_enabled and wallet_url and not request.is_mobile_app %}
  <div id="apple-wallet-explainer" class="collapse mb-3">
    <div class="alert alert-info mb-0">
      Apple wants a hundred bucks to add passes, which is crazy given everything else is completely free.
      If you want to add membership cards to your iPhone, send the $100 to TFCB and we'll get verified with them
      and enable Apple Wallet integration for everyone. Or just take a screenshot.
    </div>
  </div>
  {% endif %}
</div>