ScommettiApp/frontend-angular/src/features/groups/group-detail/group-detail.component.html

<div class="p-4 flex flex-col h-full text-white animate-fade-in">
  @if (group(); as currentGroup) {
    <!-- Header -->
    <header class="mb-4 flex items-center">
      <button (click)="goBack.emit()" class="p-2 rounded-full hover:bg-slate-700 mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <div>
        <h1 class="text-3xl font-bold">{{ currentGroup.name }}</h1>
        <p class="text-slate-400 mt-1">{{ currentGroup.members.length }} Membri</p>
      </div>
    </header>

    <main class="flex-grow overflow-y-auto pr-2 -mr-2 space-y-6">
      <!-- Members Section -->
      <section>
        <h2 class="text-xl font-semibold text-cyan-400 mb-3">Membri</h2>
        <div class="space-y-3">
          @for (member of sortedMembers(); track member.id) {
            <div class="flex items-center bg-slate-800 p-2 rounded-lg">
              <img class="w-10 h-10 rounded-full mr-4" [src]="member.avatarUrl" [alt]="member.name">
              <div class="flex-grow">
                <p class="font-medium">{{ member.name }}</p>
                <div class="flex items-center text-xs text-amber-400">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                  <span>{{ member.score }} Punti Gloria</span>
                </div>
              </div>
              <button (click)="removeMember(member.id)" class="text-slate-500 hover:text-red-500 p-2 rounded-full transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
              </button>
            </div>
          }
        </div>
        
        @if (!isAddingMembers()) {
          <button (click)="toggleAddMembers()" class="mt-4 w-full flex items-center justify-center py-2 px-4 border-2 border-dashed border-slate-600 rounded-lg text-slate-400 hover:bg-slate-700 hover:border-slate-500 transition-colors">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            Aggiungi Partecipanti
          </button>
        } @else {
           <div class="mt-4 bg-slate-800 p-4 rounded-lg border border-slate-700">
              <h3 class="text-lg font-semibold text-cyan-400 mb-3">Seleziona Amici</h3>
              <div class="max-h-40 overflow-y-auto space-y-2 bg-slate-700 p-3 rounded-md border border-slate-600">
                @for (friend of availableFriends(); track friend.id) {
                  <label class="flex items-center space-x-3 cursor-pointer p-2 rounded-md hover:bg-slate-600 transition-colors">
                    <input type="checkbox"
                          (change)="onFriendSelect(friend.id, $event)"
                          [checked]="selectedFriendIds()[friend.id] || false"
                          class="h-5 w-5 rounded bg-slate-800 border-slate-500 text-cyan-500 focus:ring-cyan-600 cursor-pointer">
                    <img class="w-8 h-8 rounded-full" [src]="friend.avatarUrl" [alt]="friend.name">
                    <span class="font-medium text-slate-200">{{ friend.name }}</span>
                  </label>
                }
                @empty {
                  <p class="text-slate-400 text-center py-4">Tutti i tuoi amici sono già in questo gruppo!</p>
                }
              </div>
              <div class="flex justify-end space-x-3 mt-4">
                <button type="button" (click)="toggleAddMembers()" class="px-4 py-2 rounded-md bg-slate-600 hover:bg-slate-500 text-white font-semibold transition-colors">Annulla</button>
                <button type="button"
                        (click)="addSelectedFriends()"
                        [disabled]="!isAddFriendsFormValid()"
                        [class]="'px-4 py-2 rounded-md font-semibold transition-colors ' + (isAddFriendsFormValid() ? 'bg-cyan-500 hover:bg-cyan-600 text-white' : 'bg-slate-700 text-slate-500 cursor-not-allowed')">
                  Aggiungi
                </button>
              </div>
            </div>
        }
      </section>

      <!-- Accordions -->
      <section class="space-y-4">
        <!-- Active Bets -->
        <div>
          <button (click)="toggleAccordion('active')" class="w-full flex justify-between items-center bg-slate-800 p-3 rounded-lg hover:bg-slate-700 transition-colors">
            <h2 class="text-xl font-semibold text-cyan-400">Scommesse Attive ({{ activeBets().length }})</h2>
             <svg xmlns="http://www.w3.org/2000/svg" [class]="'h-6 w-6 transition-transform ' + (activeAccordion() === 'active' ? 'rotate-180' : '')" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          @if (activeAccordion() === 'active') {
            <div class="pt-4 space-y-4 animate-fade-in">
              @for (bet of activeBets(); track bet.id) {
                <app-bet-card [bet]="bet"></app-bet-card>
              }
              @empty {
                <p class="text-center text-slate-500 pt-4">Nessuna scommessa attiva in questo gruppo.</p>
              }
            </div>
          }
        </div>

        <!-- Past Bets -->
         <div>
          <button (click)="toggleAccordion('past')" class="w-full flex justify-between items-center bg-slate-800 p-3 rounded-lg hover:bg-slate-700 transition-colors">
            <h2 class="text-xl font-semibold text-cyan-400">Scommesse Concluse ({{ pastBets().length }})</h2>
            <svg xmlns="http://www.w3.org/2000/svg" [class]="'h-6 w-6 transition-transform ' + (activeAccordion() === 'past' ? 'rotate-180' : '')" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </button>
          @if (activeAccordion() === 'past') {
            <div class="pt-4 space-y-4 animate-fade-in">
              @for (bet of pastBets(); track bet.id) {
                <app-bet-card [bet]="bet"></app-bet-card>
              }
              @empty {
                 <p class="text-center text-slate-500 pt-4">Nessuna scommessa conclusa in questo gruppo.</p>
              }
            </div>
          }
        </div>
      </section>
    </main>
  } @else {
    <p class="text-center text-slate-500 mt-8">Gruppo non trovato.</p>
  }
</div>