{% load i18n %}
{% load tz %}
{% load short_name %}
{% load interventions_tags %}

<div class="mb-3">
    <div class="fw-semibold">{{ intervention.title }}</div>
    <div class="text-muted small">
        <span class="badge bg-{{ intervention.get_status_color }} status-{{ intervention.status }} me-2">{{ intervention.get_status_display }}</span>
        {{ intervention.effective_end|date:"d/m/Y" }}
    </div>
</div>

<h6 class="mb-2">{% translate "Travaux réalisés" %}</h6>
{% if work_done_notes %}
    <div class="mb-3">
        {% for note in work_done_notes %}
            <div class="note-item py-3 {% if not forloop.last %}border-bottom{% endif %}">
                <div class="note-display">
                    <div class="d-flex justify-content-between align-items-start gap-2">
                        <div class="note-content flex-grow-1">
                            <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
                                <span class="badge note-type-badge d-inline-flex align-items-center gap-1 {{ note.type_badge_class }}">
                                    <i class="bi {{ note.type_icon_class }}"></i>
                                    {{ note.get_note_type_display }}
                                </span>
                                <span class="note-metadata text-muted small">
                                    {{ note.note_time|timezone:"Europe/Paris"|date:"d-m-Y H:i" }} - {{ note.note_author|short_name }}
                                </span>
                            </div>
                            <p class="mb-0 note-text">{{ note.content|safe|linebreaksbr }}</p>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="text-muted fst-italic mb-3">{% translate "Aucune note de travaux réalisés" %}</div>
{% endif %}

<h6 class="mb-3">{% translate "Documents" %}</h6>
{% if summary_documents %}
    <div class="border rounded p-2" style="background-color: #f8f9fa;">
        <div id="summaryDocumentCarousel" class="carousel slide" data-bs-ride="false">
            <div class="carousel-inner">
                {% for document in summary_documents %}
                {% private_file_url document 'file' as document_file_url %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}" data-document-url="{{ document_file_url }}" data-document-filename="{{ document.filename }}">
                    <div class="d-flex justify-content-center align-items-center" style="min-height: 400px; background-color: #ffffff;">
                        {% if document.filename|lower|slice:"-4:" == ".pdf" %}
                        <iframe src="{{ document_file_url }}" style="width: 100%; height: 500px; border: none;" title="{{ document.filename }}"></iframe>
                        {% else %}
                        <img src="{{ document_file_url }}" class="d-block" alt="{{ document.filename }}" style="max-height: 500px; max-width: 100%; object-fit: contain;">
                        {% endif %}
                    </div>
                    <div class="text-center mt-2 p-2" style="background-color: rgba(0,0,0,0.05); border-radius: 4px;">
                        <p class="mb-1"><strong>{{ document.filename }}</strong></p>
                        <p class="mb-0 text-muted" style="font-size: 0.9em;">{{ document.upload_date|timezone:"Europe/Paris"|date:"d/m/Y H:i" }} - {{ document.uploaded_by|short_name }}</p>
                        <a href="{{ document_file_url }}" class="btn btn-sm btn-outline-primary mt-2" download title="{% translate 'Télécharger' %}">
                            <i class="bi bi-download"></i> {% translate "Télécharger" %}
                        </a>
                    </div>
                </div>
                {% endfor %}
            </div>
            
            {% if summary_documents|length > 1 %}
            <button class="carousel-control-prev" type="button" data-bs-target="#summaryDocumentCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{% translate "Précédent" %}</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#summaryDocumentCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{% translate "Suivant" %}</span>
            </button>
            {% endif %}
        </div>
        
        {# Thumbnails en bas si plusieurs documents #}
        {% if summary_documents|length > 1 %}
        <div class="mt-3 pt-3" style="border-top: 1px solid #dee2e6;">
            <div class="d-flex flex-wrap justify-content-center gap-2" id="summaryCarouselThumbnails">
                {% for document in summary_documents %}
                {% private_file_url document 'file' as document_file_url %}
                <button type="button" class="summary-thumbnail-btn {% if forloop.first %}active{% endif %}" data-bs-target="#summaryDocumentCarousel" data-bs-slide-to="{{ forloop.counter0 }}" aria-label="{{ document.filename }}" style="border: 3px solid transparent; padding: 0; background: none; cursor: pointer; transition: border-color 0.2s;">
                    <img src="{% if document.thumbnail %}{% private_file_url document 'thumbnail' %}{% else %}{{ document_file_url }}{% endif %}" alt="{{ document.filename }}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 4px;">
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
{% else %}
    <div class="text-muted fst-italic">{% translate "Aucun document" %}</div>
{% endif %}

<style>
    #summaryDocumentCarousel .carousel-control-prev,
    #summaryDocumentCarousel .carousel-control-next {
        width: 5%;
        opacity: 0.8;
    }
    #summaryDocumentCarousel .carousel-control-prev:hover,
    #summaryDocumentCarousel .carousel-control-next:hover {
        opacity: 1;
    }
    #summaryDocumentCarousel .carousel-control-prev-icon,
    #summaryDocumentCarousel .carousel-control-next-icon {
        filter: invert(1) grayscale(100);
    }
    .summary-thumbnail-btn.active {
        border-color: #0d6efd !important;
    }
    .summary-thumbnail-btn:hover {
        border-color: #0d6efd !important;
        opacity: 0.8;
    }
</style>

<script>
(() => {
    const summaryCarousel = document.querySelector('#summaryDocumentCarousel');
    if (!summaryCarousel) {
        return;
    }

    const thumbnailBtns = Array.from(document.querySelectorAll('.summary-thumbnail-btn'));
    const carouselItems = Array.from(summaryCarousel.querySelectorAll('.carousel-item'));

    const setActiveThumbnail = (index) => {
        thumbnailBtns.forEach(btn => btn.classList.remove('active'));
        if (thumbnailBtns[index]) {
            thumbnailBtns[index].classList.add('active');
        }
    };

    // Initial sync based on the active carousel item
    const initialIndex = carouselItems.indexOf(summaryCarousel.querySelector('.carousel-item.active'));
    setActiveThumbnail(initialIndex >= 0 ? initialIndex : 0);

    // Update active thumbnail when the carousel finishes sliding
    summaryCarousel.addEventListener('slid.bs.carousel', function (event) {
        setActiveThumbnail(event.to);
    });

    // Ensure manual clicks on thumbnails also refresh the active state
    thumbnailBtns.forEach((btn, index) => {
        btn.addEventListener('click', () => setActiveThumbnail(index));
    });
})();
</script>