@php
  $frequence = $radio->frequence ?? '';
  $frequenceFormatted = Str::contains(Str::lower($frequence), 'hz') ? $frequence : $frequence . ' MHz';
  $frequenceLength = Str::length($frequenceFormatted);
  $maxCityLength = 26 - $frequenceLength - 3; // 3 pour ' - '
  $cityFormatted = Str::title($city);
  $cityTruncated = Str::limit($cityFormatted, $maxCityLength, '...');
  $fullName = Str::title($radio->name);
  $truncatedName = Str::words($fullName, 10, '...');
  $nameWasTruncated = Str::length($fullName) > Str::length($truncatedName);

  $fullCity  = Str::title($city);
  $truncatedCity = Str::limit($fullCity, $maxCityLength, '...');
  $cityWasTruncated = Str::length($fullCity) > Str::length($truncatedCity);
@endphp


<div class="col-auto radio-item"  data-name="{{ strtolower($radio->name) }}" data-city="{{ strtolower($city) }}" id="radio-{{ $radio->id }}" @if($online) style="display: none;" @endif>
  <div class="card shadow-sm border-0" style="border-radius: 1rem; width: 260px; max-height: 200px;">
    <div class="card-body px-3 pb-2">
      <div class="d-flex align-items-start">
        <!-- Icône / Logo -->
        <a href="{{ route('inforadio', ['radio_id' => $radio->id]) }}" class="text-decoration-none text-black" target="_blank">
        <div class="d-flex align-items-center justify-content-center text-white rounded-3 me-1"
             style="width: 70px; height: 70px; background-color: #f7f7f7; border:0.5px solid #b7410e;">
          <img src="{{ $logo }}" alt="Logo {{ $radio->name }}" style="max-width:45px; max-height:45px;">
        </div>
        </a>


        <!-- Titre (1 à 2 lignes max) avec tooltip si tronqué -->
        <a href="{{ route('inforadio', ['radio_id' => $radio->id]) }}" class="text-decoration-none text-black" target="_blank">
          <div>
            <div class="radio-name fw-bold" style="font-size:1rem;"
               title="{{ $fullName }}" data-bs-toggle="tooltip" >
              {{ $truncatedName }}
            </div>
            <small class="text-muted" style="font-size: 0.70rem;"   title="{{ $city }}" data-bs-toggle="tooltip">
                
              {{ $truncatedCity }} - {{ $frequenceFormatted }}
            </small>
          </div>
        </a>

      </div>
    </div>

    <!-- Footer inchangé -->
    <div class="card-footer bg-white border-0 rounded-bottom px-2 pt-0">
      <div class="d-flex {{ $online ? 'justify-content-center' : 'justify-content-around' }} align-items-center gap-2">
        @if($online)
          <div class="py-2 d-flex align-items-center justify-content-around rounded-3 bg-linear-gradient w-100">
            <label for="playradio-{{ $index - 1 }}" class="text-white mb-0">Écouter la radio</label>
            <button class="btn btn-sm rounded-circle playpause"
                    id="playradio-{{ $index - 1 }}"
                    onclick="playpauseTrack({{ $index - 1 }}, '{{ $hostname }}', '{{ $port }}', '{{ $mount }}', '{{ $radio->name }}', '{{ $radio->id }}')"
                    style="background:white;">
              <i class="fa fa-play text-gradient"></i>
            </button>
          </div>
        @else
          <div class="py-2 d-flex align-items-center justify-content-around rounded-3 bg-linear-gradient w-100">
            <span class="text-white">Voir Plus</span>
            <a href="{{ route('inforadio', ['radio_id' => $radio->id]) }}"
               class="btn rounded-circle text-white"
               style="background:white;" target="_blank">
              <i class="fa fa-arrow-right text-gradient"></i>
            </a>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>