{% assign events_to_show = "Introduction to DataSnipper, Introduction to the Financial Statement Suite, Automation with DataSnipper, Welcome to the Financial Statement Suite, DataSnipper Tips & Tricks, DataSnipper Q&A, Financial Statement Suite Tips & Tricks" | split: ", " %}

{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">
  <div class="row">
    <div class="col-xs-12 col-sm-10">
      <div class="np-resource-title">
        {{ custom_page.headline }}
      </div>
      <div class="np-resource-subtitle">
        {{ custom_page.subheadline }}
      </div>
    </div>
  </div>
  <div class="row events-filters-row">
    <div class="event-filter active" data-filter="all">All</div>
    <div class="event-filter" data-filter="datasnipper">DataSnipper</div>
    <div class="event-filter" data-filter="financial statement suite">Financial Statement Suite</div>
    <div class="event-filter" data-filter="interactive learning">Interactive Learning</div>
  </div>
  <div class="np-dashboard-resources">
    {% if training_events.available.any? %}
      <div class="row row-with-thumbnails training-sessions">
        {% for training_event in training_events.available %}
          {% if events_to_show contains training_event.title %}

            {% for session in training_event.sessions %}
              {% assign session_date = session.year | append: "-" | append: session.month | append: "-" | append: session.day %}
              <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content event-item" data-date="{{ session_date | date: '%s'}}">
                <div class="np-card training-event-card">
                  <div class="np-card-container">
                    <div class="event-info-wrapper">
                      <div class="event-info">
                        <div class="event-date">{{ session.day }} {{ session.month | date: "%b" }}</div>
                        <div class="event-time">{{ session.starts }}</div>
                        <div class="hidden-event-info np-hidden">
                          <span class="event-year">{{ session.year }}</span>
                          <span class="event-timezone">{{ session.time_zone }}</span>
                        </div>
                      </div>
                      {% if session.registered? %}
                        <div class="session-status-label">Registered
                          <i class="far fa-check np-training-session-icon"></i>
                        </div>
                      {% endif %}
                    </div>
                    <div class="np-card-content-training-event">
                      <a class="np-card-content-title" href="{% route training_session, id: session.id %}">{{ training_event.title | strip }}</a>
                      <div class="np-card-content-subtitle">
                        {{ training_event.description | strip_html }}
                      </div>
                    </div>
                    <div class="np-card-content">
                      <div class="event-instructor">{{ session.instructor }}</div>
                      <a class="np-button np-button-wide" href="{% route training_session, id: session.id %}">
                        {% t shared.view %} event
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </div>
    {% else %}
      {% include "training_events_zero_state" %}
    {% endif %}
  </div>

</main>
{% include "footer" %}

<style>
  .events-filters-row {
    justify-content: center;
    margin: 16px 0 32px;
  }

  .event-filter {
    padding: 12px 24px;
    border: 1px solid #E7E9F5;
    color: #fff;
    margin: 16px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
  }

  .event-filter.active,
  .event-filter:hover {
    border: 1px solid #E7E9F5;
    background-color: #E7E9F5;
    color: #0D21A1;
  }
</style>

<script>

  document.addEventListener("DOMContentLoaded", function() {
    const eventItems = document.querySelectorAll(".event-item")
    const eventFilters = document.querySelectorAll('.event-filter')
    updateEventTimezone()

    reorderTilesBySessionDate()

    eventFilters.forEach((filter) => {
      filter.addEventListener("click", function() {
        eventFilters.forEach((filterItems) => { filterItems.classList.remove("active") })
        const selectedFilter = filter.getAttribute("data-filter")
        this.classList.add("active")

        if (selectedFilter == "all") {
          eventItems.forEach((item) => { item.style.display = "flex" })
        } else {
          eventItems.forEach((item) => { item.style.display = "none" })

          if (selectedFilter == "datasnipper") {
            eventItems.forEach((item) => {
              const eventTitle = item.querySelector(".np-card-content-title").innerText.toLowerCase().trim()
              if (eventTitle == "automation with datasnipper" || eventTitle == "datasnipper q&a" || eventTitle == "datasnipper tips & tricks") {
                item.style.display = "flex"
              }
            })
          } else if (selectedFilter == "financial statement suite") {
            eventItems.forEach((item) => {
              const eventTitle = item.querySelector(".np-card-content-title").innerText.toLowerCase().trim()
              if (eventTitle == "welcome to the financial statement suite" || eventTitle == "financial statement suite tips & tricks") {
                item.style.display = "flex"
              }
            })
          } else if (selectedFilter == "interactive learning") {
            eventItems.forEach((item) => {
              const eventTitle = item.querySelector(".np-card-content-title").innerText.toLowerCase().trim()
              if (eventTitle == "datasnipper q&a" || eventTitle == "datasnipper tips & tricks" || eventTitle == "financial statement suite tips & tricks") {
                item.style.display = "flex"
              }
            })
          }
        }
      })
    })
  })

  function reorderTilesBySessionDate() {
        var indexes = document.querySelectorAll(".event-item");
    var indexesArray = Array.from(indexes);

    const sortByDate = arr => {
      const positionSorter = (a, b) => {
        return a.dataset.date - b.dataset.date;
      }
      arr.sort(positionSorter);
    };

    sortByDate(indexesArray);

    document.querySelectorAll('.event-item').forEach(e => e.remove());

    indexesArray.forEach(e => document.querySelector(".training-sessions").appendChild(e));
  }
</script>