{# Next Measurement Component

   Indicatore della prossima misura da effettuare.

   Variabili Alpine.js richieste nel parent component:
   - nextSubtask: object | null - prossimo subtask da misurare
     - marker_number: int
     - description: string
     - nominal: float
     - unit: string
#}

<div x-show="nextSubtask" class="mt-4 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
  <div class="flex items-center gap-2 text-sm text-steel dark:text-steel-light">
    <!-- Arrow right icon -->
    <svg class="w-4 h-4 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
    </svg>
    <span class="font-medium">{{ _('Prossima misura') }}:</span>
    <span class="font-semibold text-[var(--text-primary)]">
      #<span x-text="nextSubtask?.marker_number"></span>
      <span x-text="nextSubtask?.description" class="ml-1"></span>
    </span>
  </div>

  <!-- Nominal preview -->
  <div class="mt-1 ml-6 text-xs text-steel dark:text-steel-light">
    <span>Nom: </span>
    <span class="font-mono font-medium" x-text="nextSubtask?.nominal?.toFixed(3)"></span>
    <span class="ml-1" x-text="nextSubtask?.unit || 'mm'"></span>
  </div>
</div>