{% load i18n %}
{% load interventions_tags %}
{# Desktop operation display row for read mode - with colored badges #}
<tr class="operation-display-row" data-operation-id="{{ op.id }}">
    <td class="align-top">
        <div class="d-flex align-items-start justify-content-between gap-2">
            <div class="flex-grow-1">
                {% if op.is_custom %}<i class="bi bi-plus-circle-fill text-info me-1" title="{% translate 'Opération personnalisée' %}"></i>{% endif %}
                {% if LANGUAGE_CODE == 'nl' %}
                    {{ op.name_nl }}
                {% else %}
                    {{ op.name_fr }}
                {% endif %}
            </div>
        </div>
        <div class="operation-comment-text small text-muted fst-italic mt-1 {% if not op.comment %}d-none{% endif %}"
             data-operation-id="{{ op.id }}">
            <i class="bi bi-chat-left-quote me-1"></i>
            <span class="operation-comment-text-content">{% if op.comment %}{{ op.comment|linebreaksbr }}{% endif %}</span>
        </div>
        {# Photos thumbnails in read mode #}
        {% if op.photos.all %}
        <div class="mt-1 d-flex flex-wrap gap-1">
            {% for photo in op.photos.all %}
            {% private_file_url photo 'photo' as photo_url %}
            <img src="{{ photo_url }}" alt="{{ photo.description }}" 
                 class="img-thumbnail operation-photo-thumb" 
                 style="width: 40px; height: 40px; object-fit: cover; cursor: pointer;"
                 onclick="showOperationPhotoModalDesktop('{{ photo_url }}', '{{ photo.description|escapejs }}')"
                 title="{{ photo.description|default:'' }}">
            {% endfor %}
        </div>
        {% endif %}
    </td>
    <td>
        {% if op.is_not_applicable %}
            <span class="badge bg-secondary">
                <i class="bi bi-slash-circle me-1"></i>{% translate "N/A" %}
            </span>
        {% elif op.is_measurement %}
            {% if op.measurement_definition.value_type == 'duration' %}
                {% if op.measured_duration is not None %}
                    <span class="badge {% if op.is_measurement_out_of_range %}bg-danger{% else %}bg-primary{% endif %}">
                        <i class="bi bi-stopwatch me-1"></i>{{ op.measured_duration_display }}
                    </span>
                    {% if op.is_measurement_out_of_range %}
                        <i class="bi bi-exclamation-triangle-fill text-danger ms-1" title="{% translate "Valeur hors plage" %}"></i>
                    {% endif %}
                {% else %}
                    <span class="badge bg-light text-muted">-</span>
                {% endif %}
            {% elif op.measurement_definition.value_type == 'datetime' %}
                {% if op.measured_datetime is not None %}
                    <span class="badge {% if op.is_measurement_out_of_range %}bg-danger{% else %}bg-primary{% endif %}">
                        <i class="bi bi-calendar-event me-1"></i>{{ op.measured_datetime|date:"d/m/Y H:i" }}
                    </span>
                    {% if op.is_measurement_out_of_range %}
                        <i class="bi bi-exclamation-triangle-fill text-danger ms-1" title="{% translate "Valeur hors plage" %}"></i>
                    {% endif %}
                {% else %}
                    <span class="badge bg-light text-muted">-</span>
                {% endif %}
            {% else %}
                {% if op.measured_value is not None %}
                    <span class="badge {% if op.is_measurement_out_of_range %}bg-danger{% else %}bg-primary{% endif %}">
                        {{ op.measured_value }} {{ op.measurement_definition.unit }}
                    </span>
                    {% if op.is_measurement_out_of_range %}
                        <i class="bi bi-exclamation-triangle-fill text-danger ms-1" 
                           title="{% translate "Valeur hors plage" %}{% if op.measurement_definition.min_value is not None and op.measurement_definition.max_value is not None %} ({{ op.measurement_definition.min_value }} - {{ op.measurement_definition.max_value }}){% endif %}"></i>
                    {% endif %}
                {% else %}
                    <span class="badge bg-light text-muted">-</span>
                {% endif %}
            {% endif %}
        {% elif op.status %}
            <span class="badge {% if op.status.bootstrap_color %}bg-{{ op.status.bootstrap_color }}{% else %}bg-secondary{% endif %}">
                {% if op.status.bootstrap_icon %}<i class="bi {{ op.status.bootstrap_icon }} me-1"></i>{% endif %}
                {% if LANGUAGE_CODE == "nl" %}{{ op.status.label_nl }}{% else %}{{ op.status.label_fr }}{% endif %}
            </span>
        {% else %}
            <span class="badge bg-light text-muted">-</span>
        {% endif %}
    </td>
    {% if 'operations' in allowed_update_fields %}
    <td class="text-center">
        <button type="button"
                class="btn btn-link btn-sm text-secondary p-0 operation-comment-trigger"
                data-operation-id="{{ op.id }}"
                data-operation-label="{% if LANGUAGE_CODE == 'nl' %}{{ op.name_nl|escapejs }}{% else %}{{ op.name_fr|escapejs }}{% endif %}"
                data-comment="{{ op.comment|default:''|escape }}"
                data-endpoint="{% url 'interventions:operation_update_comment' op.id %}"
                data-add-label="{% translate 'Ajouter un commentaire' %}"
                data-edit-label="{% translate 'Modifier le commentaire' %}"
                title="{% if op.comment %}{% translate 'Modifier le commentaire' %}{% else %}{% translate 'Ajouter un commentaire' %}{% endif %}"
                aria-label="{% if op.comment %}{% translate 'Modifier le commentaire' %}{% else %}{% translate 'Ajouter un commentaire' %}{% endif %}">
            <i class="bi bi-sticky{% if op.comment %}-fill{% endif %}"></i>
        </button>
    </td>
    {% endif %}
</tr>