{% block inspection_pictures %}
{% set observations_per_page = 2 %}
{% set total_observations = inspection.observations|length %}
{% set total_pages = ((total_observations / observations_per_page) | round(0, 'ceil')) | int %}

{% for page_num in range(1, total_pages + 1) %}
<div style="page-break-before: always;">
  <div class="wrapper">
    {% set title = "Imágenes de Inspección / Inspección : ID de Registro: " ~ (inspection.header.location.access_point_no if inspection.header.location.access_point_no else "") %}
    {% set border_bottom = false %}
    {% set border_top = false %}
    {% include "nassco/macp/es/page_title.html" %}
    
    <div class="row w-full">
      <div class="box font-small flex-1 text-center h-2">
        <p class="m-0">{{ t("labels.place") }}:</p>
        {% if inspection.header.location.city %}
        <p class="m-0 font-semibold">{{ inspection.header.location.city }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-2 text-center border-left-0 h-2">
        <p class="m-0">{{ t("labels.road") }}:</p>
        {% if inspection.header.location.street %}
        <p class="m-0 font-semibold">{{ inspection.header.location.street }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-1 text-center border-left-0 h-2">
        <p class="m-0">{{ t("labels.date") }} <span class="font-extra-small">(YYYY/MM/DD)</span>:</p>
        {% if inspection.header.survey.survey_date %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.survey_date.strftime("%Y/%m/%d") }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-1 text-center border-left-0 h-2">
        <p class="m-0">{{ t("labels.camera") }}:</p>
        {% if inspection.header.survey.inspection_technology and inspection.header.survey.inspection_technology.label %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.inspection_technology.label }}</p>
        {% endif %}
      </div>
      <div class="box font-small flex-2 text-center border-left-0 h-2">
        <p class="m-0">{{ t("labels.operator") }}:</p>
        {% if inspection.header.survey.surveyed_by %}
        <p class="m-0 font-semibold">{{ inspection.header.survey.surveyed_by }}</p>
        {% endif %}
      </div>
    </div>

    <div class="container" style="height: 8.6in;">
      {% set start_index = (page_num - 1) * observations_per_page %}
      {% set end_index = start_index + observations_per_page if start_index + observations_per_page <= total_observations else total_observations %}
      
      {% for i in range(start_index, end_index) %}
        {% set observation = inspection.observations[i] %}
        <div class="row w-full mt-2">
          <div class="w-full text-center">
            {% if observation.annotated_frame %}
            <img
              style="max-height: 300px; width: auto;" 
              src="{{ observation.annotated_frame }}" 
            />
            {% endif %}
            <p class="m-0 mt-1 font-small">
              {{ t("labels.photo") }}: {{ i + 1 }}
              {% if observation.video_ref %}
              , {{ observation.video_ref }}
              {% endif %}
            </p>
            <p class="m-0 font-small">
              {% if observation.distance is not none %}
              {{ observation.distance }}{{ measurement_units }}
              {% endif %}{% if observation.code and observation.code.full_name %}
              , {{ observation.code.full_name }}
              {% endif %}
            </p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}