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

{% block title %}{{ action }} Testimonial | Admin Portal{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="d-flex align-items-center gap-3 mb-4">
                <a href="{% url 'portal:testimonial_list' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fa-solid fa-arrow-left"></i>
                </a>
                <div>
                    <h1 class="h3 mb-0">{{ action }} Testimonial</h1>
                    <p class="text-muted mb-0 small">
                        {% if action == 'Add' %}Add a new testimonial to display on the homepage carousel.{% else %}Update this testimonial's content.{% endif %}
                    </p>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-body p-4">
                    {% if testimonial and testimonial.photo %}
                    <div class="d-flex align-items-center gap-3 mb-4 p-3 bg-light rounded">
                        <img src="{{ testimonial.photo.url }}" alt="{{ testimonial.name }}"
                             class="rounded-circle"
                             style="width:64px;height:64px;object-fit:cover;border:2px solid var(--bs-primary);">
                        <div>
                            <strong>{{ testimonial.name }}</strong>
                            <p class="mb-0 text-muted small">Current photo — upload a new file below to replace it.</p>
                        </div>
                    </div>
                    {% endif %}

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% crispy form %}
                    </form>
                </div>
            </div>

            <div class="mt-3 p-3 bg-light rounded small text-muted">
                <i class="fa-solid fa-circle-info me-1"></i>
                <strong>Tips:</strong>
                Set <em>Published</em> to make the testimonial visible on the website.
                Use <em>Display Order</em> to control the carousel sequence (lower = first).
                YouTube video URL is optional — paste the full watch or share link.
            </div>
        </div>
    </div>
</div>
{% endblock %}