{% 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" %}

<script>

  const currentDate = new Date().getTime() / 1000
  const sessionDate = new Date("{{training_session.year}}, {{training_session.month}}, {{training_session.day}}, {{training_session.starts}}")
  const sessionEndDate = new Date("{{training_session.year}}, {{training_session.month}}, {{training_session.day}}, {{training_session.ends}}")
  const sessionDateSeconds =  sessionDate.getTime() / 1000
  const sessionEndDateSeconds =  sessionEndDate.getTime() / 1000

  if (currentDate < sessionEndDateSeconds) {
    console.log("event not ended")
    if (currentDate > (sessionDateSeconds - 600)) {
      console.log("within 10 mins of event or after event start");
      document.getElementById("sessionLocation").style.display = "block";
    }
  } else {
    console.log("event ended, hiding url")
  }

  document.addEventListener("DOMContentLoaded", () => {
    const eventType = '{{training_event.event_type}}'
    console.log(eventType)
    if (eventType != "in_person" && document.querySelector(".dropdown-calendar")) {
      console.log("registered for online event")
      customizeCalendarUrls()
    }

  });

  function customizeCalendarUrls() {
    // GOOGLE
    let googleCalendarUrl = '{{training_session.google_calendar_url | url_decode }}'
    googleCalendarUrl = googleCalendarUrl.replace("To read more about this session, please visit", "To read more about this session and access the zoom link, please visit")
    googleCalendarUrl = googleCalendarUrl.split("&")
    let newGoogleCalendarUrl = googleCalendarUrl.splice(3, 1)
    const finalGoogleCalendarUrl = googleCalendarUrl.join("&")
    console.log("GOOGLE URL: ", encodeURI(finalGoogleCalendarUrl))
    document.getElementById("googleCal").href = finalGoogleCalendarUrl

    // OUTLOOK   
    let outlookCalendarUrl = '{{training_session.outlook_calendar_url | url_decode }}'
    outlookCalendarUrl = outlookCalendarUrl.split("&")
    let newOutlookCalendarUrl = outlookCalendarUrl.splice(5, 2)
    const finalOutlookCalendarUrl = outlookCalendarUrl.join("&")
    document.getElementById("outlookCal").href = finalOutlookCalendarUrl

    // OFFICE   
    let officeCalendarUrl = '{{training_session.outlook_office_calendar_url | url_decode }}'
    officeCalendarUrl = officeCalendarUrl.split("&")
    let newOfficeCalendarUrl = officeCalendarUrl.splice(5, 2)
    const finalOfficeCalendarUrl = officeCalendarUrl.join("&")
    document.getElementById("officeCal").href = finalOfficeCalendarUrl

    // iCAL   
    let icalCalendarUrl = '{{training_session.ical_calendar_url }}'
    console.log(icalCalendarUrl)
    icalCalendarUrl = icalCalendarUrl.replace("LOCATION:", "")
    icalCalendarUrl = icalCalendarUrl.replace("To%20read%20more%20about%20this%20session,%20please%20visit:%20", "To%20read%20more%20about%20this%20session%20and%20access%20the%20zoom%20link,%20please%20visit:%20")
    document.getElementById("icalCal").href = icalCalendarUrl
  }
</script>

<script>
  const eventTitle = document.querySelector(".np-top-title").innerText

  if (eventTitle.toUpperCase().includes("GLOBAL")) {
    const easternTimeStart = '{{ training_session.starts }}';
    const easternTimeEnd = '{{ training_session.ends }}';

    const londonTimeStart = moment.tz(easternTimeStart, 'h:mm A', 'America/New_York').tz('Europe/London');
    const londonTimeEnd = moment.tz(easternTimeEnd, 'h:mm A', 'America/New_York').tz('Europe/London');

    const formattedTime = `${londonTimeStart.format('h:mm A')} - ${londonTimeEnd.format('h:mm A')}`;

    document.querySelectorAll(".europe-converted-time").forEach((time) => {
      time.innerText = formattedTime
    })

    document.querySelectorAll(".gmt-time").forEach((time) => {
      time.style.display = "block"
    })
  }
 
</script>