<div class="form-row giftcard-row">
  <div class="giftcard">
    <div class="giftcard__wrapper">
      <span
          class="giftcard-add"
          id="giftcard-toggle"
          role="button"
          tabindex="0"
          aria-controls="giftcard-inline"
          aria-expanded="false"
      >
        <span class="icon">
          <i class="fas fa-plus giftcard-add__icon" aria-hidden="true"></i>
        </span>
        <span class="giftcard-add__text">Add Wickes Gift Card</span>
      </span>
      <span class="giftcard-hint">Combine with Credit/Debit card</span>
    </div>

    <div class="giftcard__container">
      <div class="giftcard-inline" id="giftcard-inline" hidden>
        <div class="giftcard-inline__header">
          <span class="giftcard-inline__title">Add Wickes Gift Card</span>
            <a href="https://www.showmybalance.com/" target="_blank" class="giftcard-inline__balance">Check balance</a>
          <span class="giftcard-inline__close">
            <i class="fal fa-times" aria-hidden="true"></i>
          </span>
        </div>

        {{> notifications classModifier="notification_error" error=true withCloseBtn="true"}}

        <form class="giftcard-inline__form">
          <div class="giftcard-inline__fields">
            {{> form-row
                id="giftcard-number"
                label="Gift Card number"
                required="true"
                placeholder="0000-0000-0000-0000"
                row-mod="giftcard__field giftcard__field--number"
                name="giftcard-number"
                maxlength="19"
                inputmode="numeric"
                type="tel"
                autocomplete="off"
                input-mod="giftcard__input"
                skipGlobalValidation=true
            }}

            {{> form-row
                id="giftcard-pin"
                label="Gift Card PIN"
                required="true"
                placeholder="00000000"
                row-mod="giftcard__field giftcard__field--pin"
                name="giftcard-pin"
                maxlength="8"
                type="password"
                inputmode="numeric"
                autocomplete="off"
                input-mod="giftcard__input"
                skipGlobalValidation=true
                showContent=(hash
                    idToggleIcon="giftcard-pin-toggle"
                    classCustomIcon="fas fa-eye-slash"
                    idCustomIcon="giftcard-pin-eye"
                )
            }}

            <div class="giftcard__actions">
              {{> button text="Add" modification="giftcard__btn" }}
            </div>
          </div>
        </form>
      </div>

    </div>

  </div>

  <div class="giftcard-applied" id="giftcard-applied" hidden>
    <div class="giftcard-applied__inner" role="status" aria-live="polite">
      <span class="giftcard-applied__icon" aria-hidden="true">
        <i class="fas fa-check-circle"></i>
      </span>
      <p class="giftcard-applied__text">
        Gift Card added successfully, basket total updated
      </p>
    </div>
  </div>
</div>
