{% extends "base.html" %}
{% block title %}Услуги{% endblock %}
{% block content %}
<div class="container py-4">
  <h1 class="mb-4">Наши услуги</h1>
  {% if services %}
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    {% for svc in services %}
    <div class="col fade-in-card">
      <div class="card h-100 shadow-sm">
        {% if svc.image %}
        <img src="{{ url_for('static', filename='uploads/services/' + svc.image) }}"
             class="card-img-top" alt="{{ svc.name }}" style="height:200px;object-fit:cover;">
        {% else %}
        <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center"
             style="height:200px;">
          <i class="bi bi-tools text-white" style="font-size:3rem;"></i>
        </div>
        {% endif %}
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">{{ svc.name }}</h5>
          {% if svc.description is defined and svc.description %}
          <p class="card-text text-muted small">{{ svc.description[:120] }}{% if svc.description|length > 120 %}…{% endif %}</p>
          {% endif %}
          <div class="mt-auto">
            {% if svc.price is defined and svc.price %}
            <p class="fw-bold text-primary mb-1">{{ "%.2f"|format(svc.price) }} ₽</p>
            {% endif %}
            {% if svc.duration is defined and svc.duration %}
            <p class="text-muted small mb-1"><i class="bi bi-clock"></i> {{ svc.duration }}</p>
            {% endif %}
            {% if svc.category is defined and svc.category %}
            <span class="badge bg-secondary mb-2">{{ svc.category }}</span>
            {% endif %}
            <a href="{{ url_for('service_detail', service_id=svc.id) }}"
               class="btn btn-outline-primary btn-sm w-100">Подробнее</a>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="alert alert-info">Услуги пока не добавлены.</div>
  {% endif %}
</div>
{% endblock %}