{% extends "base.html" %}

{% block content %}
  <div class="container">
    <div class="course-header">
      <div class="course-type">course</div>
      <h1>{{title}}</h1>
    </div>

    <div class="row">
      <div class="col-lg-9 col-md-12">
        <div  class="course-details">

          <h2>Course Description</h2>

          <div class="course-description">
            {{ description }}
          </div>

          <div class="preview-video">
            <iframe
              width="560"
              height="315"
              src="{{youtube_embed_url}}"
              title="YouTube video player"
              frameborder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>

          <h2>Upcoming Batches</h2>

          <div class="row">
          {% for batch in batches %}
            <div class="col-lg-4 col-md-6">
              <div class="batch">
                <div class="batch-details">
                <div>Session every {{batch.weekdays}}</div>
                <div>{{batch.timeslot}}</div>
                <div>Starting from {{batch.start_date}}</div>

                <div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>

                {% for m in batch.mentors %}
                  <div>
                    <img class="profile-photo" src="{{m.photo_url}}">
                    <span class="instructor-title">{{m.name}}</span>
                  </div>
                {% endfor %}
                </div>
                <div class="cta">
                  <div class="">
                    <button type="button">Join this Batch</button>
                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>


          <h2>Course Outline</h2>

          {% for chapter in chapters %}
            <div class="chapter-plan">
              <h3><span class="chapter-number">{{loop.index}}</span> {{chapter.title}}</h3>
              <div class="chapter-description">
                {{chapter.description}}
              </div>

              <div class="lessons">
                {% for lesson in chapter.lessons %}
                  <div class="lesson">
                    <span class="lesson-type"><i class="{{lesson.icon}}"></i></span>
                    <span class="lesson-title">{{lesson.title}}</span>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      </div>

      <div class="col-lg-3 col-md-12">
        <div class="sidebar">
          <h3>Instructor</h3>
          <div class="instructor">
            <div class="instructor-title">{{instructor.name}}</div>
            <div class="instructor-subtitle">Created {{instructor.num_courses}} courses</div>
          </div>
        </div>

        <div class="sidebar">
          <h3>Mentors</h3>
          {% for m in mentors %}
            <div class="instructor">
              <div class="instructor-title">{{m.name}}</div>
              <div class="instructor-subtitle">Mentored {{m.num_courses}} batches</div>
            </div>
          {% endfor %}

          <div class="notice">
            Interested to become a mentor?

            <div><a href="#">Apply Now!</a></div>
          </div>
        </div>
      </div>

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

{% endblock %}