{{ define "focus/pill" }}
    {{ if .Focusing }}
    {{ $offFocus := and .FocusLink .CurrentPath (not (hasPrefix .CurrentPath .FocusLink)) }}
    <div id="focus-border" class="ring-inset ring-4 ring-indigo-600 rounded-2xl fixed inset w-screen h-screen z-50 pointer-events-none
      before:ring-inset before:ring-4 before:ring-indigo-600 before:fixed before:inset before:w-screen before:h-screen before:z-50 before:pointer-events-none"></div>
    <div id="focus-pill" class="focus-pill fixed bottom-1 left-1/2 -translate-x-1/2 z-50 select-none">
      {{ if $offFocus }}<a href="{{ .FocusLink }}" class="absolute inset-0 z-0 no-underline" aria-label="Return to focus"></a>{{ end }}
      <div class="relative flex items-center gap-12 bg-indigo-600 text-sm text-white rounded-t-lg px-4 py-2">

      <form method="POST" action="/focus/end" class="relative z-10 inline m-0">
        <button type="submit" class="flex items-center gap-1 text-white hover:text-indigo-200 bg-transparent border-0 p-0 cursor-pointer text-sm">
          {{ i "x" "size-4" }} Exit
        </button>
      </form>

      {{ $remaining := sub .FocusCount 1 }}
      {{ if $offFocus }}
        <span class="flex items-center gap-2 whitespace-nowrap">
          {{ i "route-off" "size-4 animate-pulse" }}
          Off track
          {{ if gt $remaining 0 }}
            <span class="opacity-75">{{ $remaining }} remaining</span>
          {{ end }}
        </span>
      {{ else }}
        <span class="flex items-center gap-2 whitespace-nowrap">
          {{ i "telescope" "size-4" }}
          Focusing
          {{ if gt $remaining 0 }}
            <span class="opacity-75">{{ $remaining }} remaining</span>
          {{ end }}
        </span>
      {{ end }}

      {{ if $offFocus }}
        <a href="{{ .FocusLink }}" class="flex items-center gap-1 text-white hover:text-indigo-200 no-underline hover:no-underline bg-transparent border-0 p-0 cursor-pointer text-sm">
          Return {{ i "undo-2" "size-4" }}
        </a>
      {{ else }}
        <form method="POST" action="/focus/next" class="inline m-0">
          <input type="hidden" name="current_id" value="{{ .FocusNotificationID }}">
          <button type="submit" class="flex items-center gap-1 text-white hover:text-indigo-200 bg-transparent border-0 p-0 cursor-pointer text-sm">
            {{ if le .FocusCount 1 }}
              {{ i "check" "size-4" }} Finish
            {{ else }}
              Next {{ i "arrow-right" "size-4" }}
            {{ end }}
          </button>
        </form>
      {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}