<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{title}}</h1>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2 text-end">
            <span class="fs-5 text-primary">{{ now | date: 'dd/MM/yyyy' }}</span>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
    <div class="d-flex">
        <p class="fs-3">{{description}}</p>
    </div>
    <mat-divider class="mt-2 mb-3"></mat-divider>

    <mat-tab-group [selectedIndex]="0" color="primary">
        <mat-tab label="Guild">
            <div class="row g-0">
                <div class="col-12 pe-md-2 border-1 border-top">
                    <!--<app-guildwar-attack [members]="getMembers()"></app-guildwar-attack>-->
                    @if (clanLoaded) {
                        <app-card-container [colors]="getColors('raspberry')" [title]="getClanViewModel().getTitle()" subtitle="Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}">
                            <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
                            <div class="d-flex mt-3">
                                <div class="flex-fill">
                                    <h2>
                                        <span class="border-1 border-bottom">{{ getClanViewModel().getTitle() }} <span class="fs-4"> – Server {{ getClanViewModel().getServer() }}</span></span>
                                    </h2>
                                </div>
                                <span class="flex-spacer"></span>
                                <div class="align-self-center me-2 text-end">
                                    <span class="fs-4">Members: {{ getClanViewModel().getMembersCount() }}/{{ maxClanMembers }}</span>
                                </div>
                            </div>
                            <div class="row g-0 my-3">
                                <div class="col-2">
                                    <div class="d-flex align-items-start flex-column me-1" role="group" aria-label="Vertical button group">
                                        <button mat-stroked-button color="warn" (click)="syncClan()" [disabled]="!clanLoaded" class="mb-1">Sync clan</button>
                                        <button mat-stroked-button color="warn" (click)="syncMembers()" [disabled]="!membersLoaded" class="mb-1">Sync members</button>
                                    </div>
                                </div>
                                <div class="col-5">
                                    <dl class="dl-horizontal m-0">
                                        <dt>country</dt>
                                        <dd>{{ getClanViewModel().getCountry() }}</dd>
                                        <dt>serverId</dt>
                                        <dd>{{ getClanViewModel().getServer() }}</dd>
                                        <dt>description</dt>
                                        <dd>{{ getClanViewModel().getDescription() }}</dd>
                                        <dt>level</dt>
                                        <dd>{{ getClanViewModel().getLevel() }}</dd>
                                        <dt>minLevel</dt>
                                        <dd>{{ getClanViewModel().getMinLevel() }}</dd>
                                    </dl>
                                </div>
                                <div class="col-5">
                                    <dl class="dl-horizontal m-0">
                                        <dt>topActivity</dt>
                                        <dd>{{ getClanViewModel().getTopActivity() | number : '1.0' }}</dd>
                                        <dt>topDungeon</dt>
                                        <dd>{{ getClanViewModel().getTopDungeon() | number : '1.0' }}</dd>
                                        <dt>disbanding</dt>
                                        <dd>{{ getClanViewModel().getDisbanding() }}</dd>
                                        <dt>frameId</dt>
                                        <dd>{{ getClanViewModel().getFrameId() }}</dd>
                                        <dt>ownerId</dt>
                                        <dd>{{ getClanViewModel().getOwnerId() | number : '1.0' }}</dd>
                                    </dl>
                                </div>
                            </div>
                        </app-card-container>
                    }
                    @else {
                        <div class="d-flex mt-3">
                            <button mat-stroked-button color="warn" (click)="loadData()" class="mb-1">Load Data</button>
                        </div>
                    }
                    @if (membersLoaded) {
                        <app-card-container [colors]="getColors('raspberry')" title="Members" subtitle="List of guild members">
                            <div class="table-responsive p-0">
                                <table class="table table-striped table-condensed border-top border-light">
                                    <thead>
                                        <tr role="row" class="text-bg-raspberry bg-opacity-60">
                                            <th scope="col" class="align-middle w-auto ps-4">
                                                <div class="text-start">
                                                    #
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="d-flex align-items-center text-start">
                                                    Name
                                                    <mat-icon fontIcon="arrow_upward" class="ms-1 icon-xsmall"></mat-icon>
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-start">
                                                    ID
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-start">
                                                    Last Login
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-start">
                                                    Dismissal Delay
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-start">
                                                    Clan
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-start">
                                                    Server
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto">
                                                <div class="text-end">
                                                    Heroes
                                                </div>
                                            </th>
                                            <th scope="col" class="align-middle w-auto pe-4">
                                                <div class="text-end">
                                                    Titans
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @for (memberVM of getMembersViewModel().getMembers(); track memberVM.getId(); let index = $index) {
                                            <tr role="row" class="align-middle">
                                                <td class="cell text-start ps-4">
                                                    {{ (index+1) }}
                                                </td>
                                                <td class="cell text-start">
                                                    <div class="d-flex">
                                                        <mat-icon [fontIcon]="memberVM.isChampion() ? 'gpp_good' : 'gpp_bad'" class="me-2 icon-small {{ memberVM.isChampion() ? 'text-green' : 'text-muted' }}"></mat-icon>
                                                        <span [class]="memberVM.isChampion() ? 'text-green' : ''">{{ memberVM.getName() }}</span>
                                                    </div>
                                                </td>
                                                <td class="cell font-monospace text-start">
                                                    <span class="me-2">{{ memberVM.getId() }}</span> <small class="me-3">[{{ memberVM.getLevel() }}]</small> 
                                                </td>
                                                <td class="cell font-monospace text-start">
                                                    <span class="me-3">{{ memberVM.getLastLoginTime() + '000' | date: 'dd/MM HH:mm' }}</span>
                                                </td>
                                                <td class="cell font-monospace text-start">
                                                    <span [class]="memberVM.getInactivity().daysLeft < daysToWarn ? 'text-red' : ''">{{ memberVM.getInactivity().dropDelay }}</span>
                                                </td>
                                                <td class="cell text-start">
                                                    {{ memberVM.getClanTitle() }}
                                                </td>
                                                <td class="cell text-start">
                                                    {{ memberVM.getServerId() }}
                                                </td>
                                                <td class="cell font-monospace text-end">
                                                    {{ memberVM.getMemberHeroes().power | number : '1.0' }}
                                                </td>
                                                <td class="cell font-monospace text-end pe-4">
                                                    {{ memberVM.getMemberTitans().power | number : '1.0' }}
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </app-card-container>
                    }
                </div>
            </div>
        </mat-tab>
        <mat-tab label="Defense">
            <div class="row g-0">
                <div class="col col-md-6 pe-md-2">
                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Defense overview">
                        <!--<app-guildwar-defence [members]="getMembers()" type="heroes"></app-guildwar-defence>-->
                    </app-card-container>
                </div>
                <div class="col col-md-6 ps-md-2">
                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Defense overview">
                        <!--<app-guildwar-defence [members]="getMembers()" type="titans"></app-guildwar-defence>-->
                    </app-card-container>
                </div>
            </div>
        </mat-tab>
        <mat-tab label="Attack">
            <div class="row g-0">
                <div class="col col-md-6 ps-md-2">
                    <app-card-container [colors]="getColors('accent')" title="Heroes Fortifications" subtitle="Attack overview">
                        <!--<app-guildwar-attack [members]="getMembers()" type="heroes"></app-guildwar-attack>-->
                    </app-card-container>
                </div>
                <div class="col col-md-6 ps-md-2">
                    <app-card-container [colors]="getColors('accent')" title="Titans Fortifications" subtitle="Attack overview">
                        <!--<app-guildwar-attack [members]="getMembers()" type="titans"></app-guildwar-attack>-->
                    </app-card-container>
                </div>
            </div>
        </mat-tab>
        <mat-tab label="Raids">
            <div class="row g-0">
                <div class="col">
                    <app-card-container [colors]="getColors('megna')" title="Guild Raids" subtitle="Statistics">
                        <!---->
                    </app-card-container>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
</div>
