{% load i18n %}
{% load l10n %}
{% load interventions_tags %}
<div class="mb-3 p-2 border rounded{% if op.is_not_applicable %} bg-light{% endif %}" data-operation-card="{{ op.id }}">
    <div class="d-flex align-items-start justify-content-between gap-2">
        <p class="mb-1 fw-medium {% if op.is_not_applicable %}text-muted{% else %}text-secondary{% endif %} flex-grow-1">
            {% if op.is_custom %}<i class="bi bi-plus-circle-fill text-info" title="{% translate 'Opération personnalisée' %}"></i> {% endif %}
            {% if LANGUAGE_CODE == "nl" %}
                {{ op.name_nl }}
            {% else %}
                {{ op.name_fr }}
            {% endif %}
        </p>
        <div class="d-flex gap-1 align-items-center flex-shrink-0">
            <!-- N/A toggle button -->
            <button type="button"
                    class="btn btn-sm btn-outline-secondary operation-na-toggle py-0 px-2 rounded-pill {% if op.is_not_applicable %}active bg-secondary text-white{% endif %}"
                    data-operation-id="{{ op.id }}"
                    data-operation-type="{% if op.measurement_definition %}measurement{% else %}status{% endif %}"
                    title="{% if op.is_not_applicable %}{% translate 'Marquer comme applicable' %}{% else %}{% translate 'Marquer comme non applicable' %}{% endif %}"
                    aria-label="{% translate 'Non applicable' %}">
                <i class="bi bi-slash-circle{% if op.is_not_applicable %}-fill{% endif %} me-1"></i>{% translate "N/A" %}
            </button>
            <!-- Hidden checkbox for form submission -->
            <input type="checkbox" 
                   class="d-none operation-na-checkbox"
                   name="operation_na_{{ op.id }}"
                   id="op_na_{{ op.id }}"
                   value="1"
                   {% if op.is_not_applicable %}checked{% endif %}
                   data-operation-id="{{ op.id }}"
                   data-operation-type="{% if op.measurement_definition %}measurement{% else %}status{% endif %}">
            {% if can_edit_operation_comments %}
            <!-- Comment button -->
            <button type="button"
                    class="btn btn-link ms-2 p-0 text-secondary 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>
            {% endif %}
        </div>
    </div>

    {% if op.measurement_definition %}
        <div class="input-group mt-2{% if op.is_not_applicable %} opacity-50{% endif %}" data-input-group="{{ op.id }}">
            {% if op.measurement_definition.value_type == 'duration' %}
                <input type="text"
                       pattern="^\d+:[0-5]\d:[0-5]\d$"
                       name="operation_duration_{{ op.id }}"
                       class="form-control border border-primary{% if op.is_measurement_out_of_range %} text-danger fw-bold{% endif %}"
                       value="{{ op.measured_duration_display }}"
                       placeholder="hh:mm:ss"
                       title="Format hh:mm:ss"
                       {% if op.is_not_applicable %}disabled{% endif %}>
                <span class="input-group-text"><i class="bi bi-stopwatch"></i></span>
            {% elif op.measurement_definition.value_type == 'datetime' %}
                <input type="datetime-local"
                       name="operation_datetime_{{ op.id }}"
                       class="form-control border border-primary{% if op.is_measurement_out_of_range %} text-danger fw-bold{% endif %}"
                       value="{% if op.measured_datetime %}{{ op.measured_datetime|date:'Y-m-d' }}T{{ op.measured_datetime|date:'H:i' }}{% endif %}"
                       {% if op.is_not_applicable %}disabled{% endif %}>
                <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
            {% else %}
                <input type="number"
                       step="0.01"
                       name="operation_measure_{{ op.id }}"
                       class="form-control border border-primary{% if op.is_measurement_out_of_range %} text-danger fw-bold{% endif %}"
                       value="{{ op.measured_value|default_if_none:''|unlocalize }}"
                       placeholder="..."
                       {% if op.is_not_applicable %}disabled{% endif %}>
                <span class="input-group-text{% if op.is_measurement_out_of_range %} bg-danger text-white{% endif %}">{{ op.measurement_definition.unit }}</span>
            {% endif %}
        </div>
        {% if op.is_measurement_out_of_range %}
            <div class="small text-danger mt-1">
                <i class="bi bi-exclamation-triangle-fill"></i>
                {% translate "Valeur hors plage" %}
                {% if op.measurement_definition.value_type == 'numeric' and 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 %}
            </div>
        {% endif %}
    {% elif op.status_set %}
        <div class="d-flex flex-wrap gap-2 mt-2{% if op.is_not_applicable %} opacity-50{% endif %}" data-status-group="{{ op.id }}">
            {% for status in op.status_set.statuses.all %}
                <div class="form-check form-check-inline">
                    <input class="form-check-input border border-primary operation-status-radio"
                           type="radio"
                           name="operation_status_{{ op.id }}"
                           id="op_status_{{ op.id }}_{{ status.id }}"
                           value="{{ status.id }}"
                           data-requires-comment="{% if status.requires_comment %}true{% else %}false{% endif %}"
                           data-operation-id="{{ op.id }}"
                           {% if op.status and op.status.id == status.id and not op.is_not_applicable %}checked{% endif %}
                           {% if op.is_not_applicable %}disabled{% endif %}>
                    <label class="form-check-label small{% if status.bootstrap_color %} badge bg-{{ status.bootstrap_color }}{% endif %}" for="op_status_{{ op.id }}_{{ status.id }}">
                        {% if status.bootstrap_icon %}<i class="bi {{ status.bootstrap_icon }}"></i> {% endif %}
                        {% if LANGUAGE_CODE == "nl" %}
                            {{ status.label_nl }}
                        {% else %}
                            {{ status.label_fr }}
                        {% endif %}
                    </label>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="operation-comment-text small text-muted fst-italic mt-2 {% 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>
    
    <!-- Operation photos -->
    {% if op.photos.all %}
    <div class="mt-2">
        <div class="d-flex flex-wrap gap-2" id="operation-photos-{{ op.id }}">
            {% for photo in op.photos.all %}
            {% private_file_url photo 'photo' as photo_url %}
            <div class="position-relative" data-photo-id="{{ photo.id }}">
                <img src="{{ photo_url }}" alt="{{ photo.description }}" 
                     class="img-thumbnail" style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
                     onclick="showOperationPhotoModal('{{ photo_url }}', '{{ photo.description|escapejs }}')">
                {% if can_edit_operation_comments %}
                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 p-0" 
                        style="width: 18px; height: 18px; font-size: 10px; line-height: 1;"
                        onclick="deleteOperationPhoto({{ photo.id }}, {{ op.id }})"
                        title="{% translate 'Supprimer' %}">
                    <i class="bi bi-x"></i>
                </button>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    {% if can_edit_operation_comments and op.requires_photo %}
    <div class="mt-2">
        <button type="button" class="btn btn-sm btn-outline-secondary operation-add-photo-btn" 
                data-operation-id="{{ op.id }}"
                data-operation-name="{% if LANGUAGE_CODE == "nl" %}{{ op.name_nl|escapejs }}{% else %}{{ op.name_fr|escapejs }}{% endif %}">
            <i class="bi bi-camera"></i> {% translate "Ajouter photo" %}
        </button>
    </div>
    {% endif %}
</div>