{#
  The measurement clock, for every screen that is not the measurement itself.

  Two requirements of 28/07 are in here. The countdown is always on screen while a
  production is open, and past zero it turns round and shows how long the line has
  been over the interval - in red, because a late measurement that looks like an
  early one is how it stays late. And when the interval expires the measurement
  comes back on its own: the operator is told, and taken there.

  The measurement screen has its own component and does not include this: being
  already on the measurement is the one place there is nothing to announce.
#}
<script src="{{ url_for('static', filename='js/production-clock.js') }}"></script>

<div x-data="productionClock({
       currentUrl: '{{ url_for('measure.api_current_production') }}',
       executeUrl: '{{ url_for('measure.task_execute', task_id=0) }}'
     })"
     x-init="init()"
     x-cloak>

  {# ---- Countdown bar: sticky, so scrolling never hides it ---- #}
  <div x-show="visible"
       x-transition
       class="sticky top-0 z-30 -mx-4 sm:-mx-6 lg:-mx-8 mb-4 px-4 py-2 border-b shadow-sm"
       :class="isDue
         ? 'bg-red-50 dark:bg-red-900/30 border-red-400 dark:border-red-700'
         : paused
           ? 'bg-amber-100 dark:bg-amber-900/40 border-amber-500'
           : 'bg-amber-50 dark:bg-amber-900/20 border-amber-300 dark:border-amber-700'">
    <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">

      <svg class="w-5 h-5 shrink-0"
           :class="isDue ? 'text-red-600 animate-pulse' : 'text-amber-600'"
           fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
      </svg>

      {# In time #}
      <template x-if="!isDue && !paused">
        <span class="text-sm font-medium text-amber-800 dark:text-amber-200">
          {{ _('Prossima misurazione tra') }}
        </span>
      </template>

      {# Over the interval: the delay is the headline, not a footnote #}
      <template x-if="isDue">
        <span class="text-sm font-bold text-red-800 dark:text-red-200">
          {{ _('Misurazione in ritardo di') }}
        </span>
      </template>

      {# Line stopped: the figure is frozen, and says so. Frozen past the interval
         it is a delay held in place, not a wait - the wording has to say which. #}
      <template x-if="paused && seconds > 0">
        <span class="text-sm font-semibold text-amber-900 dark:text-amber-100">
          {{ _('Linea ferma — conto alla rovescia congelato a') }}
        </span>
      </template>
      <template x-if="paused && seconds <= 0">
        <span class="text-sm font-semibold text-amber-900 dark:text-amber-100">
          {{ _('Linea ferma') }} — {{ _('Misurazione in ritardo di') }}
        </span>
      </template>

      <span class="text-lg font-bold font-mono px-2 py-0.5 rounded"
            :class="isDue
              ? 'text-red-900 dark:text-red-100 bg-red-100 dark:bg-red-900/40'
              : 'text-amber-900 dark:text-amber-100 bg-amber-100 dark:bg-amber-900/40'"
            x-text="display"></span>

      <span class="text-xs"
            :class="isDue ? 'text-red-600 dark:text-red-300' : 'text-amber-600 dark:text-amber-400'">
        ({{ _('Ciclo') }} #<span x-text="run ? run.cycle_count : 0"></span>)
      </span>
    </div>
  </div>

  {# ---- Time to measure: announced, then taken there ---- #}
  <div x-show="announced && redirectIn > 0"
       x-transition
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
    <div class="bg-[var(--bg-card)] rounded-2xl shadow-2xl p-8 max-w-sm mx-4 text-center border-2 border-red-500">

      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
        <svg class="w-8 h-8 text-red-600 animate-pulse" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
      </div>

      <h3 class="text-lg font-bold text-[var(--text-primary)] mb-1">
        {{ _('È ora di misurare') }}
      </h3>
      <p class="text-sm text-[var(--text-secondary)] mb-5">
        {{ _('Ritorno alla misurazione tra') }}
        <span class="font-bold font-mono" x-text="redirectIn"></span> s
      </p>

      <button @click="goToMeasurement()"
              class="btn w-full justify-center gap-2 bg-red-600 hover:bg-red-700 text-white font-bold py-2.5">
        {{ _('Vai alla misura') }}
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
        </svg>
      </button>
    </div>
  </div>
</div>