{% extends "dashboard/base.html" %}
{% load i18n static %}

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

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h1 class="h3 mb-0">{% trans "Testimonials" %}</h1>
  <a href="{% url 'dashboard:testimonial_new' %}" class="btn btn-primary">
    {% trans "Add testimonial" %}
  </a>
</div>

<p class="text-muted">
  {% trans "Manage client testimonials displayed on the website." %}
</p>

{% if testimonials %}
  <div class="table-responsive">
    <table class="table table-hover align-middle">
      <thead class="table-light">
        <tr>
          <th>{% trans "Client" %}</th>
          <th>{% trans "Content" %}</th>
          <th>{% trans "Rating" %}</th>
          <th>{% trans "Status" %}</th>
          <th>{% trans "Order" %}</th>
          <th class="text-end">{% trans "Actions" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for t in testimonials %}
          <tr>
            <!-- Client -->
            <td>
              <div class="fw-semibold">{{ t.client_name }}</div>
              {% if t.title or t.company %}
                <div class="small text-muted">
                  {{ t.title }}{% if t.title and t.company %}, {% endif %}{{ t.company }}
                </div>
              {% endif %}
              {% if t.website %}
                <div class="small">
                  <a href="{{ t.website }}" target="_blank" rel="noopener">
                    {{ t.website }}
                  </a>
                </div>
              {% endif %}
            </td>

            <!-- Content -->
            <td style="max-width: 420px;">
              <div class="small text-muted">
                {{ t.content|truncatechars:160 }}
              </div>
            </td>

            <!-- Rating -->
            <td>
              <div class="text-warning">
    {% for i in "12345" %}
      {% if forloop.counter <= t.rating %}
        ★
      {% else %}
        <span class="text-muted">★</span>
      {% endif %}
    {% endfor %}
  </div>
  <div class="small text-muted">
    {{ t.rating }} / 5
  </div>
            </td>

            <!-- Status -->
            <td>
              {% if t.is_active %}
                <span class="badge bg-success">{% trans "Active" %}</span>
              {% else %}
                <span class="badge bg-secondary">{% trans "Inactive" %}</span>
              {% endif %}
            </td>

            <!-- Sort order -->
            <td>
              {{ t.sort_order }}
            </td>

            <!-- Actions -->
            <td class="text-end">
              <a href="{% url 'dashboard:testimonial_edit' t.pk %}"
                 class="btn btn-sm btn-outline-secondary">
                {% trans "Edit" %}
              </a>
              <a href="{% url 'dashboard:testimonial_delete' t.pk %}"
                 class="btn btn-sm btn-outline-danger">
                {% trans "Delete" %}
              </a>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="alert alert-info">
    {% trans "No testimonials yet. Add one to get started." %}
  </div>
{% endif %}
{% endblock %}