{% extends "layout.html" %}
{% load i18n %}

{% block title %}{% trans "Services" %}{% endblock %}

{% block content %}
<hr class="my-4"/>

<div class="container py-2">
  {% if services %}
    <div class="row g-3">
      {% for s in services %}
        <div class="col-12">
          <div class="card shadow-sm border-0 service-card">
            <div class="card-body">
              <div class="row g-4 align-items-md-center">
                {% if s.image %}
                  <div class="col-12 col-md-4">
                    <img src="{{ s.image.url }}" alt="{{ s.title }}" class="img-fluid rounded w-100">
                  </div>
                  <div class="col-12 col-md-8">
                {% else %}
                  <div class="col-12">
                {% endif %}
                    <div class="d-flex flex-column flex-md-row align-items-md-start justify-content-between gap-2 mb-2">
                      <h2 class="h5 mb-0">{{ s.title }}</h2>
                    </div>

                    {% if s.description %}
                      <div class="service-description text-body-secondary fs-6">
                        {{ s.description|linebreaksbr }}
                      </div>
                    {% elif s.short_description %}
                      <p class="text-body-secondary mb-2">
                        {{ s.short_description }}
                      </p>
                    {% endif %}
                  </div>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
  {% if request.user.is_authenticated and request.user.is_staff %}
<div class="alert alert-info">
 {% url 'dashboard:service_new' as services_url %}
{% blocktrans with url=services_url %}Add <a href="{{ url }}">featured services</a> in the dashboard to display them here.{% endblocktrans %}
</div>
  {% endif %}
  {% endif %}

  {% include "website/partials/call_to_action.html" %}

</div>
{% endblock %}