{% 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 .np-card-container{
    border-radius: 9px;
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    handleZoomLinkDisplayingForDesktop()
    handleZoomLinkDisplayingForMobile()
  })

  function handleZoomLinkDisplayingForDesktop() {
    if (isElementDisplayed("#training-session-desktop")) {
      if (isElementNotDisplayed(".np-hidden-mobile .np-training-session-cta-buttons .np-button")) {
        showElement(".np-hidden-mobile .np-training-session-location")
      } else {
        hideElement(".np-hidden-mobile .np-training-session-location")
      }
    }
  }

  function handleZoomLinkDisplayingForMobile() {
    if (isElementDisplayed("#training-session-mobile")) {
      if (isElementNotDisplayed(".np-hidden-desktop .np-training-session-cta-buttons .np-button")) {
        showElement(".np-hidden-desktop .np-training-session-location")
      } else {
        hideElement(".np-hidden-desktop .np-training-session-location")
      }
    }
  }

  function isElementDisplayed(elementQuery) {
    return document.querySelector(elementQuery).style.display !== "none"
  }

  function isElementNotDisplayed(elementQuery) {
    return document.querySelector(elementQuery).style.display === "none"
  }

  function showElement(elementQuery) {
    document.querySelector(elementQuery).style.removeProperty("display")
  }

  function hideElement(elementQuery) {
    document.querySelector(elementQuery).style.display = "none";
  }
</script>