{% extends "website/base.html" %}
{% block content %}
<section class="section">
  <div class="card">
    <div class="badges">
      <span class="badge">Quality care</span>
      <span class="badge">Compassion</span>
      <span class="badge">Client feedback</span>
    </div>
    <h1 class="h1" style="margin-top:10px">Testimonials</h1>
    <p class="p">Feedback focused on care quality, professionalism, and compassion.</p>
  </div>
</section>

<section class="section">
  <div class="grid grid-3">
    {% for t in testimonials %}
      <div class="card hover">
        <div class="card-title">
          <div class="icon">💬</div>
          <div>
            <h3 class="h3" style="margin:0">{{ t.name|default:"Anonymous" }}</h3>
            <div class="small">{{ t.relation }}</div>
          </div>
        </div>
        <div class="sep"></div>
        <p class="p">“{{ t.content }}”</p>
      </div>
    {% empty %}
      <div class="card">Add testimonials in <b>Admin → Testimonials</b>.</div>
    {% endfor %}
  </div>
</section>
{% endblock %}