{% extends "base.html" %} 
{% load i18n %} 
{% load static %}
{% block content %}

<section id="home" class="fullscreen">
  
  <div class="wrapper">
    {% include 'header.html'%}
    <div class="fullscreen__body">
      
      <div class="home__content">
        <div class="home__content_title">
          {% trans 'Навчальний центр' %} <br />
          <span>{% trans 'кафедра' %} </span> <br />{% trans '"Холодильного обладнання"' %}
        </div>
        <div class="home__content_text">
          <p> «Мета освіти полягає у заміні пустого розуму на вільний»</p>
          <span>Стів Форбс</span>
        </div>
        <div id="header_buttons" class="home__content_btn">
          <div class="home__content_btn_item">
            <a href="#cource" class="button main">Наші курси </a>
          </div>
          <div class="home__content_btn_item">
            <a href="../../media/pdf/catalog.pdf" class="button main" target="_blank"
              >Каталог курсів</a
            >
          </div>
          <div class="home__content_btn_item">
            <a href="https://doc.r717.kiev.ua/timetable/" class="button main" target="_blank"
              >Розклад занять
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<section id="counter" class="counter_stats">
  <h2>Наш навчальний центр</h2>

  <div class="counter_stats_content" data-aos="fade-up">
    <div class="item-stats">
      <div class="item-stats__count number" data-num="23">23</div>
      <h5>Років викладання</h5>
    </div>
    <div class="item-stats">
      <div class="item-stats__count number" data-num="57">57</div>
      <h5>Задоволених випусників <br> в 2022 році</h5>
    </div>
    <div class="item-stats">
      <div class="item-stats__count number" data-num="7">7</div>
      <h5>Проведених курсів <br> в 2022 році</h5>
    </div>
  </div>
</section>

<section class="cource" id="cource">
  <div class="wrapper">
    <div class="cource__title">
      <h2>Наші курси</h2>
    </div>

    <div class="cource__list">
      <div class="elektrik">
        {% for cource in cources %} 
        {% if cource.category.category_name == 'Електрика' %}
        <div class="elektrik_item">
          <div class="front">
            <div class="card_cource_logo">
              <img
                src="{% static 'media/"{{cource.cource_icon_smal}}"' %}"
                class="logo_icon"
                alt="logo2"
              />
            </div>
            <div class="card_cource_title"><p>{{ cource.cource_name}} </p></div>
            <!-- <div class="card_cource_description"></div> -->
          </div>
          <div class="back">
            <img
              class="icon_smal"
              src="media/{{cource.cource_icon_smal}}"
              alt="logo2"
            />
            <p>{{cource.cource_short_desc}}</p>
            <div class="card_cource_btn">
              <a href="{% url 'cource_detail' slug=cource.slug%}"
                >Читати далі</a
              >
            </div>
          </div>
        </div>
        {% endif %} 
        {% endfor %}
      </div>

      <div class="gidravlika">
        {% for cource in cources %}
              {% if cource.category.category_name == 'Гідравліка' %}
              <div class="gidravlika_item">
              <div class="front">
                <div class="card_cource_logo">
                  <img
                    src="/media/{{cource.cource_icon}}"
                    class="logo_icon"
                    alt="logo2"
                  />
                </div>
                <div class="card_cource_title">
                  {{ cource.cource_name}}
                </div>
                <div class="card_cource_description"></div>
              </div>
              <div class="back">
                <img class="icon_smal"
                src="../../media/{{cource.cource_icon_smal}}"
                alt="logo2"
              />
                <p>
                  {{cource.cource_short_desc}}
                </p>
                <div class="card_cource_btn">
                  <a href="{% url 'cource_detail' slug=cource.slug%}">Читати далі</a>
                </div>
              </div>
            </div>
              {% endif%}
          {% endfor %}

      </div>

      <div class="vent">
        {% for cource in cources %}
            {% if cource.category.category_name == 'Вентиляція' %}
            <div class="vent_item">
            <div class="front">
              <div class="card_cource_logo">
                <img
                  src="{{ MEDIA_URL }}/{{cource.cource_icon}}"
                  class="logo_icon"
                  alt="logo2"
                />
              </div>
              <div class="card_cource_title">
                {{ cource.cource_name}}
              </div>
              <div class="card_cource_description"></div>
            </div>
            <div class="back">
              <img class="icon_smal"
              src="../../media/{{cource.cource_icon_smal}}"
              alt="logo2"
            />
              <p>
                {{cource.cource_short_desc}}
              </p>
              <div class="card_cource_btn">
                <a href="{% url 'cource_detail' slug=cource.slug%}">Читати далі</a>
              </div>
            </div>
          </div>
            {% endif%}
            {% endfor %}

      </div>

      <div class="montaj">
        {% for cource in cources %}
            {% if cource.category.category_name == 'Кондиціювання' %}
            <div class="montaj_item">
            <div class="front">
              <div class="card_cource_logo">
                <img
                  src="../../media/{{cource.cource_icon}}"
                  class="logo_icon"
                  alt="logo2"
                />
              </div>
              <div class="card_cource_title">
                {{ cource.cource_name}}
              </div>
              <div class="card_cource_description"></div>
            </div>
            <div class="back">
              <img class="icon_smal"
              src="../../media/{{cource.cource_icon_smal}}"
              alt="logo2"
            />
              <p>
                {{cource.cource_short_desc}}
              </p>
              <div class="card_cource_btn">
                <a href="{% url 'cource_detail' slug=cource.slug%}">Читати далі</a>
              </div>
            </div>
          </div>
            {% endif%}
            {% endfor %}

      </div>

      <div class="teplo">

        {% for cource in cources %}
            {% if cource.category.category_name == 'Холод' %}
            <div class="teplo_item">
            <div class="front">
              <div class="card_cource_logo">
                <img
                  src="../../media/{{cource.cource_icon}}"
                  alt="logo2"
                />
              </div>
              <div class="card_cource_title">
                {{ cource.cource_name}}
              </div>
              <div class="card_cource_description"></div>
            </div>
            <div class="back">
              <img class="icon_smal"
                  src="../../media/{{cource.cource_icon_smal}}"
                  alt="logo2"
                />
              <p>
                {{cource.cource_short_desc}}
              </p>
              <div class="card_cource_btn">
                <a href="{% url 'cource_detail' slug=cource.slug%}">Читати далі</a>
              </div>
            </div>
          </div>
            {% endif%}
            {% endfor %}

      </div>

      <div class="co2">
      </div>



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

<section class="about__detail">
  <div class="about__detail_list">
    <div class="about__detail_item">
      <img src="../../static/img/logo/icon_1.svg" alt="" />
      <h3>Досвід роботи</h3>
      <p>
        В галузі технічної освіти <br>
        20 років державних закладах <br>
        3 роки комерційна діяльність
      </p>
    </div>
    <div class="about__detail_item">
      <img src="../../static/img/logo/icon_2.svg" alt="" />
      <h3>Доступна вартітсь</h3>
      <p>
        Навчальні курси максимально насичені, для зменшення їх тривалості. Це зроблено задля економії вашого часу і коштів. 
        Вартість аудиторного навчання від 160 грн/год.
      </p>
    </div>
    <div class="about__detail_item">
      <img src="../../static/img/logo/icon_3.svg" alt="" />
      <h3>Професіоналізм</h3>
      <p>
        Мета - надання та роз’яснення понять та процесів, надання важливих практичних вмінь та навичок.
        Тому у нас, окрім теорії, проводиться максимально багато практичних занять.
      </p>
    </div>
  </div>
</section>


{% endblock %}