<?php
/**
 * Carte d'une image (back-office). Réutilisée par la grille ET par l'upload AJAX.
 * État compact au repos (vignette + légende) ; éditeur déployé au clic sur le crayon.
 * @var array<string,mixed> $img
 * @var int $gid
 */

use App\Core\Csrf;

$name = (string) $img['name'];
?>
<div class="card image-card" data-id="<?= (int) $img['id'] ?>"
     data-replace-url="<?= e(base_url('admin/galleries/' . $gid . '/images/' . $img['id'] . '/replace')) ?>">
    <div class="card-drag-handle sortable-handle" title="Glisser pour réordonner"></div>
    <div class="image-thumb image-drop" title="Déposer un fichier ou cliquer pour remplacer">
        <img src="<?= e(media_url($gid, (string) $img['filename'], 'thumb')) ?>" alt="<?= e($img['alt'] ?? $name) ?>">
        <div class="image-drop-hint"><i class="ti ti-photo-up"></i><span>Déposez un fichier<br>ou cliquez pour remplacer</span></div>
        <input type="file" class="replace-input d-none" accept="image/jpeg,image/png">
    </div>

    <div class="image-caption">
        <div class="image-name<?= $name === '' ? ' is-empty' : '' ?>" title="<?= e($name) ?>"><?= $name === '' ? 'Sans titre' : e($name) ?></div>
        <div class="image-caption-row">
            <label class="form-check form-switch m-0">
                <input class="form-check-input toggle-status" type="checkbox"
                       data-url="<?= e(base_url('admin/galleries/' . $gid . '/images/' . $img['id'] . '/status')) ?>"
                       <?= $img['status'] === 'published' ? 'checked' : '' ?>>
                <span class="form-check-label small">Publié</span>
            </label>
            <div class="image-actions">
                <button type="button" class="image-btn image-btn-neutral image-edit-toggle">Éditer</button>
                <a href="#" class="btn btn-sm btn-icon btn-ghost-danger"
                   data-bs-toggle="modal" data-bs-target="#deleteModal"
                   data-delete-url="<?= e(base_url('admin/galleries/' . $gid . '/images/' . $img['id'] . '/delete')) ?>"
                   data-delete-label="<?= e($name) ?>"><i class="ti ti-trash"></i></a>
            </div>
        </div>
    </div>

    <div class="image-editor">
        <form class="image-edit" method="post" action="<?= e(base_url('admin/galleries/' . $gid . '/images/' . $img['id'])) ?>">
            <?= Csrf::field() ?>
            <div class="mb-2">
                <label class="form-label small mb-1">Nom <span class="text-danger">*</span></label>
                <textarea name="name" class="form-control form-control-sm image-autogrow" rows="3" required><?= e($name) ?></textarea>
            </div>
            <div class="mb-2">
                <label class="form-label small mb-1">Texte SEO &amp; accessibilité</label>
                <textarea name="alt" class="form-control form-control-sm image-autogrow" rows="3"><?= e($img['alt'] ?? '') ?></textarea>
            </div>
            <div class="d-flex gap-2">
                <button type="submit" class="image-btn image-btn-primary image-save flex-fill" disabled>Enregistrer</button>
                <button type="button" class="image-btn image-btn-neutral image-edit-cancel">Annuler</button>
            </div>
        </form>
    </div>
</div>
