{% extends 'basic.html' %}

{% block content %}

<h1>Наши товары и услуги:</h1>

<form class="form-inline my-2 my-lg-0" method="get" action="{% url 'search' %}">
      <input class="form-control mr-sm-2" type="search" placeholder="Поиск" aria-label="Search" name="search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Поиск</button>
</form>

<div class="row" style="margin-top:25px">

{% for service in services %}

<div class="card" style="width: 18rem;">
  <img src="{{service.image.url}}" class="card-img-top" alt="Изображение отсутствует">
  <div class="card-body">
    <h5 class="card-title">{{service.name}}</h5>
    <p class="card-text">{{service.description}}</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item align-center">{{service.type}}</li>
  </ul>
  <div class="card-body">
    <a href="{% url 'service' pk=service.id %}" class="card-link">Перейти на страницу товара/услуги</a>
  </div>
</div>

{% endfor %}

</div>

{% endblock %}