{% if page.resources.special-offers.quantity > 0 %}
  {% unless site.original or site.special-offers.customers == false %}
    <p>
      {% for resource in (1..page.resources.special-offers.quantity) %}
        {% assign page-categories-size = page.categories | size %}
        {% if page-categories-size >= 1 %}
          {% assign page-categories = page.categories | join: "/" | append: "/" %}
        {% endif %}
        {% if forloop.index == 1 %}
          {% assign image-num = '' %}
        {% elsif forloop.index < 10 %}
          {% assign image-num = forloop.index | prepend: "_0" %}
        {% else %}
          {% assign image-num = forloop.index | prepend: "_" %}
        {% endif %}
        <div class="mb-2 marketing-theme content-right">
          <a class="btn btn-primary btn-sm text-white" onclick="specialOffersPDF{{ forloop.index }}();">
            <strong><i class="fas fa-download fa-lg"></i> {{ site.data.i18n.common.product-layout[site.lang].download }}</strong>
          </a>
        </div>
        <div id="special-offers-{{ forloop.index }}">
          <img id="special-offers-promo{{ forloop.index }}" crossOrigin="Anonymous" src="https://s3-us-west-2.amazonaws.com/grupopv-public/components/generators/pdf/special-offers/img/{{ page.collection }}/{{ page-categories }}{% if page.resources.special-offers.model %}{{ page.resources.special-offers.model | downcase }}{% else %}{{ page.title | downcase  }}{% endif %}{{ image-num | append: '.jpg' }}" alt="{{ page.title }}" title="{{ page.title }}">
          <img id="special-offers-data{{ forloop.index }}" crossOrigin="Anonymous" src="https://s3-us-west-2.amazonaws.com/grupopv-public/components/generators/pdf/special-offers/img/customers/{{ site.domain | replace:'.',' ' | truncatewords: 1,"" }}.png" alt="{{ page.title }}" title="{{ page.title }}">
          <canvas id="special-offers-promoCanvas{{ forloop.index }}" class="d-none" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | times: layout.special-offers.dpi }}"></canvas>
          <canvas id="special-offers-dataCanvas{{ forloop.index }}" class="d-none" width="{{ layout.special-offers.width | times: layout.special-offers.dpi }}" height="{{ layout.special-offers.height | minus: 10.5 | times: layout.special-offers.dpi | times: -1 }}"></canvas>
        </div>
        <script>
          function specialOffersPDF{{ forloop.index }}(){
            var doc = new jsPDF({
              orientation: '{{ layout.special-offers.orientation }}',
              unit: '{{ layout.special-offers.unit }}',
              format: '{{ layout.special-offers.format }}'
            })
            var promo = document.getElementById("special-offers-promo{{ forloop.index }}");
            var promoCanvas = document.getElementById("special-offers-promoCanvas{{ forloop.index }}");
            var data = document.getElementById("special-offers-data{{ forloop.index }}");
            var dataCanvas = document.getElementById("special-offers-dataCanvas{{ forloop.index }}");
            promoCanvas.getContext("2d").drawImage(promo, 0, 0);
            dataCanvas.getContext("2d").drawImage(data, 0, 0);
            doc.addImage(promoCanvas.toDataURL(), 'JPG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }}, {{ layout.special-offers.width }}, {{ layout.special-offers.height }},'promoImg','FAST')
            doc.addImage(dataCanvas.toDataURL(), 'PNG', {{ layout.special-offers.margin }}, {{ layout.special-offers.margin }} + {{ layout.special-offers.height }}, {{ layout.special-offers.width }}, {{ 11 | minus: layout.special-offers.margin | minus: layout.special-offers.margin }} - {{ layout.special-offers.height }},'dataImg','FAST')
            doc.save('{{ page.title }}.pdf')
          }
        </script>
      {% endfor %}
    </p>

  {% endunless %}
{% else %}
  <p>{{ site.data.i18n.common.product-layout[site.lang].special-offers-empty }}</p>
{% endif %}