{% extends 'layout/base.html' %}

{% block title %}
خانه | مایادرس
{% endblock title %}

{% block content %}

<div class="container my-5 text-center">
  <a href="{% url 'new_course' %}" class="btn btn-primary btn-lg">ایجاد درس</a>
</div>

<div class="container my-5">
  {% for course in courses %}
  <div class="card">
    <div class="card-body">
      <h1 class="card-title">
        <!-- <lord-icon src="https://cdn.lordicon.com/tyounuzx.json" target=".card-body" trigger="hover" colors="primary:#121331,secondary:#08a88a"></lord-icon> -->
        {{ course.title }}
      </h1>
      <p class="card-text">{{ course.description|linebreaks }}</p>
        <a href="{% url 'lessons' %}?course_id={{ course.id }}" class="btn btn-primary btn-lg">
          <lord-icon src="https://cdn.lordicon.com/wxnxiano.json" target="a" trigger="morph" colors="primary:#ffffff,secondary:#e4e4e4"></lord-icon>
          کاوش
        </a>
    </div>
  </div>
  {% endfor %}

  <nav aria-label="Page navigation example">
    <ul class="pagination">
      {% if courses.has_next == True %}
      <li class="page-item"><a class="page-link" href="?page={{courses.next_page_number}}">بعدی</a></li>
      {% endif %}
      {% for page in pages.page_range %}
      <li class="page-item"><a class="page-link" href="?page={{page}}">{{page}}</a></li>
      {% endfor %}
      {% if courses.has_previous == True %}
      <li class="page-item"><a class="page-link" href="?page={{courses.previous_page_number}}">قبلی</a></li>
      {% endif %}
    </ul>
  </nav>

</div>

{% endblock content %}