@if (bet()) {
<div
  class="bg-slate-800 rounded-lg shadow-lg p-4 flex flex-col space-y-4 border border-slate-700 hover:border-cyan-500 transition-colors duration-300 mb-4">
  <header class="flex justify-between items-start">
    <h3 class="text-lg font-bold text-cyan-400">{{ bet().title }}</h3>
    <div class="flex items-center space-x-2 text-sm">
      <span [class]="'px-2 py-1 text-xs font-semibold rounded-full text-slate-900 ' + statusInfo().color">
        {{ statusInfo().text }}
      </span>
      @if(bet().isPublic) {
      <span class="text-slate-400" title="Pubblica">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 7.97 5 10 5c2.03 0 3.488.73 4.756 1.321l.004.002c.08.036.16.07.24.106a6.008 6.008 0 011.912 2.706A7.958 7.958 0 0118 10a7.958 7.958 0 01-1.168 1.973 6.012 6.012 0 01-1.912 2.706C13.488 14.27 12.03 15 10 15c-2.03 0-3.488-.73-4.756-1.321l-.004-.002a6.005 6.005 0 01-2.152-2.814A7.958 7.958 0 012 10a7.958 7.958 0 011.168-1.973zM10 12.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"
            clip-rule="evenodd" />
        </svg>
      </span>
      }
    </div>
  </header>

  <p class="text-sm text-slate-400 flex-grow">{{ bet().description }}</p>

  <div>
    <h4 class="text-xs font-semibold text-slate-500 uppercase mb-2">Partecipanti</h4>
    <div class="flex items-center space-x-2">
      <div class="flex -space-x-2 overflow-hidden">
        @for (p of participants(); track getUserId(p.user)) {
        @if (isUser(p.user)) {
        <img class="inline-block h-8 w-8 rounded-full ring-2 ring-slate-800" [src]="p.user.avatarUrl"
          [alt]="p.user.name" [title]="p.user.name + ' - Premio: ' + bet().stake">
        } @else {
        <div
          class="inline-block h-8 w-8 rounded-full ring-2 ring-slate-800 bg-slate-700 flex items-center justify-center text-[10px] text-slate-400"
          [title]="'Utente ID: ' + p.user">
          U
        </div>
        }
        }
      </div>
      @if (observers().length > 0) {
      <div class="flex items-center text-slate-400" [title]="observerNamesTitle()">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
          <path fill-rule="evenodd"
            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
            clip-rule="evenodd" />
        </svg>
        <span class="ml-1 text-sm">{{ observers().length }}</span>
      </div>
      }
    </div>
  </div>

  <footer class="border-t border-slate-700 pt-3 flex justify-between items-center text-sm text-slate-400">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd"
          d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
          clip-rule="evenodd" />
      </svg>
      <span>{{ bet().startDate | date:'dd MMM' }}</span>
      @if (bet().endDate) {
      <span class="mx-1.5">&rarr;</span>
      <span>{{ bet().endDate | date:'dd MMM' }}</span>
      }
    </div>
    <div class="font-semibold text-cyan-400">
      {{ getTimeRemaining() }}
    </div>
  </footer>
</div>
}