web-petting/templates/admin/testimonials.html

{% extends "admin/layout.html" %}
{% let active_page = "testimonials" %}

{% block title %}{{ t.testimonials_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.testimonials_title }}</h1>
</div>

<!-- Add form -->
<section class="admin-section mb-5">
    <header class="admin-section-head">
        <span class="admin-section-icon" aria-hidden="true">💬</span>
        <div><h2>{{ t.testimonials_add_title }}</h2></div>
    </header>
    <div class="admin-section-body">
    <form method="post" action="/admin/testimonials/add" enctype="multipart/form-data" class="form-grid">
        <div class="field admin-field-wide">
            <label class="label">{{ t.testimonials_text }} *</label>
            <div class="control">
                <textarea class="textarea" name="text" rows="3" required></textarea>
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.testimonials_author_note }}</label>
            <div class="control">
                <input class="input" type="text" name="author_note">
            </div>
        </div>
        <div class="field">
            <label class="label">{{ t.testimonials_image }}</label>
            <div class="control">
                <input class="input" type="file" name="image" accept="image/*">
            </div>
        </div>
        <div class="admin-field-wide"><button type="submit" class="button is-primary">{{ t.testimonials_add_button }}</button></div>
    </form>
    </div>
</section>

<!-- List -->
{% if testimonials.is_empty() %}
    <p class="empty-state">{{ t.testimonials_empty }}</p>
{% else %}
    {% for item in &testimonials %}
    <div class="item-card" id="card-{{ item.id.unwrap() }}">
        <!-- View mode -->
        <div class="tm-view" id="view-{{ item.id.unwrap() }}">
            <div class="item-card-header">
                <div class="testimonial-content">
                    {% if let Some(image_url) = item.image_url.as_deref() %}
                    <img src="{{ image_url }}" alt="" class="testimonial-avatar">
                    {% endif %}
                    <div>
                        <div class="testimonial-text">{{ item.text }}</div>
                        {% if let Some(note) = item.author_note.as_deref() %}
                        <div class="testimonial-note">{{ note }}</div>
                        {% endif %}
                    </div>
                </div>
                <span class="badge {% if item.status == "active" %}badge-active{% else %}badge-archived{% endif %}">
                    {% if item.status == "active" %}{{ t.testimonials_status_active }}{% else %}{{ t.testimonials_status_hidden }}{% endif %}
                </span>
            </div>
            <div class="item-card-actions">
                <button type="button" class="button btn-sm is-info is-light" onclick="toggleEdit({{ item.id.unwrap() }})">{{ t.testimonials_edit }}</button>
                <form method="post" action="/admin/testimonials/{{ item.id.unwrap() }}/toggle">
                    {% if item.status == "active" %}
                    <button type="submit" class="button btn-sm is-warning is-light">{{ t.action_archive }}</button>
                    {% else %}
                    <button type="submit" class="button btn-sm is-success is-light">{{ t.action_activate }}</button>
                    {% endif %}
                </form>
                <form method="post" action="/admin/testimonials/{{ item.id.unwrap() }}/delete" onsubmit="return confirm('Delete?')">
                    <button type="submit" class="button btn-sm is-danger is-light">{{ t.media_delete }}</button>
                </form>
            </div>
        </div>

        <!-- Edit mode (hidden by default) -->
        <div class="tm-edit" id="edit-{{ item.id.unwrap() }}" style="display:none;">
            <form method="post" action="/admin/testimonials/{{ item.id.unwrap() }}/edit" enctype="multipart/form-data">
                <div class="field">
                    <label class="label">{{ t.testimonials_text }}</label>
                    <div class="control">
                        <textarea class="textarea" name="text" rows="3">{{ item.text }}</textarea>
                    </div>
                </div>
                <div class="field">
                    <label class="label">{{ t.testimonials_author_note }}</label>
                    <div class="control">
                        <input class="input" type="text" name="author_note" value="{{ item.author_note.as_deref().unwrap_or("") }}">
                    </div>
                </div>
                {% if item.image_path.is_some() %}
                <div class="field">
                    <div class="testimonial-content mb-2">
                        {% if let Some(image_url) = item.image_url.as_deref() %}<img src="{{ image_url }}" alt="" class="testimonial-avatar">{% endif %}
                        <label class="admin-check admin-check-danger">
                            <input type="checkbox" name="remove_image" value="1">
                            <span class="admin-check-box">✓</span>
                            <span>{{ t.testimonials_remove_image }}</span>
                        </label>
                    </div>
                </div>
                {% endif %}
                <div class="field">
                    <label class="label">{{ t.testimonials_image }}</label>
                    <div class="control">
                        <input class="input" type="file" name="image" accept="image/*">
                    </div>
                </div>
                <div class="action-row">
                    <button type="submit" class="button btn-sm is-primary">{{ t.testimonials_save }}</button>
                    <button type="button" class="button btn-sm is-light" onclick="toggleEdit({{ item.id.unwrap() }})">✕</button>
                </div>
            </form>
        </div>
    </div>
    {% endfor %}
{% endif %}

<script>
function toggleEdit(id) {
    var view = document.getElementById('view-' + id);
    var edit = document.getElementById('edit-' + id);
    if (edit.style.display === 'none') {
        view.style.display = 'none';
        edit.style.display = 'block';
    } else {
        view.style.display = 'block';
        edit.style.display = 'none';
    }
}
</script>
{% endblock %}