{% extends './base.html' %}
{% load static %}
{% block page_content %}
{% include './includes/header-services.html' %}

<div class="breadcrumps-wrap wrapper">
  <ul class="breadcrumps-list">
    <li class="bread-item">
      <a href="{% url 'main-page' %}">
        Главная
      </a>
    </li>

    <li class="bread-item active">
      <a href="{% static 'services.html' %}">
        Услуги
      </a>
    </li>
  </ul>
</div>

<section class="services-main">
  <div class="services-wrap wrapper services-main__padding-content">
    <h1 class="headline">
      УСЛУГИ
    </h1>

    <ul class="services-list services-wrap__margin-content">
      {% for service in object_list %}
      <li class="services-item">
        <a href="{{ service.get_absolute_url }}" class="services-link">
          <span class="services-pic">
            <img src="{{ service.preview_photo.url }}" alt="">
          </span>

          <span class="text-wrap">
            <p>
              {{ service.name }}
            </p>
          </span>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
</section>
<section class="feedback-main">
  <div class="feedback-wrap feedback-main__margin-content">
    <div class="feedback-pic">
      <img src="{% static 'assets/img/feedback3.jpg' %}" alt="" />
    </div>
    <div class="feedback-form-wrapper feedback-wrap__margin-content">
      <div class="feedback-info">
        <div class="feedback-headline">
          <h2>СВЯЖИТЕСЬ С НАМИ</h2>
        </div>
        <div class="feedback-subtext">
          <p>Перезвоним в течение 15 минут и ответим на все вопросы</p>
        </div>
      </div>

      <form action="{% url 'feedback' %}" method="post" class="feedback-form feedback-form-wrapper__margin-form js-main-form">
        {% csrf_token %}
        <div class="feedback-modal-list">
          <div class="feedback-input">
            <input type="text" name="name" id="feedback-name" class="feedback-input-item" required />
            <label for="feedback-name" class="label-item"> Имя </label>
          </div>

          <div class="feedback-input">
            <input type="tel" name="phone" id="feedback-phone" class="feedback-input-item mask-validate" required />
            <label for="feedback-phone" class="label-item">
              Номер телефона
            </label>
          </div>
        </div>

        <div class="form-btn-sbmt feedback-form__margin-btn">
          <button type="submit" class="sbmt-btn">Отправить заявку</button>
        </div>

        <div class="form-subtext feedback-form__margin-subtext">
          <p>
            Отправляя контакты, вы соглашаетесь с <br /><a href="$">политикой конфиденциальности</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</section>
{% endblock %}