api/templates/admin/images.html

{% extends 'base.html' %}

{% block title %}Gestion des Images - Administration{% endblock %}

{% block styles %}
<style>
    .image-card {
        position: relative;
        background-color: var(--card-bg);
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .image-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }
    
    .image-container {
        position: relative;
        width: 100%;
        height: 200px;
        margin-bottom: 15px;
        overflow: hidden;
        border-radius: 6px;
        background-color: var(--block-bg);
    }
    
    .image-preview {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .image-info {
        padding: 10px 0;
    }
    
    .image-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    .image-upload-preview {
        max-width: 100%;
        max-height: 200px;
        margin-top: 15px;
        border-radius: 6px;
        display: none;
    }
    
    .image-date {
        font-size: 0.8rem;
        color: var(--muted-color);
    }
    
    .image-detail-modal img {
        max-width: 100%;
        max-height: 500px;
    }
    
    .image-filter {
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="admin-sidebar">
            <h3 class="mb-3">Administration</h3>
            <ul class="admin-nav">
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
                        <i class="fas fa-book"></i> Matières
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
                        <i class="fas fa-list"></i> Sous-catégories
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
                        <i class="fas fa-file-alt"></i> Textes
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link active">
                        <i class="fas fa-images"></i> Images
                    </a>
                </li>
                <li class="admin-nav-item">
                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
                        <i class="fas fa-sign-out-alt"></i> Déconnexion
                    </a>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="admin-container">
            <h2 class="admin-title">Gestion des Images</h2>
            
            <!-- Upload Image Section -->
            <div class="card mb-4">
                <div class="card-header">
                    <h4><i class="fas fa-upload"></i> Télécharger une nouvelle image</h4>
                </div>
                <div class="card-body">
                    <form id="image-upload-form" method="POST" action="{{ url_for('admin_bp.images') }}" enctype="multipart/form-data">
                        <input type="hidden" name="action" value="upload">
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="image-file">Sélectionner une image</label>
                                    <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
                                    <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
                                </div>
                                
                                <div class="form-group mb-3">
                                    <label for="description">Description (optionnelle)</label>
                                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="Description ou notes sur l'image"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6 d-flex align-items-center justify-content-center">
                                <img id="upload-image-preview" class="image-upload-preview" src="#" alt="Aperçu">
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-upload"></i> Télécharger
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- Image Gallery -->
            <div class="card">
                <div class="card-header">
                    <h4><i class="fas fa-images"></i> Bibliothèque d'images</h4>
                </div>
                <div class="card-body">
                    <!-- Filter -->
                    <div class="image-filter mb-4">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" id="image-search" class="form-control" placeholder="Rechercher par nom ou description...">
                        </div>
                    </div>
                    
                    {% if images %}
                    <div class="row" id="image-gallery">
                        {% for image in images %}
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="image-card">
                                <div class="image-container">
                                    <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="image-preview">
                                </div>
                                <div class="image-info">
                                    <h5 class="mb-1" title="{{ image.filename }}">
                                        {{ image.filename|truncate(20) }}
                                    </h5>
                                    <p class="image-date mb-1">
                                        <i class="fas fa-calendar-alt"></i> 
                                        {{ image.uploaded_at.strftime('%d/%m/%Y') }}
                                    </p>
                                    <p class="text-muted small mb-0">
                                        {{ image.description|default('Aucune description')|truncate(50) }}
                                    </p>
                                </div>
                                <div class="image-actions">
                                    <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#imageModal{{ image.id }}">
                                        <i class="fas fa-eye"></i> Détails
                                    </button>
                                    <form method="POST" action="{{ url_for('admin_bp.images') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette image ?')">
                                        <input type="hidden" name="action" value="delete">
                                        <input type="hidden" name="image_id" value="{{ image.id }}">
                                        <button type="submit" class="btn btn-sm btn-danger">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            
                            <!-- Image Modal -->
                            <div class="modal fade image-detail-modal" id="imageModal{{ image.id }}" tabindex="-1" aria-labelledby="imageModalLabel{{ image.id }}" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="imageModalLabel{{ image.id }}">{{ image.filename }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="text-center mb-4">
                                                <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="img-fluid">
                                            </div>
                                            
                                            <form method="POST" action="{{ url_for('admin_bp.images') }}">
                                                <input type="hidden" name="action" value="update">
                                                <input type="hidden" name="image_id" value="{{ image.id }}">
                                                
                                                <div class="form-group mb-3">
                                                    <label>Téléchargée le</label>
                                                    <input type="text" class="form-control" value="{{ image.uploaded_at.strftime('%d/%m/%Y à %H:%M') }}" readonly>
                                                </div>
                                                
                                                <div class="form-group mb-3">
                                                    <label for="alt_text{{ image.id }}">Texte alternatif</label>
                                                    <input type="text" class="form-control" id="alt_text{{ image.id }}" name="alt_text" value="{{ image.alt_text or '' }}">
                                                </div>
                                                
                                                <div class="form-group mb-3">
                                                    <label for="description{{ image.id }}">Description</label>
                                                    <textarea class="form-control" id="description{{ image.id }}" name="description" rows="3">{{ image.description or '' }}</textarea>
                                                </div>
                                                
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-save"></i> Mettre à jour
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="alert alert-info">
                        Aucune image n'a été téléchargée. Utilisez le formulaire ci-dessus pour ajouter votre première image.
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
<script>
    // Image search functionality
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('image-search');
        if (!searchInput) return;
        
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const imageCards = document.querySelectorAll('.image-card');
            
            imageCards.forEach(card => {
                const filename = card.querySelector('h5').textContent.toLowerCase();
                const description = card.querySelector('.text-muted').textContent.toLowerCase();
                
                if (filename.includes(searchTerm) || description.includes(searchTerm)) {
                    card.closest('.col-lg-4').style.display = '';
                } else {
                    card.closest('.col-lg-4').style.display = 'none';
                }
            });
        });
    });
</script>
{% endblock %}