@php
  $isPast = $session->session_date->isPast();
  $myStatus = $myStatuses[$session->id] ?? null;
  $isBooked = $myStatus && $myStatus !== 'cancelled';
  $isFull = $session->capacity !== null && $session->attendees_count >= $session->capacity;
  $isOnline = $session->format === 'online';
@endphp
<div id="session-{{ $session->id }}" class="surface-card rounded-xl p-5 scroll-mt-24">
 <div class="flex flex-col md:flex-row md:items-center gap-5">
  {{-- Date chip --}}
  <div class="shrink-0 w-14 text-center border-r-0 md:border-r md:border-outline-variant md:pr-5">
    <p class="text-label-md font-label-md text-error uppercase tracking-wide">{{ $session->session_date->format('M') }}</p>
    <p class="text-headline-md font-headline-md text-on-surface leading-none">{{ $session->session_date->format('j') }}</p>
    <p class="text-label-md font-label-md text-outline">{{ $session->session_date->format('D') }}</p>
  </div>

  {{-- Details --}}
  <div class="flex-1 min-w-0">
    <div class="flex items-center gap-2 flex-wrap mb-1.5">
      <h4 class="text-body-lg font-body-lg text-on-surface font-semibold leading-snug">{{ $session->title }}</h4>
      <span class="shrink-0 inline-block text-label-md font-label-md px-2.5 py-0.5 rounded-full {{ $isOnline ? 'bg-surface-container-high text-secondary' : 'bg-secondary-container text-on-secondary-container' }}">
        {{ $isOnline ? 'Online' : 'In-Person' }}
      </span>
    </div>
    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-body-md font-body-md text-on-surface-variant">
      <span class="flex items-center gap-1.5">
        <span class="material-symbols-outlined text-[18px] text-outline">schedule</span>
        {{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} · {{ $session->duration_minutes }} min
      </span>
      <span class="flex items-center gap-1.5">
        <span class="material-symbols-outlined text-[18px] text-outline">{{ $isOnline ? 'videocam' : 'location_on' }}</span>
        {{ $isOnline ? ($session->teams_link ? 'Microsoft Teams' : 'Online') : ($session->location ?? 'Venue TBC') }}
      </span>
      @if($session->trainer)
        <span class="flex items-center gap-1.5">
          <span class="material-symbols-outlined text-[18px] text-outline">person</span>{{ $session->trainer->name }}
        </span>
      @endif
      @if($session->capacity !== null)
        <span class="flex items-center gap-1.5">
          <span class="material-symbols-outlined text-[18px] text-outline">group</span>{{ $session->attendees_count }} / {{ $session->capacity }}
        </span>
      @endif
    </div>
  </div>

  {{-- Action --}}
  <div class="shrink-0 md:w-44 md:text-right">
    @if($isPast)
      @if($myStatus === 'attended')
        <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold">
          <span class="material-symbols-outlined text-[18px]">check_circle</span> Attended
        </span>
      @elseif($myStatus === 'no_show')
        <span class="text-label-md font-label-md text-error font-bold">Missed</span>
      @elseif($isBooked)
        <span class="text-label-md font-label-md text-outline">Registered</span>
      @else
        <span class="text-label-md font-label-md text-outline">Ended</span>
      @endif
    @elseif($isBooked)
      <div class="flex items-center gap-3 md:justify-end">
        <span class="inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold">
          <span class="material-symbols-outlined text-[18px]">check_circle</span> Registered
        </span>
        <form method="POST" action="{{ auth()->user()->learnRoute('session.cancel', $session) }}" class="m-0">
          @csrf
          <button type="submit" class="text-label-md font-label-md text-error hover:underline">Cancel</button>
        </form>
      </div>
    @elseif($isFull)
      <button type="button" disabled
        class="w-full md:w-auto bg-surface-container-high text-outline px-4 py-2 rounded-lg text-label-md font-label-md cursor-not-allowed">
        Fully booked
      </button>
    @else
      <form method="POST" action="{{ auth()->user()->learnRoute('session.register', $session) }}" class="m-0">
        @csrf
        <button type="submit"
          class="w-full md:w-auto bg-primary text-on-primary px-5 py-2 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
          Register
        </button>
      </form>
    @endif
  </div>
 </div>

 @if($isPast && $session->notes && $isBooked)
   <div class="mt-4 pt-4 border-t border-outline-variant">
     <p class="flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold mb-1.5">
       <span class="material-symbols-outlined text-[16px]">edit_note</span> Trainer's notes
     </p>
     <p class="text-body-md font-body-md text-on-surface-variant whitespace-pre-line">{{ $session->notes }}</p>
   </div>
 @endif
</div>