<div class="voucher">
  <div class="voucher__grid">
    <div class="voucher__cell">
      {{!-- image --}}
      <div class="voucher__image-wrap">
        <img src="{{img}}" alt="{{imgAlt}}">
      </div>
      {{!-- /image --}}
    </div>
    {{#ifCond isOnline '||' isInstore}}
      <div class="voucher__column">
        {{#if isOnline}}
          <div class="voucher__cell d-flex flex-column">
            {{!-- online --}}
            <span class="voucher__label">{{online.label}}</span>
            <div class="voucher__content">
              <div>
                {{#if online.title}}
                  <h4 class="mb-0">{{online.title}}</h4>
                {{/if}}
                <p class="mt-2 mb-0">{{online.note}}</p>
              </div>
              <div class="my-3">
                <span class="voucher__code-title">Code:</span>
                <span class="voucher__code-field copy-tradePro-barcode">
                  <span>{{online.code}}</span>
                  <input type="hidden" value="{{online.code}}" disabled>
                  <span class="icon">
                    <i class="fas fa-copy"></i>
                  </span>
                </span>
              </div>
              {{#ifCond online.buttonLink "&&" online.buttonText}}
                <a href="{{online.buttonLink}}" class="btn btn-primary">
                  <span class="btn__text">{{online.buttonText}}</span>
                </a>
              {{/ifCond}}
            </div>
            {{!-- /online --}}
          </div>
        {{/if}}
                {{#if isInstore}}
          <div class="voucher__cell d-flex flex-column">
            {{!-- instore --}}
            <span class="voucher__label">{{instore.label}}</span>
            <div class="voucher__content">
              <div>
                {{#if instore.title}}
                  <h4 class="mb-0">{{instore.title}}</h4>
                {{/if}}
                <p class="mt-2 mb-0">{{instore.expiration}}</p>
              </div>
              <div class="mt-3">
                <div class="voucher__code-title mb-2">Code:</div>
                <div class="{{#if instore.isQR}}voucher__qr-img{{else}}voucher__barcode-img{{/if}}">
                  <img src="{{instore.barcodeImgSrc}}" alt="{{instore.barcodeImgAlt}}">
                </div>
                <div class="voucher__barcode-number mb-3">{{instore.barcodeNumber}}</div>
                {{#ifCond instore.buttonLink "&&" instore.buttonText}}
                  <a href="{{instore.buttonLink}}" class="btn btn-primary">
                    <span class="btn__text">{{instore.buttonText}}</span>
                  </a>
                {{/ifCond}}
              </div>
            </div>
            {{!-- /instore --}}
          </div>
        {{/if}}
      </div>
    {{/ifCond}}
    <div class="voucher__cell voucher__description">
      {{!-- description --}}
      {{#if description.short}}
        <p class="voucher__description-title mb-2">{{description.short}}</p>
      {{/if}}
      <p class="voucher__description-text mb-0">{{{description.long}}}</p>
      {{#ifCond description.buttonLink "&&" description.buttonText}}
        <a href="{{description.buttonLink}}" class="btn btn-primary voucher__description-button">
          <span class="btn__text">{{description.buttonText}}</span>
        </a>
      {{/ifCond}}
      {{!-- /description --}}
    </div>
  </div>
</div>
