{% 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>

<div class="mb-3">
    <span class="fw-semibold">{% translate "Travaux réalisés" %}</span>
</div>
{% if work_done_notes %}
    {% for note in work_done_notes %}
        <div class="note-item py-3 {% if not forloop.last %}border-bottom border-primary{% endif %}">
            <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="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.content|safe|linebreaksbr }}</p>
                </div>
            </div>
        </div>
    {% endfor %}
{% else %}
    <p class="text-muted mb-0 small">{% translate "Aucune note de travaux réalisés" %}</p>
{% endif %}

<div class="mt-4 mb-2">
    <span class="fw-semibold">{% translate "Documents" %}</span>
</div>
{% if summary_documents %}
    <div class="row">
        {% for document in summary_documents %}
            <div id="summary-document-card-mobile-{{ document.id }}" class="col-6 col-md-2 mb-3">
                <div class="position-relative">
                    {% private_file_url document 'file' as document_file_url %}
                    <a href="{{ document_file_url }}" target="_blank" rel="noopener">
                        <div class="img-thumbnail" style="width: 100%; height: 100px; overflow: hidden;">
                            {% if document.thumbnail %}
                            {% private_file_url document 'thumbnail' as document_thumbnail_url %}
                            <img src="{{ document_thumbnail_url }}" alt="{{ document.filename }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                            {% else %}
                            <img src="{{ document_file_url }}" alt="{{ document.filename }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                            {% endif %}
                        </div>
                    </a>
                </div>
                <div class="text-center text-muted mt-1" style="font-size: 0.85em;">
                    {{ document.upload_date|date:"d/m/Y H:i" }}<br>
                    {{ document.uploaded_by|short_name }}
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p class="text-muted mb-0 small">{% translate "Aucun document" %}</p>
{% endif %}