{% comment %}
 # -----------------------------------------------------------------------------
 #  ~/_includes/themes/j1/procedures/posts/collate_timeline.proc
 #  Liquid PROCEDURE to collate posts along a timeline
 #
 #  http://jekyll.one
 #
 #  Copyright (C) 2019 Juergen Adams
 #
 #  J1 Template is licensed under the MIT License.
 #  See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE
 #
 # -----------------------------------------------------------------------------
 #  NOTE:
 #
 #  Collate posts procedure. Collated posts ordered along a timeline.
 #
 #    Usage:
 #
 #        1) assign the 'posts_collate' variable to a valid array of posts
 #        2) include the 'collate_timeline' procedure
 #
 #    Example:
 #
 #        {% assign posts_collate = site.posts %}
 #        {% include themes/{{site.template.name}}/procedures/posts/collate_timeline.proc items=posts_collate %}
 #
 #    Ordering:
 #
 #        Posts are displayed in reverse chronological order (descending).
 #        For ascending chronological order:
 #          Change the for loop to this:
 #            => 'for post in posts_collate reversed'
 #
 # -----------------------------------------------------------------------------
 # Test data:
 #  liquid_var:  {{ liquid_var | debug }}
 #
 # -----------------------------------------------------------------------------
{% endcomment %}

{% comment %} Liquid procedures
-------------------------------------------------------------------------------- {% endcomment %}

{% comment %} Variables
-------------------------------------------------------------------------------- {% endcomment %}
{% assign builder_config  = site.data.builder.blog_navigator.collate_timeline %}
{% assign header_title    = false %}
{% assign header_tagline  = false %}
{% assign posts_collate   = include.items %}


