{% liquid
  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif
%}

<style>
  .divider {
    background-color: var(--light-grey);
    height: 1px;
    width: 100%;
  }
  .mb-14 {
    margin-bottom: 14px;
  }
  .mb-7 {
    margin-bottom: 7px;
  }

  
</style>

<style type="text/css" media="print">
    @page {
      size: landscape;
      margin: 0;
    }
    body {
      padding-inline: 4em;
    }
    .row {
      display: flex;
      align-items: center;
    }
    .img-col {
      width: 50%;
    }
    .text-col {
      width: 50%;
    }
    .text-col {
      padding-left: 6.6667%;
    }
    .print-only {
      display: block;
    }

    @media (max-width: 8.5in) {
      .global-content-top-margin {
        margin-top: 6em !important;
      }
      .site-header {
        top: 1em !important;
      }
    }

    @media (min-width: 8.5in) and (max-width: 11in) {
      .global-content-top-margin {
        margin-top: 5em !important;
      }
    }

    @media (min-width: 11in) {
      .global-content-top-margin {
        margin-top: 4em !important;
      }
    }
    .header-con__inner {
      justify-content: center;
    }
    .logo-main {
      display: block !important;
    }
    .announcement-bar, #site-footer, .btn1, .print-btn, .header-nav, .header-right, .logo-white, .logo-mark {
      display: none !important;
    }

</style>

<div class="container {{ padding_class }}">
  <div class="row">
    <div class="img-col col-12 col-d-5 push-d-1 mb-30 d-mb-0">
      {% render 'global-image-wrapper', image: section.settings.image, image_alt: 'Gift Card Illustration' %}
    </div>
    <div class="text-col col-12 col-d-4 push-d-2">
      <div class="quote flex flex-column">
        {% if gift_card.message != blank %}
          <div class="h4 c-brown mb-14">"{{ gift_card.message }}"</div>
        {% endif %}
        {% if gift_card.customer.name != blank %}
          <div class="p5 c-brown">{{ gift_card.customer.name }}</div>
        {% endif %}
      </div>
      <div class="divider mt-30 mb-30"></div>
      <div class="p5 c-brown mb-7">{{ 'gift_cards.issued.redeem_html' | t }}</div>
      <div
        class="no-print bg-dark-beige pl-20 pr-20 pt-15 pb-15 w-full c-brown mb-10"
        onclick="selectText('gift-card-code-digits');"
      >
        <div id="gift-card-code-digits" class="uppercase p3">{{ gift_card.code | format_code }}</div>
      </div>

      {% unless gift_card.enabled %}
        <div class="p4 c-brown mb-30 bold-500">{{ 'gift_cards.issued.disabled' | t }}</div>
      {% endunless %}
      {% if gift_card.expired and gift_card.enabled %}
        <div class="p4 c-brown mb-30">
          {{ 'gift_cards.issued.expired' | t }} <span class="bold-500">{{ gift_card.expires_on | date: '%d/%m/%y' }}</span>
        </div>
      {% endif %}
      {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
        <div class="p4 c-brown mb-30">
          {{ 'gift_cards.issued.active' | t }} <span class="bold-500">{{ gift_card.expires_on | date: '%d/%m/%y' }}</span>
        </div>
      {% endif %}
      <a href="{{ shop.url }}" class="btn1 w-full tc">{{ 'layout.cart.go_shopping' | t }}</a>
      <div class="mt-10">
        <a href="#" ref="nofollow" class="link3" onclick="window.print();">{{ 'gift_cards.issued.print' | t }}</a>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);

    if (doc.body.createTextRange) {
      // ms
      var range = doc.body.createTextRange();
      range.moveToElementText(text);
      range.select();
    } else if (window.getSelection) {
      // moz, opera, webkit
      var selection = window.getSelection();
      var range = doc.createRange();
      range.selectNodeContents(text);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
</script>

{% schema %}
{
  "name": "Gift Card",
  "settings": [
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "select",
      "id": "padding",
      "label": "Padding",
      "options": [
        {
          "value": "no",
          "label": "No"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "md",
          "label": "Med"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "md"
    },
    {
      "type": "checkbox",
      "id": "top_half_padding",
      "label": "Top half padding",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bottom_half_padding",
      "label": "Bottom half padding",
      "default": false
    },
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
  ],
  "presets": [
    {
      "name": "Gift Card"
    }
  ]
}
{% endschema %}