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

<div class="bg-secondary text-white my-5 py-3 text-center h3">
  {% trans "What Our Customers Say" %}
</div>

<div class="row">
  {% for t in testimonials %}
    <div class="col-md-4 mb-3">
      <div class="card h-100">
        <div class="card-body text-center">
          {% if t.image %}
            <img
              src="{{ t.image.url }}"
              alt="{{ t.client_name }}"
              class="testimonial-image mb-3"
            />
          {% endif %}
          <p class="card-text fst-italic">
            “{{ t.content|truncatechars:220 }}”
          </p>

          <div class="mt-3">
            <div class="fw-semibold">
              {% if t.website and not t.company %}
                <a href="{{ t.website }}" target="_blank" rel="noopener noreferrer">{{ t.client_name }}</a>
              {% else %}
                {{ t.client_name }}
              {% endif %}
            </div>

            {% if t.title or t.company %}
              <div class="small text-muted">
                {{ t.title }}{% if t.title and t.company %}, {% endif %}
                {% if t.company %}
                  {% if t.website %}
                    <a href="{{ t.website }}" target="_blank" rel="noopener noreferrer">{{ t.company }}</a>
                  {% else %}
                    {{ t.company }}
                  {% endif %}
                {% endif %}
              </div>
            {% endif %}

            <div class="text-warning mt-2">
              {% for _ in "12345" %}
                {% if forloop.counter <= t.rating %}
                  ★
                {% else %}
                  <span class="text-muted">★</span>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
  {% empty %}
    <div class="col-12">
      <div class="alert alert-secondary text-center">
        {% trans "No testimonials available yet." %}
      </div>
    </div>
  {% endfor %}
</div>