{% extends 'common/base.html' %}
{% load static %}


{% block content %}
{% include 'common/hero.html' %}
<main id="main">
  <!-- ======= Counts Section ======= -->
  <section id="counts" class="counts section-bg">
    <div class="container">

      <div class="row counters">

        <div class="col-lg-3 col-6 text-center">
          <span data-purecounter-start="0" data-purecounter-end="1232" data-purecounter-duration="1" class="purecounter"></span>
          <p>Students</p>
        </div>

        <div class="col-lg-3 col-6 text-center">
          <span data-purecounter-start="0" data-purecounter-end="64" data-purecounter-duration="1" class="purecounter"></span>
          <p>Courses</p>
        </div>

        <div class="col-lg-3 col-6 text-center">
          <span data-purecounter-start="0" data-purecounter-end="42" data-purecounter-duration="1" class="purecounter"></span>
          <p>Events</p>
        </div>

        <div class="col-lg-3 col-6 text-center">
          <span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
          <p>Trainers</p>
        </div>

      </div>

    </div>
  </section><!-- End Counts Section -->
  
         
  <!-- ======= Popular Courses Section ======= -->
  <section id="popular-courses" class="courses">
    <div class="container" data-aos="fade-up">
          <div class="section-title">
            <h2>Courses</h2>
            <p>Popular Courses</p>
          </div>
    
      <div class="row" data-aos="zoom-in" data-aos-delay="100">
        {% for p in courses %}
        <div class="col-lg-4 col-md-6 d-flex align-items-stretch"><br>
          <div class="course-item">
            <img src="{{p.prod_img.url}}" class="img-fluid" alt="...">
            <div class="course-content">
              <div class="d-flex justify-content-between align-items-center mb-3">
                <h3><a href="{% url 'coursedetails' p.id %}" class="btn">Go To Cart</a></h3>
                <!--<h3>{{p.course_name}}</h3> -->
                <p class="price">BDT{{p.price}}</p>
              </div>
              
              <p>{{p.description}}</p>
              <div class="trainer d-flex justify-content-between align-items-center">
                <div class="trainer-profile d-flex align-items-center">
                  <img src="{{p.teachers.profile_pic.url}}" class="img-fluid" alt="">
                  <span>{{p.teachers.name}}</span>
                </div>
                <!--
                <div class="trainer-rank d-flex align-items-center">
                  <i class="bx bx-user"></i>&nbsp;50
                  &nbsp;&nbsp;
                  <i class="bx bx-heart"></i>&nbsp;65
                </div>-->
              </div>
            </div>
          </div>
        </div> <!-- End Course Item-->
        {% endfor %}
      </div>
    </div>
  </section><!-- End Popular Courses Section -->

  <!-- ======= Trainers Section ======= -->
  <section id="trainers" class="trainers">
    <div class="container" data-aos="fade-up">
      <div class="row" data-aos="zoom-in" data-aos-delay="100">
      {% for i in teachers %}
        <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
          <div class="member">
            <img src="{{i.profile_pic.url}}" class="img-fluid" alt="">
            <div class="member-content">
              <h4>{{i.name}}</h4>
              <span>{{i.sub_expart}}</span>
              <p>
                {{i.profile_details}}
              </p>
              <div class="social">
                <a href=""><i class="bi bi-twitter"></i></a>
                <a href=""><i class="bi bi-facebook"></i></a>
                <a href=""><i class="bi bi-instagram"></i></a>
                <a href=""><i class="bi bi-linkedin"></i></a>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
      </div>
    </div>
  </section><!-- End Trainers Section -->
</main><!-- End #main -->
{% endblock content %}