{% include "header" %}
<main class="np-main np-training-session np-max-width np-page-container">
  <div class="np-hidden-mobile" id="training-session-desktop">
    {% include "training_session_desktop_view" %}
  </div>
  <div class="np-hidden-desktop" id="training-session-mobile">
    {% include "training_session_mobile_view" %}
  </div>
</main>
{% include "footer" %}

<style>
  .np-training-session-sessions-title,
  .np-training-session-zero-state-text {
    color: #fff;
  }

  .np-resource-header-card,
  .np-training-session .np-card-container {
    border-radius:12px;
  }

  .np-training-session-tile {
    background-color: #E7E9F5;
    border-radius: 12px;
    color: #0C176C;
  }

  .np-training-session-tile:hover {
    background-color: #fff;
  }

  .np-training-session-tile-icon,
  .np-training-session-tile-chevron,
  .np-icon-back {
    color: #0C176C;
  }

  .np-training-session .np-top-title,
  .np-training-session .np-text-title {
    color:#011638;
  }
</style>

<script>
  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

  var day = "{{ training_session.day }}"
  var month = "{{ training_session.month }}"
  var year = "{{ training_session.year }}"

  var timePeriod = document.querySelector("div.np-training-session-time > span:nth-child(2)").innerHTML.split(' - ')
  var startTime = timePeriod[0];
  var endTime = timePeriod[1];

  var shortTimezone = document.querySelector("div.np-training-session-time > span:nth-child(3)").innerHTML
  if (shortTimezone == "CET") {
    shortTimezone = "GMT+0100"
  } else if (shortTimezone == "CEST") {
    shortTimezone = "GMT+0200"
  }

  var startDate = new Date(`${day} ${month} ${year} ${startTime} ${shortTimezone}`);
  var endDate = new Date(`${day} ${month} ${year} ${endTime} ${shortTimezone}`);

  var userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  var userTimeZoneAbbreviation = new Date().toLocaleTimeString('en-us',{timeZone: userTimeZone, timeZoneName:'short'}).split(' ')[2];

  var startFormatedTime = formatAMPM(startDate)
  var endFormatedTime = formatAMPM(endDate)

  document.querySelector("div.np-training-session-time > span:nth-child(2)").innerHTML = `${startFormatedTime} - ${endFormatedTime}`
  document.querySelector("div.np-training-session-time > span:nth-child(3)").innerHTML = userTimeZoneAbbreviation
  document.querySelector(".np-card-training-session-date-day").innerHTML = startDate.getDate()

  document.querySelectorAll(".np-training-session-tile").forEach((element) => {
    var extraStartTime = element.querySelector('.np-training-session-tile-time').innerHTML.split(' - ')[0].trim()
    var extraEndTime = element.querySelector('.np-training-session-tile-time').innerHTML.split(' - ')[1].trim()
    var extraEndTimeFinal = `${extraEndTime.split(' ')[0]} ${extraEndTime.split(' ')[1]}`
    var extraTimeZone = extraEndTime.split(' ')[2]
    console.log(extraEndTime)
    if (extraTimeZone == "CET") {
      extraTimeZone = "GMT+0100"
    } else if (extraTimeZone == "CEST") {
      extraTimeZone = "GMT+0200"
    }
    
    var extraYear = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[1].trim()
    var extraMonth = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[0].trim().split(' ')[0]
    var extraDay = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[0].trim().split(' ')[1]

    var extraStartDate = new Date(`${extraDay} ${extraMonth} ${extraYear} ${extraStartTime} ${extraTimeZone}`);
    var extraEndDate = new Date(`${extraDay} ${extraMonth} ${extraYear} ${extraEndTimeFinal} ${extraTimeZone}`);
    var extraUserTimeZone = Intl.DateTimeFormat().resolvedOptions().extraTimeZone;
    var extraUserTimeZoneAbbreviation = new Date().toLocaleTimeString('en-us',{timeZone: extraUserTimeZoneAbbreviation, timeZoneName:'short'}).split(' ')[2];

    var extraStartFormatedTime = formatAMPM(extraStartDate)
    var extraEndFormatedTime = formatAMPM(extraEndDate)

    element.querySelector('.np-training-session-tile-time').innerHTML = `${extraStartFormatedTime} - ${extraEndFormatedTime} ${extraUserTimeZoneAbbreviation}`
    element.querySelector('.np-training-session-tile-date').innerHTML = `${monthNames[extraStartDate.getMonth()]} ${extraStartDate.getDate()}, ${extraStartDate.getFullYear()}`
  })

  function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12;
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
  }
</script>