{% comment %}
  §8 Recruiting surface — sticky countdown + CTA bar.

  Required:
    target_iso   ISO datetime string the countdown ticks toward
    cta_url      destination when the user clicks the primary CTA
    cta_label    button label (e.g. "Sign in to apply")

  Optional:
    closed_label   shown in place of the CTA when target is in the past
                   (default: "Applications closed")
    eyebrow        small label above the countdown (default: "Closes in")
{% endcomment %}
<div x-data="rimsCountdown('{{ target_iso }}')"
     x-cloak
     class="countdown-bar"
     role="region" aria-label="Application deadline">
  <div class="countdown-bar__inner">
    <div class="countdown-bar__timer">
      <p class="countdown-bar__eyebrow">{{ eyebrow|default:"Closes in" }}</p>
      <p class="countdown-bar__digits" aria-live="polite" x-show="!expired">
        <span class="countdown-bar__cell">
          <span class="countdown-bar__num tabular-nums" x-text="String(days).padStart(2,'0')">00</span>
          <span class="countdown-bar__unit">days</span>
        </span>
        <span class="countdown-bar__sep" aria-hidden="true">:</span>
        <span class="countdown-bar__cell">
          <span class="countdown-bar__num tabular-nums" x-text="String(hours).padStart(2,'0')">00</span>
          <span class="countdown-bar__unit">hr</span>
        </span>
        <span class="countdown-bar__sep" aria-hidden="true">:</span>
        <span class="countdown-bar__cell">
          <span class="countdown-bar__num tabular-nums" x-text="String(minutes).padStart(2,'0')">00</span>
          <span class="countdown-bar__unit">min</span>
        </span>
      </p>
      <p class="countdown-bar__digits countdown-bar__digits--closed" x-show="expired">{{ closed_label|default:"Applications closed" }}</p>
    </div>
    <div class="countdown-bar__cta">
      <template x-if="!expired">
        <a href="{{ cta_url }}" class="btn-primary btn-sm">{{ cta_label }}</a>
      </template>
      <template x-if="expired">
        <span class="badge badge-neutral">{{ closed_label|default:"Applications closed" }}</span>
      </template>
    </div>
  </div>
</div>

{# Lightweight Alpine factory. Registered globally once per page. #}
<script>
  if (typeof window.rimsCountdown === 'undefined') {
    window.rimsCountdown = function(targetIso) {
      return {
        target: new Date(targetIso).getTime(),
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
        expired: false,
        _timer: null,
        init() {
          this.tick();
          // Update every minute is enough — sub-minute precision rarely
          // matters for a call deadline and avoids screen-reader chatter
          // via aria-live.
          this._timer = setInterval(() => this.tick(), 60_000);
        },
        destroy() { if (this._timer) clearInterval(this._timer); },
        tick() {
          const now = Date.now();
          let delta = Math.max(0, Math.floor((this.target - now) / 1000));
          if (delta <= 0) { this.expired = true; return; }
          this.days = Math.floor(delta / 86_400); delta -= this.days * 86_400;
          this.hours = Math.floor(delta / 3_600); delta -= this.hours * 3_600;
          this.minutes = Math.floor(delta / 60);
          this.seconds = delta - this.minutes * 60;
        },
      };
    };
  }
</script>