<!DOCTYPE html>
<html class="clearScroll" lang="en">
{% include head.html %}

<body>
  {% include navigation.html %}

  {%- assign count = site.data.slideshow.images | size -%}
  {%- assign count_f = count | times: 1.0 -%}
  {%- assign img_percent = 100 | divided_by: count_f -%}
  {%- assign img_time_f = site.data.slideshow.img_time | times: 1.0 -%}
  {%- assign fade_percent = site.data.slideshow.fade_time | divided_by: img_time_f | times: img_percent -%}

  <style>
    #slideshow img, span {
        animation: slideshow {{ site.data.slideshow.img_time | times: count }}s infinite;
        opacity: 0;
    }
    
    @keyframes slideshow {
        {{ fade_percent }}% {opacity: 1;}
        {{ img_percent }}% {opacity: 1;}
        {{ img_percent | plus: fade_percent }}% {opacity: 0;}
    }


    #slideshow .orange {
        position: relative;
        top: 100%;
    }
    {% for item in site.data.slideshow.images %}
    #slideshow img:nth-child({{ forloop.index }}) { animation-delay: {{ forloop.index0 | times: site.data.slideshow.img_time }}s; }
    #slideshow span:nth-child({{ forloop.index | plus: count }}) { animation-delay: {{ forloop.index0 | times: site.data.slideshow.img_time }}s; }
    {% endfor %}
  </style>
  <div id="slideshowContainer">
    <div id="slideshow">
      {%- for item in site.data.slideshow.images -%}
      <img src="/assets/images/slideshow/{{ item.filename }}" alt="{{ item.caption }}">
      {%- endfor -%}
      {%- for item in site.data.slideshow.images -%}
      <span alt="{{ item.caption }}">{{ item.caption }}</span>
      {%- endfor -%}
      <div class="separator orange"></div>
    </div>
  </div>
  
  {%- if page.cardTitle -%}
  <div class="topCard">
  <div>
    <h1>{{ page.cardTitle | upcase }}</h1>
    <p>{{ page.cardDesc }}</p>
  </div>
  </div>
  {%- endif -%}

  {% assign itemArray = page.content | markdownify | split: site.item_separator %}
  <div id="bannerContent" class="content">
    {% assign itemArray = page.content | markdownify | split: site.item_separator %}
    {%- for item in itemArray -%}
     {%- assign pair = item | split:"<p><img" -%}
       {%- assign imod2 = forloop.index0 | modulo:2 -%}
       {%- if forloop.first -%}
          <div class="nonItems">
            <svg height="100%" width="100%" viewBox="0 0 5 1" class="downAccent" preserveAspectRatio="none">
              <path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
            </svg>
            <div>
            {{ item }}
            </div>
          </div>
       {%- elsif forloop.last -%}
          {%- assign strippedItem = item | strip -%}
          {%- if strippedItem != "" -%}
            <div class="nonItems">
            {%- if imod2 == 0 -%}
             <svg height="100%" width="100%" viewBox="0 0 5 1" class="upAccent" preserveAspectRatio="none">
              <path d="M 0 1 V 0.8 C 1 0.5 4 0.5 5 0.8 V 1">
             </svg>
            {%- endif -%}
             <div>
             {{ item }}
             </div>
            </div>
          {%- endif -%}
       {%- else -%}
          <div class="item">
            {%- if imod2 == 0 -%}
            <svg height="100%" width="100%" viewBox="0 0 5 1" class="upAccent" preserveAspectRatio="none">
              <path d="M 0 1 V 0.8 C 1 0.5 4 0.5 5 0.8 V 1">
            </svg>
            <svg height="100%" width="100%" viewBox="0 0 5 1" class="downAccent" preserveAspectRatio="none">
              <path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
            </svg>
            {%- endif -%}
            <div class="itemScroll clearScroll">
              <div class="itemInner">
                <div class="description">
                  {{ pair[0] }}
                </div>
                <div class="image">
                  {{ pair[1] | prepend: "<img" | remove: "</p>" }}
                </div>
              </div>
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}
   </div>
  {% include foot.html %}
</body>
</html>