<!DOCTYPE html>
<html 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 -%}
        {{ item }}
     {%- elsif forloop.last -%}
        {{ continue }}
     {%- else -%}
        <div class="item">
          {%- if forloop.index == 2 -%}
            <svg height="100%" width="100%" viewBox="0 0 5 2" class="upAccent" preserveAspectRatio="none">
               <path d="M 0 0 V 0.2 C 1 0.5 4 0.5 5 0.2 V 0">
            </svg>
          {%- endif -%}
          {%- 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">
            <div class="itemInner">
              <div class="description">
                {{ pair[0] }}
              </div>
              <div class="image">
                {{ pair[1] | prepend: "<img" | remove: "</p>" }}
              </div>
            </div>
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}
    {%- if itemArray.size != 1 -%}
      <div id="afterItems">
      {{ itemArray.last }}
      </div>
    {%- endif -%}
   </div>
  {% include foot.html %}
</body>
</html>