{% extends "base.html" %}
{% load static %}

{% block title %}Testimonials | Admin Portal{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Testimonials</h1>
            <p class="text-muted mb-0">Manage testimonials displayed on the public website homepage.</p>
        </div>
        <a href="{% url 'portal:testimonial_add' %}" class="btn btn-primary">
            <i class="fa-solid fa-plus me-1"></i> Add Testimonial
        </a>
    </div>

    {% if testimonials %}
    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Order</th>
                        <th>Name</th>
                        <th>Role / Program</th>
                        <th>Quote (preview)</th>
                        <th>Video</th>
                        <th>Published</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in testimonials %}
                    <tr>
                        <td class="text-center fw-bold text-muted">{{ t.display_order }}</td>
                        <td>
                            {% if t.photo %}
                            <img src="{{ t.photo.url }}" alt="{{ t.name }}"
                                 class="rounded-circle me-2"
                                 style="width:36px;height:36px;object-fit:cover;">
                            {% else %}
                            <span class="me-2" style="display:inline-block;width:36px;height:36px;background:#f0f0f0;border-radius:50%;line-height:36px;text-align:center;color:#aaa;">
                                <i class="fa-solid fa-user fa-sm"></i>
                            </span>
                            {% endif %}
                            <strong>{{ t.name }}</strong>
                        </td>
                        <td>
                            <span class="text-muted small">{{ t.role }}</span>
                            {% if t.program %}
                            <br><span class="badge bg-light text-dark border">{{ t.program.name }}</span>
                            {% endif %}
                        </td>
                        <td style="max-width:260px;">
                            <span class="text-muted small" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                                {{ t.quote }}
                            </span>
                        </td>
                        <td class="text-center">
                            {% if t.video_url %}
                            <i class="fa-brands fa-youtube text-danger" title="{{ t.video_url }}"></i>
                            {% else %}
                            <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                        <td class="text-center">
                            {% if t.is_published %}
                            <span class="badge bg-success">Published</span>
                            {% else %}
                            <span class="badge bg-secondary">Draft</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <a href="{% url 'portal:testimonial_edit' t.pk %}"
                                   class="btn btn-sm btn-outline-primary">
                                    <i class="fa-solid fa-pen"></i>
                                </a>
                                <a href="{% url 'portal:testimonial_delete' t.pk %}"
                                   class="btn btn-sm btn-outline-danger">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if is_paginated %}
    <nav class="mt-3">
        <ul class="pagination justify-content-center mb-0">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            </li>
            {% endif %}
            <li class="page-item disabled">
                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>
            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    {% else %}
    <div class="card shadow-sm">
        <div class="card-body text-center py-5">
            <i class="fa-solid fa-quote-left fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">No testimonials yet</h5>
            <p class="text-muted">Add your first testimonial to display it on the website homepage.</p>
            <a href="{% url 'portal:testimonial_add' %}" class="btn btn-primary mt-2">
                <i class="fa-solid fa-plus me-1"></i> Add First Testimonial
            </a>
        </div>
    </div>
    {% endif %}

    <div class="mt-3">
        <a href="{% url 'portal:admin_dashboard' %}" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> Back to Dashboard
        </a>
    </div>
</div>
{% endblock %}