{{--
  One story-target row of the Gantt: label column (name, meta, start date, exec/pass
  mini-bars) plus the timeline track. Used both stand-alone and as a child of a
  merged prefix group ($child = true, $xShow = the Alpine expression gating it).
--}}
<div class="gantt-row {{ ($child ?? false) ? 'gantt-child' : '' }}" wire:key="{{ $rowKey }}"
     @if (! empty($xShow)) x-show="{{ $xShow }}" x-cloak @endif>
  <div class="gantt-label">
    <div class="gantt-name" title="{{ $r['name'] }}">{{ $r['shortName'] ?? $r['name'] }}</div>
    <div class="gantt-meta">
      @if ($r['type'])<span class="gantt-type">{{ $r['type'] }}</span>@endif
      @if ($r['jira'])<a href="#">{{ $r['jira'] }}</a>@endif
      @if ($r['tcId'])
        <span class="gantt-est">~{{ $r['days'] }} d</span>
        <span class="gpill {{ $r['testStatus'] }}">{{ str_replace('_', ' ', $r['testStatus']) }}</span>
      @else
        @if ($r['targetStatus'])<span class="gpill {{ $r['targetStatusClass'] ?? 'not_started' }}">{{ $r['targetStatus'] }}</span>@endif
        @if ($r['owner'])<span class="gantt-owner" title="{{ $r['owner'] }}">{{ $r['owner'] }}</span>@endif
      @endif
    </div>

    @if ($r['tcId'])
      <div class="gantt-dates">
        Start <input type="date" value="{{ $r['startDate'] }}"
                     wire:change="setStart({{ $r['tcId'] }}, $event.target.value)">
        @if ($r['endDate'])<span>→ end <span class="end">{{ $r['endDate'] }}</span></span>@endif
      </div>
      <div class="gantt-bars">
        <div class="lb"><span class="cap">Exec</span>
          <span class="bar" title="{{ $r['executed'] }}% executed"><span class="seg done" style="width:{{ $r['executed'] }}%"></span></span>
          <span class="pct">{{ $r['executed'] }}%</span>
        </div>
        <div class="lb"><span class="cap">Pass</span>
          <span class="bar"><span class="seg done {{ $passClass($r['pass'], $r['executed']) }}" style="width:{{ $r['pass'] }}%"></span></span>
          <span class="pct">{{ $r['pass'] }}%</span>
        </div>
      </div>
    @endif
  </div>

  <div class="gantt-track">
    @if ($todayOffset !== null)<div class="gantt-today" style="left:{{ $todayOffset }}%"></div>@endif

    @if ($r['bar'])
      <div class="gantt-bar {{ $r['bar']['overflow'] ? 'overflow' : '' }}"
           style="left:{{ $r['bar']['left'] }}%; width:{{ $r['bar']['width'] }}%"
           title="{{ $r['name'] }} — est ~{{ $r['days'] }} d · {{ $r['executed'] }}% executed">
        @if ($r['executed'] > 0)<div class="fill {{ $passClass($r['pass'], $r['executed']) }}" style="width:{{ $r['executed'] }}%"></div>@endif
        <div class="flabel"><span>{{ $r['executed'] }}%</span></div>
      </div>
    @elseif (! $r['hasPlan'])
      <div class="gantt-noplan">no test plan</div>
    @endif

    @if ($r['marker'] !== null)<div class="gantt-marker" style="left:{{ $r['marker'] }}%" title="Results uploaded">◆</div>@endif
    @if ($r['due'] !== null)<div class="gantt-due" style="left:{{ $r['due'] }}%" title="Target due date">◇</div>@endif
  </div>
</div>