{% import 'pages/_results-heading.html' as results %}
{% import 'components/pager.html' as pager %}

{% set items = [{
  name: 'Johnathan S.',
  avatar: 'assets/images/people/110/guy-1.jpg',
  topic: 'UI Designer',
  course_title: "Angular Routing In-Depth",
  course_image: "assets/images/paths/angular_routing_200x168.png",
  rating: 3,
  following: true
}, {
  name: 'Fabrice M.',
  avatar: 'assets/images/people/110/guy-2.jpg',
  topic: 'Web Developer',
  course_title: 'Build an iOS Application in Swift',
  course_image: "assets/images/paths/swift_200x168.png",
  face: true
}, {
  name: 'Diane D.',
  avatar: 'assets/images/people/110/woman-1.jpg',
  topic: 'iOS Developer',
  course_title: 'Build a WordPress Website',
  course_image: "assets/images/paths/wordpress_200x168.png",
  rating: 4
}, {
  name: 'Nicole G.',
  avatar: 'assets/images/people/110/woman-2.jpg',
  topic: 'UX Designer',
  face: true
}, {
  name: 'Abraham K.',
  avatar: 'assets/images/people/110/guy-3.jpg',
  topic: 'Entrepreneur',
  course_title: 'Become a React Native Developer', 
  course_image: "assets/images/paths/react_200x168.png",
  rating: 3
}, {
  name: 'Jane D.',
  avatar: 'assets/images/people/110/woman-3.jpg',
  topic: 'Android Developer'
}] %}

{% macro teacher_card(prefix=prefix, item, class=teachers_col) %}
<div class="{{ class or 'col-md-6 col-xl-4' }} card-group-row__col">
  <div class="card card-group-row__card">
    <div class="card-header d-flex align-items-center">
      <a href="{{ prefix }}teacher-profile.html" class="card-title flex mr-12pt">{{ item.name }}</a>
      <a href="{{ prefix }}teacher-profile.html" class="btn btn-light btn-sm"{% if item.following %} data-toggle="tooltip" data-title="Unfollow" data-placement="bottom"{% endif %}>{% if item.following %}Following{% else %}Follow{% endif %}</a>
    </div>
    <div class="card-body flex text-center d-flex flex-column align-items-center justify-content-center">
      <a href="{{ prefix }}teacher-profile.html" class="avatar avatar-xl overlay{% if not item.face %} js-overlay{% else %} overlay--show{% endif %} overlay--primary rounded-circle p-relative o-hidden mb-16pt">
        <img src="{{ item.avatar }}" alt="teacher" class="avatar-img">
        <span class="overlay__content"><i class="overlay__action material-icons icon-40pt">face</i></span>
      </a>
      <div class="flex">
        <div class="d-inline-flex align-items-center mb-8pt">
          <div class="rating mr-8pt">
            {% for rating in range((item.rating or 5)) %}
            <span class="rating__item"><span class="material-icons">star</span></span>
            {% endfor %}
            {% for rating in range(5 - (item.rating or 5)) %}
            <span class="rating__item"><span class="material-icons">star_border</span></span>
            {% endfor %}
          </div>
          <small class="text-muted">{{ (item.rating or 5) }}/5</small>
        </div>

        <p class="text-70 measure-paragraph">{{ item.description or 'Fueled by my passion for understanding the nuances of cross-cultural advertising, I consider myself a forever student, eager to both build on my academic foundations in psychology and sociology and stay in tune with the latest digital marketing strategies through continued coursework.' }}</p>

        <a href="javascript:void()" data-toggle="tooltip" data-title="Browse Topic" data-placement="bottom" class="chip chip-outline-secondary">{{ item.topic }}</a>
      </div>
    </div>
    <div class="card-body flex-0">
      <div class="d-flex align-items-center">
        <a href="{{ prefix or '' }}student-course.html" class="avatar avatar-4by3 overlay overlay--primary mr-12pt">
          <img src="{{ item.course_image or 'assets/images/paths/angular_routing_200x168.png' }}" alt="{{ item.course_title }}" class="avatar-img rounded">
          <span class="overlay__content"></span>
        </a>
        <div class="flex">
          <a href="{{ prefix }}student-course.html" class="card-title">{{ item.course_title or 'Angular Routing In-Depth' }}</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endmacro %}

{{ results.component(label='teachers', sidebar_toggle=results_sidebar_toggle) }}

<div class="page-separator">
  <div class="page-separator__text">Top Teachers</div>
</div>

<div class="row card-group-row">
  {% for item in items.slice(0, 3) %}
    {{ teacher_card(item=item) }}
  {% endfor %}
</div>

<div class="mb-32pt">
  {{ pager.pager() }}
</div>

<div class="page-separator">
  <div class="page-separator__text">Rising Stars</div>
</div>

<div class="row card-group-row">
  {% for item in items.slice(3, 6) %}
    {{ teacher_card(item=item) }}
  {% endfor %}
</div>

{{ pager.pager() }}