{% layout 'gift_card' %}

{%- assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency -%}
{%- assign formatted_initial_value_stripped = formatted_initial_value | strip_html -%}

<header class="giftcard__header text-center" role="banner">
  <div class="site-header__logo h1 text-center" itemscope itemtype="http://schema.org/Organization">
    <a href="{{ shop.url }}" class="site-header__link site-header__logo-link" itemprop="url">{{ shop.name }}</a>
  </div>

  <h1>{{ 'gift_cards.issued.subtext' | t }}</h1>
  {% unless gift_card.enabled %}
    <p class="giftcard__tag">{{ 'gift_cards.issued.disabled' | t }}</p>
  {% endunless %}
  {% assign gift_card_expiry_date = gift_card.expires_on | date: "%d/%m/%y" %}
  {% if gift_card.expired and gift_card.enabled %}
    <p class="giftcard__tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</p>
  {% endif %}
  {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
    <p class="giftcard__tag giftcard__tag--active">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</p>
  {% endif %}
</header>

<div class="giftcard-wrapper">
  <main class="giftcard" role="main">
    <div class="giftcard__wrap">
      <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="">

      {%- assign initial_value_size = formatted_initial_value | size -%}
      <div class="h1 giftcard__amount{% if initial_value_size > 6 %} giftcard__amount--medium{% endif %}">
        {% if gift_card.balance != gift_card.initial_value %}
          <span class="giftcard__tooltip">
            <span class="giftcard__tooltip-label">{{ 'gift_cards.issued.remaining_html' | t: balance: gift_card.balance | money }}</span>
          </span>
        {% endif %}
        <strong>{{ formatted_initial_value }}</strong>
      </div>

      {%- assign code_size = gift_card.code | format_code | size -%}
      <div class="giftcard__code{% if code_size <= 25 %} giftcard__code--large{% elsif code_size > 25 and code_size <= 30 %} giftcard__code--medium{% else %} giftcard__code--small{% endif %}" onclick="selectText('GiftCardDigits');">
        <div class="giftcard__code__inner">
          <strong class="giftcard__code__text {% if gift_card.expired or gift_card.enabled != true %} disabled{% endif %}" id="GiftCardDigits">{{ gift_card.code | format_code }}</strong>
        </div>
      </div>
    </div>

    <p class="text-center">
      {{ 'gift_cards.issued.redeem_html' | t: value: formatted_initial_value_stripped }}
    </p>

    <div id="QrCode" class="giftcard__qr-code" data-identifier="{{ gift_card.qr_identifier }}"></div>

    <div class="text-center">
      <p>
        <a href="{{ shop.url }}" class="btn" target="_blank">
          {{ 'gift_cards.issued.shop_link' | t }}
          {% include 'icon-arrow-right' %}
        </a>
      </p>
      <p>
        <button type="button" class="btn btn--secondary print-link" onclick="window.print();">
          {{ 'gift_cards.issued.print' | t }}
        </button>
      </p>
      {% if gift_card.pass_url %}
        <p>
          <a class="giftcard__apple-wallet" href="{{ gift_card.pass_url }}">
            <img class="giftcard__apple-wallet-image" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}">
          </a>
        </p>
      {% endif %}
    </div>
  </main>
</div>
