{% assign enrolled_courses = courses.enrolled %}
{% assign instructor_information_course = "" %}
{% assign instructor_course_found = false %}

{% unless current_person.email contains "+preview" %}
  {% for course in enrolled_courses %}
    {% if course.properties.instructor_information_course == true %}
      {% assign instructor_information_course = course %}
      {% assign instructor_course_found = true %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endunless %}

{% if instructor_course_found %}
  <div class="buttons-dashboard-conatiner new-hire-instructor-info">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-5">
        <div class="instructor-info">
          <div class="instructor-img"><img src="{{ instructor_information_course.instructors.first.avatar_url }}" style="max-width:100%;" /></div>
          <div class="instructor-info-wrapper">
            <div class="instructor-name">{{ instructor_information_course.instructors.first.name }}</div>
            <div class="instructor-bio">{{ instructor_information_course.instructors.first.bio }}</div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="instructor-schedule">
          {{ instructor_information_course.full_description }}
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3" style="border-left: 1px solid #ddd;">
        <div class="instructor-links">
          <a
            class="np-button np-button-wide"
            href="{{instructor_information_course.short_description}}"
            target="_blank">Zoom Classroom</a>
          <a
            class="np-button np-button-wide"
            href="mailto:{{ instructor_information_course.instructors.first.email }}"
            target="_blank">Contact Trainer</a>
          <a
            class="np-button np-button-wide"
            href="{{ current_school.properties.troubleshooting_room_link }}"
            target="_blank">Troubleshooting Room</a>
          <a
            class="np-button np-button-wide"
            id="harverLink"
            href="{{current_school.properties.harver_system_check_link}}"
            target="_blank"
            style="display:none;">Harver System Check Link</a>
        </div>
      </div>
    </div>
  </div>
{% endif %}

<style>
  .new-hire-instructor-info {
    margin-bottom: 32px;
  }

  .instructor-info .instructor-img {
    text-align: center;
    margin-bottom: 16px;
  }

  .instructor-info .instructor-info-wrapper {
    padding: 0 12px;
  }

  .instructor-info .instructor-name {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .instructor-info .instructor-bio,
  .instructor-info .instructor-schedule {
    font-family: "Lato"
    , sans-serif;
    font-size: 18px;
    line-height: normal;
  }

  .instructor-links .np-button {
    margin: 8px;
    display: block;
    line-height: 33px;
    text-align: center;
    height: 50px;
    text-transform: uppercase;
    letter-spacing: 0.09375rem;
  }

  @media (min-width: 768px) {
    .instructor-info {
      display: flex;
    }

    .instructor-info .instructor-img {
      width: 35%;
    }

    .instructor-info .instructor-img {
      max-width: 90%;
      margin-right: auto;
      display: block;
    }

    .instructor-info .instructor-info-wrapper {
      width: 65%;
      border-right: 1px solid #ddd;
      padding: 0 12px;
    }
  }
</style>