{% load i18n %}
{% load static %}
{% load utils_tags %}


{% if featured_services %}
<div class="bg-secondary h2 my-5 py-3 text-center text-white">
  {% trans "Our Focus" %}
 </div>
<div class="row">
  {% for s in featured_services %}
  <div class="col-md-4 mb-3">
    <div class="card h-100">
      {% if s.image %}
      <div class="text-center pt-3 px-3">
        <img src="{{ s.image.url }}" class="img-fluid rounded" alt="{{ s.title }}" style="max-height: 180px; width: auto;">
      </div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ s.title }}</h5>
        <p class="card-text">{{ s.short_description }}</p>
      </div>
      <div class="card-footer bg-white border-0">
        <a
          href="{% url 'website:services' %}"
          class="btn btn-sm btn-outline-primary"
        >
          {% trans "Learn more" %}
        </a>
      </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 %}