{% assign days = 'Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday' | split: ', '%}
{% assign available_days = '' %}

{% for training_event in training_events.available %}
  {% for day in days %}
    {% if training_event.title contains day %}
      {% assign available_days = available_days | append: day | append: ',' %}
    {% endif %}
  {% endfor %}
{% endfor %}
{% assign available_days = available_days | split: ',' | uniq %}

{% assign sorted_days = '' %}
{% for day in days %}
  {% if available_days contains day %}
    {% assign sorted_days = sorted_days | append: day | append: ',' %}
  {% endif %}
{% endfor %}
{% assign sorted_days = sorted_days | split: ',' | uniq %}

<div class="np-dashboard-resources">
  {% if training_events.available.any? %}
    {% for day in sorted_days %}
      <div class="heading-container heading-container-event">
        <div class="heading-event">{{ day }}</div>
      </div>
      <div class="row row-with-thumbnails">
        {% for training_event in training_events.available %}
          {% if training_event.title contains day %}  
            <div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content event-card-container">
              {% include "cards_training_event_custom" with training_event %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    {% endfor %}
  {% else %}
    {% include "training_events_zero_state" %}
  {% endif %}
</div>

<script>
  const eventCards = document.querySelectorAll('.event-card');
  eventCards.forEach(eventCard => {
      const cardTitle = eventCard.querySelector('.card-title');
      const eventRibbon = eventCard.querySelector('.event-ribbon');

      const text = cardTitle.textContent.trim();
      const regex = /\[(.*?)\]/;
      const match = text.match(regex);

      if (match) {
          const [day, time] = match[1].split(' ');
          cardTitle.setAttribute('day', day);
          eventRibbon.setAttribute('time', time);
          eventRibbon.innerText = time;
      }
  });

  function modifyEventTitles() {
    var eventTitles = document.querySelectorAll('.event-title');

    eventTitles.forEach(function(title) {
        var text = title.textContent;
        var newText = text.replace(/\[.*?\]/g, '').trim(); // Usuwa tekst w nawiasach kwadratowych i usuwa białe znaki z początku i końca

        title.textContent = newText;
    });
}
document.addEventListener('DOMContentLoaded', function() {
    modifyEventTitles();
});
</script>

<style>
  .event-ribbon {
  position: absolute;
  top: -15px;
  right: -15px;
  padding: 10px;
  font-weight: 700;
  color: #005f00;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
}
.card-container-event {
  position: relative;
}
.heading-event {
  font-family: "Libre Baskerville";
  font-size: 1.5rem;
  color: #005f00;
  font-weight: 600;
}
</style>
