{% load i18n tz short_name interventions_tags document_viewer_tags %}

<div class="calendar-notes-docs-wrapper">
    <!-- En-tête résumé -->
    <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
        <h6 class="mb-0 fw-bold text-dark d-flex align-items-center" style="font-size: 0.88rem;">
            <i class="bi bi-journal-text text-primary me-2"></i>{% translate "Notes & Documents" %}
        </h6>
        {% if total_count > 0 %}
        <span class="badge text-bg-light border text-muted" style="font-size: 0.75rem;">
            {{ total_count }} {% if total_count > 1 %}{% translate "éléments" %}{% else %}{% translate "élément" %}{% endif %}
        </span>
        {% endif %}
    </div>

    {% if not has_items %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-journal-x fs-1 d-block mb-2 text-secondary opacity-50"></i>
        <p class="mb-1 fw-semibold text-secondary">{% translate "Aucune note ni document" %}</p>
        <p class="small text-muted mb-0">{% translate "Cette intervention n'a pas encore de note ni de document associé." %}</p>
    </div>
    {% else %}
    <div class="cal-chronological-blocks d-flex flex-column gap-3">
        {% for block in sequenced_blocks %}
            {% if block.has_items %}
            <div class="cal-sequence-block p-3 rounded-3 bg-light-subtle border">
                <!-- En-tête de la phase chronologique -->
                <div class="d-flex justify-content-between align-items-center mb-3 pb-2 border-bottom">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="badge {{ block.badge_class }} py-1 px-2 d-inline-flex align-items-center gap-1" style="font-size: 0.8rem;">
                            <i class="bi {{ block.icon }}"></i>
                            {{ block.title }}
                        </span>
                        <span class="text-secondary small fw-medium" style="font-size: 0.75rem;">
                            {% if block.documents_count > 0 %}{{ block.documents_count }} {% if block.documents_count > 1 %}{% translate "fichiers" %}{% else %}{% translate "fichier" %}{% endif %}{% endif %}
                            {% if block.documents_count > 0 and block.notes_count > 0 %}&bull;{% endif %}
                            {% if block.notes_count > 0 %}{{ block.notes_count }} {% if block.notes_count > 1 %}{% translate "notes" %}{% else %}{% translate "note" %}{% endif %}{% endif %}
                        </span>
                    </div>
                    {% if block.period_display %}
                    <span class="text-muted small text-nowrap" style="font-size: 0.72rem;">
                        <i class="bi bi-clock me-1"></i>{{ block.period_display }}
                    </span>
                    {% endif %}
                </div>

                <!-- Documents & Photos de la phase -->
                {% if block.documents %}
                <div class="cal-block-documents mb-3">
                    <div class="row g-2">
                        {% for doc in block.documents %}
                        {% private_file_url doc 'file' as file_url %}
                        {% if doc.thumbnail %}
                            {% private_file_url doc 'thumbnail' as thumb_url %}
                        {% else %}
                            {% private_file_url doc 'file' as thumb_url %}
                        {% endif %}
                        <div class="col-6 col-sm-4">
                            <div class="card h-100 border shadow-none bg-white rounded-3 overflow-hidden position-relative cal-doc-card">
                                <a href="{{ file_url }}" target="_blank" rel="noopener noreferrer" class="d-block text-decoration-none bg-light d-flex align-items-center justify-content-center text-center overflow-hidden position-relative" style="height: 105px;" title="{% translate 'Ouvrir' %} {{ doc.filename }}">
                                    {% if doc.is_image %}
                                        <img src="{{ thumb_url }}" alt="{{ doc.filename }}" style="width: 100%; height: 100%; object-fit: cover;" loading="lazy">
                                        <div class="position-absolute bottom-0 end-0 p-1">
                                            <span class="badge bg-dark bg-opacity-75 rounded-pill" style="font-size: 0.65rem;" title="{% translate 'Agrandir' %}">
                                                <i class="bi bi-zoom-in"></i>
                                            </span>
                                        </div>
                                    {% else %}
                                        <i class="{{ doc.ext|file_icon_class }}" style="font-size: 2.3rem;"></i>
                                    {% endif %}
                                </a>
                                <div class="card-body p-2 d-flex flex-column justify-content-between" style="min-height: 52px;">
                                    <div class="text-truncate fw-semibold text-dark small" style="font-size: 0.76rem;" title="{{ doc.filename }}">
                                        {{ doc.filename }}
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mt-1 pt-1 border-top" style="font-size: 0.7rem;">
                                        <span class="text-muted text-truncate me-1" title="{{ doc.upload_date|timezone:'Europe/Paris'|date:'d/m/Y H:i' }}{% if doc.uploaded_by %} · {{ doc.uploaded_by|short_name }}{% endif %}">
                                            {{ doc.upload_date|timezone:"Europe/Paris"|date:"d/m/Y" }}
                                        </span>
                                        <a href="{{ file_url }}" download="{{ doc.filename }}" class="text-primary text-decoration-none p-0" title="{% translate 'Télécharger' %}">
                                            <i class="bi bi-download"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Notes de la phase -->
                {% if block.notes %}
                <div class="cal-block-notes {% if block.documents %}border-top pt-2 mt-2{% endif %} d-flex flex-column gap-2">
                    {% for note in block.notes %}
                    <div class="card shadow-none border bg-white rounded-3 cal-note-card">
                        <div class="card-body p-2 px-3">
                            <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
                                <div class="d-flex flex-wrap align-items-center gap-1">
                                    <span class="badge {{ note.type_badge_class }} d-inline-flex align-items-center gap-1 py-1 px-2" style="font-size: 0.72rem;">
                                        <i class="bi {{ note.type_icon_class }}"></i>
                                        {{ note.get_note_type_display }}
                                    </span>
                                </div>
                                <span class="text-muted small text-nowrap" style="font-size: 0.75rem;">
                                    <i class="bi bi-clock me-1"></i>{{ note.note_time|timezone:"Europe/Paris"|date:"d/m/Y H:i" }}
                                </span>
                            </div>

                            <div class="text-dark small note-content-text py-1" style="white-space: pre-wrap; line-height: 1.45; word-break: break-word;">{{ note.content }}</div>

                            <div class="d-flex justify-content-between align-items-center mt-1 pt-1 border-top border-light-subtle" style="font-size: 0.72rem;">
                                <span class="text-muted">
                                    <i class="bi bi-person me-1"></i>{{ note.note_author|short_name|default:"—" }}
                                </span>
                                {% if note.updated_at %}
                                <span class="text-muted fst-italic" title="{% translate 'Mis à jour le' %} {{ note.updated_at|timezone:'Europe/Paris'|date:'d/m/Y H:i' }}{% if note.updated_by %} {% translate 'par' %} {{ note.updated_by|short_name }}{% endif %}">
                                    <i class="bi bi-pencil-fill me-1" style="font-size: 0.65rem;"></i>{% translate "Modifié" %}
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

            </div>
            {% endif %}
        {% endfor %}
    </div>
    {% endif %}
</div>