<div class="top-bar">
  <div class="top-bar__container uk-container uk-container-center uk-padding-horizontal">
    <div class="top-bar__col">
      <h2 class="top-bar__headline" data-test="session-name">{{ training_session.session_name }}</h2>
      <div class="top-bar__attributes">
        <div class="top-bar__attribute" data-test="event-title">
          <div class="top-bar__attribute-label">
            {% t .belongs_to %}
          </div>
          <div class="top-bar__attribute-value">
            {{ training_session.title }}
          </div>
        </div>
        <div class="top-bar__attribute">
          <div class="top-bar__attribute-label">
            {% t .type %}
          </div>
          <div class="top-bar__attribute-value">
            {{ training_session.event_type_title }}
          </div>
        </div>
      </div>
    </div>
    {% if training_session.instructor_assigned? %}
      <div class="top-bar__col uk-hidden-small">
        <div class="person" data-test="instructor-panel">
          <div class="person__avatar">
            <img src="{{ training_session.instructor_image_url }}" alt="avatar" />
          </div>
          <div class="person__details">
            <div class="person__name">
              {{ training_session.instructor_name }}
            </div>
            <div class="person__title">
              {{ training_session.instructor_title }}
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
</div>
<div class="uk-container uk-container-center uk-padding-horizontal">
  <div class="uk-flex uk-flex-wrap">
    <div class="uk-width-large-6-10 uk-visible-large">
      <div class="session-description">
        {{ training_session.description }}
      </div>
    </div>
    <div class="uk-width-large-4-10">
      <div class="session-sidebar">
        <div class="session-sidebar__content">
          <div class="session-dialog dialog">
            <div class="dialog__body">
              <div class="uk-flex">
                <div class="uk-width-1-4">
                  <div class="calendar-card">
                    <div class="calendar-card__day">
                      {{ training_session.session_day }}
                    </div>
                    <div class="calendar-card__month">
                      {{ training_session.session_month }}
                    </div>
                  </div>
                </div>
                <div class="uk-width-3-4">
                  <h4 class="session-dialog__headline">
                    {{ training_session.title }}
                  </h4>
                  <p class="session-dialog__detail">
                    <i class="uk-icon-clock-o"></i>
                    {{ training_session.session_time }}
                  </p>
                  <p class="session-dialog__detail">
                    {% if training_session.location %}
                      <i class="uk-icon-map-marker"></i>
                      {{ training_session.location }}
                    {% endif %}
                    {% if training_session.session_url %}
                      <i class="uk-icon-globe"></i>
                      <a href="{{ training_session.session_url }}">{{ training_session.session_url }}</a>
                    {% endif %}
                  </p>
                </div>
              </div>
            </div>
            <div class="dialog__footer">
              <div class="uk-flex uk-flex-middle">
                <div class="uk-width-1-4"></div>
                <div class="uk-width-3-4">
                  <div class="session-dialog__footer-buttons">
                    {% if training_session.session_url %}
                      <a href="{{ training_session.session_url }}" target="_blank" class="uk-button uk-button-primary" data-test="register-button">Register</a>
                    {% else %}
                      {{ training_session.registration_actions }}
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
            </div>
          </div>
          <div class="session-description uk-hidden-large">
            {{ training_session.description }}
          </div>
          <section class="other-sessions">
            {% comment %} <header class="other-sessions__header">
              <h4 class="other-sessions__headline">
                {% t .other_sessions_headline %}
              </h4>
            </header> {% endcomment %}
            <div class="other-sessions__body">
              <ul class="other-sessions__list">
                {% for other_session in training_session.other_sessions %}
                  <li class="other-session">
                    <div class="other-session__calendar-card-wrapper">
                      <div class="calendar-card calendar-card--small">
                        <div class="calendar-card__day">
                          {{ other_session.session_day }}
                        </div>
                        <div class="calendar-card__month">
                          {{ other_session.session_month }}
                        </div>
                      </div>
                    </div>
                    <div class="other-session__details">
                      <h5 class="other-session__name">
                        {{ other_session.session_name }}
                      </h5>
                      <div class="other-session__time">
                        <i class="uk-icon-clock-o"></i>
                        {{ other_session.session_time }}
                      </div>
                    </div>
                    <div class="other-session__buttons">
                      <a class="uk-button" href="{{ other_session.self_url }}">
                        {% t .attend %}
                      </a>
                    </div>
                  </li>
                {% endfor %}
              </ul>
            </div>
            <footer class="other-sessions__footer">
              {% if training_session.other_sessions_count > 3 %}
                <button class="other-sessions__more-button" onclick="findOutMore();">
                  {% t .find_out_more %}
                </button>
              {% endif %}
            </footer>
          </section>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var container = document.querySelector(".other-sessions__body");
  var items = document.querySelectorAll(".other-session");
  var containerHeight = 0;

  for (var i = 0; i < Math.min(3, items.length); i++) {
    containerHeight += items[i].offsetHeight;
  }

  container.style.height = containerHeight + "px";

  function findOutMore() {
    var button = document.querySelector(".other-sessions__more-button");
    var list = document.querySelector(".other-sessions__list");
    container.style.height = list.offsetHeight + "px";
    button.style.display = "none";
  }
</script>
<style>
.school_website-training_sessions-show .main-content {
    overflow:  inherit;
}
</style>
{% for group in current_person.groups %}
  {% if group.enrollment_code == "1817d8c96780f13abbf0f2023e3b26b3bd43d248" %}
    <style>
      .other-sessions__more-button {
          color: white !important;
      }
    </style>
  {% endif %}
  {% if group.enrollment_code == "ccd2aa2f1e41ebbac8fa878f806e3ccc20ae3f38" or 
        group.enrollment_code == "aa6fe8d22ec1e75d2e8c54c6d5452dcd585e415d" or 
        group.enrollment_code == "176629fa82da1d03f3d58c81e751e61b9836a46d" %}
    <script>
      $( document ).ready(function() {
        if ($(".top-bar__attribute-value").text().includes("In Person")) {
          $("[data-test='register-button']").click(function() {
            setTimeout(function(){
              window.open("https://www.surveymonkey.com/r/RNF66FM");
            }, 1000);
          });
        };
      });
    </script>
  {% endif %}
{% endfor %}


