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 -->
<div class="form-card" style="margin-bottom:1.5rem;">
    <h2 style="font-size:1.1rem;font-weight:700;margin-bottom:0.75rem;">{{ t.testimonials_add_title }}</h2>
    <form method="post" action="/admin/testimonials/add" enctype="multipart/form-data">
        <div class="field">
            <label class="label">{{ t.testimonials_text }} *</label>
            <div class="control">
                <textarea class="input" name="text" rows="3" required style="min-height:80px;resize:vertical;"></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>
        <button type="submit" class="button is-primary">{{ t.testimonials_add_button }}</button>
    </form>
</div>

<!-- List -->
{% if testimonials.is_empty() %}
    <p style="color:#888;">{{ 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 style="display:flex;align-items:center;gap:0.75rem;">
                    {% if item.image_path.is_some() %}
                    <img src="/admin/testimonials/{{ item.id.unwrap() }}/image" alt="" style="width:48px;height:48px;border-radius:50%;object-fit:cover;">
                    {% endif %}
                    <div>
                        <div style="font-size:0.95rem;line-height:1.5;">{{ item.text }}</div>
                        {% if let Some(note) = item.author_note.as_deref() %}
                        <div style="font-size:0.8rem;color:#888;margin-top:0.2rem;">{{ 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="input" name="text" rows="3" style="min-height:70px;resize:vertical;">{{ 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 style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem;">
                        <img src="/admin/testimonials/{{ item.id.unwrap() }}/image" alt="" style="width:48px;height:48px;border-radius:50%;object-fit:cover;">
                        <label style="font-size:0.85rem;cursor:pointer;color:#888;">
                            <input type="checkbox" name="remove_image" value="1"> {{ t.testimonials_remove_image }}
                        </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 style="display:flex;gap:0.5rem;">
                    <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 %}