{% assign intro_video_course_completed = false %}
{% assign intro_video_enabled = false %}
{% assign tooltip_text = "This content will be available on Day 1 of training. Please be sure to log in to get started no sooner than 15 minutes before your scheduled class time." %}
<div class="new-hire-homepage">
  <div class="new-hire-content-wrapper">
    <div class="lp-wrapper">
      <div class="new-hire-content-text-wrapper align-right">
        <div class="lp-text">Click here first, to launch your introduction to WSI training.
          <div class="new-hire-number lp">1</div>
        </div>
      </div>
      <div class="lp-card">
        <img class="lp-background" src="https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/new-hire-video-img.jpg" />
        <div class="lp-btn">
          {% assign intro_video_course_id = "#" %}
          {% for course in courses.in_catalog %}
            {% if course.properties.enable_intro_video == true %}
              {% assign intro_video_course_id = course.id %}
              {% assign intro_video_enabled = true %}
              {% if course.progress == 100 %}
                {% assign intro_video_course_completed = true %}
              {% endif %}
              {% break %}
            {% endif %}
          {% endfor %}
          {% if intro_video_enabled == true %}
            <a class="start-lp-btn" href="{% route course, id: intro_video_course_id %}">
              Start Here!
            </a>
          {% else %}
            <span
              class="start-lp-btn video-tooltip"
              data-toggle-class-on-target="is-visible"
              data-toggle-target-self=".tooltip"
              data-toggle-event="mouseover"
              data-toggle-outside
              aria-describedby="tooltip_3BHED">
              Start Here!
              <span
                class="tooltip"
                id="tooltip_3BHED"
                role="tooltip"
                aria-hidden="true">
                {{ tooltip_text }}
              </span>
            </span>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="event-wrapper">
      <div class="lp-card">
        <img class="lp-background" src="https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/collov-home-design-UUsQk_9bdR8-unsplash.jpg" />
        {% if zoom_url == "NULL" %}
          <div class="lp-btn">
            <span class="start-lp-btn">Launch zoom!</span>
          </div>
        {% else %}
          <div class="lp-btn">
            <a class="start-lp-btn" href="{{ zoom_url }}">Launch zoom!</a>
          </div>
        {% endif %}
      </div>
      <div class="new-hire-content-text-wrapper align-left">
        <div class="lp-text">After completing the intro video, check into your trainer's Zoom!
          <div class="new-hire-number event">2</div>
        </div>

      </div>
    </div>
  </div>

  {% if intro_video_course_completed == true %}
    <div class="new-hire-training-cta">
      <a href="/app/dashboard">
        <img src="https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/brands-footer.png" />
      </a>
    </div>
  {% else %}
    <div class="new-hire-training-cta">
      <img src="https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/brands-footer.png" />
    </div>
  {% endif %}
</div>

<style>
  .lp-wrapper {
    display: flex;
    gap: 20px;
  }
  .new-hire-content-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .align-right {
    text-align: right;
  }
  .align-left {
    text-align: left;
  }
  .lp-text {
    font-size: 2rem;
    font-weight: 400;
    color: #000;
    max-width: 250px;
    position: relative;
    z-index: 1;
    font-family: 'Lato'
    , sans-serif;
  }
  .new-hire-content-wrapper {
    display: flex;
    justify-content: center;
    gap: 5%;
  }
  .event-wrapper {
    display: flex;
    gap: 20px;
  }
  .new-hire-number {
    position: absolute;
    top: -85px;
    color: #a28740;
    font-size: 12rem;
    font-weight: 400;
    z-index: -1;
    opacity: 0.7;
  }

  .new-hire-number.event {
    right: -15px;
  }

  .new-hire-number.lp {
    left: -15px;
  }
  .new-hire-homepage {
    padding: 50px 0;
  }

  .new-hire-training-cta {
    display: block;
    margin: 55px 24px auto;
    text-align: center;
  }

  .new-hire-training-cta img {
    max-width: 100%;
  }

  .lp-card {
    border-radius: 50%;
    position: relative;
  }
  .lp-background {
    height: 250px;
    width: 250px;
    border-radius: 50%;
    box-shadow: 10px -10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 10px -10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: -10px 10px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 10px -10px rgba(0, 0, 0, 0.2);
  }
  .lp-btn {
    position: absolute;
    top: 25px;
  }
  .start-lp-btn {
    background: #a28740;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px
    , rgba(0, 0, 0, 0.3) 0 7px 13px -3px
    , rgba(0, 0, 0, 0.2) 0 -3px 0 inset;
  }
  .start-lp-btn:hover {
    background: #826721;
  }

  .video-tooltip {
    position: relative;
    cursor: text;
  }

  .video-tooltip .tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%;
    width: 275px;
    max-width: 275px;
    text-align: center;
    padding: 12px;
    transform: translate(-50%, 0);
    transform-origin: left bottom;
    border-radius: 0;
    background-color: #fff;
    color: #000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-out;
    font-size: 14px;
    font-family: 'Lato'
    , sans-serif;
    text-transform: none;
  }

  .video-tooltip .tooltip.is-visible {
    visibility: visible;
    opacity: 1;
  }

  @media (min-width: 1170px) {
    .new-hire-training-cta {
      margin: 55px auto auto;
      max-width: 1170px
    }
  }
</style>