{% comment %} Main
-------------------------------------------------------------------------------- {% endcomment %}

  {% if include.header_title %}  {% assign header_title   = include.header_title %}  {% endif %}
  {% if include.header_tagline %}{% assign header_tagline = include.header_tagline %}{% endif %}

  {% if site.data.j1_config.posts_collate.provider == 'custom' %}
    <!-- Use custom collator -->
    {% include themes/{{site.template.name}}/procedures/custom/posts_collate %}
  {% else %}
    <!-- Use j1 blog timeline collator -->
    {% if header_title %}
    <div class="row timeline-header-box">
      <div class="text-center mb-3">
        <h2 class="title notoc">{{header_title}}</h2>
        {% if header_tagline %}
        <div class="tagline">
          <p>{{header_tagline}}</p>
        </div>
        {% endif %}
      </div>
    </div>
    {% endif %}

    <ul class="timeline">
      {% for post in posts_collate %}

      {% assign place_image = false %}
      {% assign place_icon  = false %}

      <!-- Calculate left|right placement -->
      {% assign indicator = forloop.index | modulo:2 %}
      {% if indicator != 0 %}
        {% assign blog_position = '' %}  <!-- left  -->
      {% else %}
        {% assign blog_position = 'timeline-inverted' %} <!-- right -->
      {% endif %}

      <li class="{{blog_position}}">
        <div class="timeline-badge"><i class="tmicon rounded-x hidden-xs"></i></div>

        <div class="timeline-panel">

          <div class="timeline-title">
            <a href="{{post.url}}">
              <h4 id="{{ 1000000 | rand }}" class="font-light">{{ post.title }}</h4>
            </a>
          </div>

          <!-- Collect icon data from frontmatter -->
          {% if post.icons.category-icon.size > 0 %}
            {% assign icon_name   = post.icons.category-icon %}
            {% assign icon_family = post.icons.family | strip | downcase %}
            {% assign icon_size   = post.icons.size %}
            {% assign icon_color  = post.icons.color %}
            {% if icon_name %}
              <!-- Set category icon: "{{icon_name}}" -->
              {% assign place_icon = true %}
              <!-- Flags: place_image = "{{place_image}}", place_icon = "{{place_icon}}" -->
            {% endif %}
          {% endif %}

          <!-- Collect image data from frontmatter (overload icon data if configured) -->
          {% if post.images.category-image.size > 0  %}
            {% assign image_name = post.images.category-image %}
            {% assign image_path = post.images.dir %}
            {% capture image %}{{image_path}}/{{image_name}}{% endcapture %}
            <!-- Set category image: "{{image}}" -->
            {% assign place_image = true %}
            {% assign place_icon  = false %}
            <!-- Flags: place_image = "{{place_image}}", place_icon = "{{place_icon}}" -->
          {% endif %}

          {% if place_icon %}
            {% if icon_family == 'fontawesome' or icon_family == 'fontawesome5' %}
              {% assign icon_family  = 'fa' %}
            {% elsif icon_family == 'mdi' %}
              {% assign icon_family  = 'mdi' %}
            {% else %}
              {% assign icon_family  = 'mdi' %}
            {% endif %}
          {% endif %}

          {% if place_icon %}
            <!-- place_icon: {{icon_name}} -->
            <div class="timeline-body">
              <div class="timeline-tagline">
                <i>{{ post.tagline }}</i>
              </div>
              <div class="timeline-excerpt">
                <i class="timeline-icon {{icon_family}} {{icon_family}}-{{icon_name}} {{icon_family}}-{{icon_size}} {{icon_family}}-{{icon_color}}"></i>
                {{ post.excerpt }}
              </div>
              <a href="{{post.url}}#readmore"
                 class="btn btn-info btn-raised btn-round mb-3">
                 <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
                 </i> Read More
              </a>
            </div>
          {% elsif place_image %}
            <!-- place_image: "{{image}}" -->
            <div class="timeline-heading">
              <img class="img-fluid" src="{{image}}" alt="Category Image"/>
            </div>
            <div class="timeline-body">
              <div class="timeline-tagline">
                <i>{{ post.tagline }}</i>
              </div>
              <div class="timeline-excerpt">
                {{ post.excerpt }}
              </div>
              <a href="{{post.url}}#readmore"
                 class="btn btn-info btn-raised btn-round mb-3">
                 <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
                 </i> Read More
              </a>
            </div>
          {% else %}
            <!-- !place_icon && !place_image -->
            <div class="timeline-body">
              <div class="timeline-tagline">
                <i>{{ post.tagline }}</i>
              </div>
              <div class="timeline-excerpt">
                {{ post.excerpt }}
              </div>
              <a href="{{post.url}}#readmore"
                 class="btn btn-info btn-raised btn-round mb-3">
                 <i class="fa fa-eye fa-lg" style="color:#FFFFFF;">
                 </i> Read More
              </a>
            </div>
          {% endif %}

          <!-- Collect comment provider details -->
          {% for sharing in builder_config.sharing_provider %}
            {% assign provider      = sharing.provider %}
            {% assign likes_count   = sharing.likes_count %}
            {% assign comment_count = sharing.comment_count %}
          {% endfor %}

          <div class="timeline-footer">
            <ul class="timeline-list-unstyled list-inline blog-info">
              <li><i class="fa fa-calendar mr-1"></i> {{ post.date | date: "%B %d, %Y" }}</li>
              {% if comment_count %}
                <!-- comment_count enabled  -->
                <!-- <li><i class="fa fa-comments-o"></i> <a href="#"> 7 Comments</a></li> -->
                <li><a href="#"><i class="fa fa-comments-o"></i> 7 Comments</a></li>
              {% endif %}
            </ul>
            {% if likes_count %}
              <!-- likes_count enabled  -->
              <a class="likes" href="#"><i class="fa fa-heart"></i> 239</a>
            {% endif %}
          </div>
        </div>
      </li>
      {% endfor %}
      <!-- final|last element placed as an empty list item -->
      <li class="clearfix" style="float: none;"></li>
    </ul>

    <!-- End Timeline Collator -->
  {% endif %}

<!-- Reset procedure variable -->
{% assign posts_collate = nil %}