<mat-card class="mb-3">
    <mat-card-header class="bg-raspberry text-bg-primary d-flex rounded-top py-2 px-3">
        <div class="flex-fill">
            <mat-card-title>
                {{ guildData.clan.title }} <span class="ms-2 me-2 fw-light opacity-75">|</span><small class="fs-5 fw-light opacity-75">server {{ guildData.clan.serverId }}</small>
            </mat-card-title>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center text-end">
            <span class="fs-5 font-light">{{ guildData.clan.membersCount }}/30</span>
        </div>
    </mat-card-header>
    <mat-card-content>
        <div class="row mt-2">
            <div class="col-xs-12 col-md-6">
                <span class="border-bottom border-raspberry text-raspberry fs-5">Server/Season Dates</span>
                <dl class="dl-horizontal dl-large mt-3 mb-0">
                    <dt>Server Reset Time</dt>
                    <dd class="font-monospace">{{ (guildData.serverResetTime*1000) | date: 'dd/MM/yyyy HH:mm:ss' }}</dd>
                    <dt>War End Season Time</dt>
                    <dd class="font-monospace">{{ (guildData.clanWarEndSeasonTime*1000) | date: 'dd/MM/yyyy HH:mm:ss' }}</dd>
                    <dt>Free Clan Change Start</dt>
                    <dd class="font-monospace">{{ (guildData.freeClanChangeInterval.start * 1000) | date: 'dd/MM/yyyy HH:mm:ss' }}</dd>
                    <dt>Free Clan Change End</dt>
                    <dd class="font-monospace">{{ (guildData.freeClanChangeInterval.end * 1000) | date: 'dd/MM/yyyy HH:mm:ss' }}</dd>
                </dl>
            </div>
            <div class="col-xs-12 col-md-6">
                <span class="border-bottom border-raspberry text-raspberry fs-5">Guild Overview</span>
                <dl class="dl-horizontal dl-large mt-3 mb-0">
                    <dt>Members</dt>
                    <dd class="font-monospace text-end">{{ guildData.clan.membersCount }}/30</dd>
                    <dt>Champions</dt>
                    <dd class="font-monospace text-end">{{ guildData.clan.warriors.length }}/20</dd>
                    <dt>Top Activity</dt>
                    <dd class="font-monospace text-end">{{ guildData.clan.topActivity | number : '1.0' }}</dd>
                    <dt>Top Dungeon</dt>
                    <dd class="font-monospace text-end">{{ guildData.clan.topDungeon | number : '1.0' }}</dd>
                </dl>
            </div>
        </div>
        <mat-divider class="my-2"></mat-divider>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <span class="border-bottom border-raspberry text-raspberry fs-5">Guild Settings</span>
                <dl class="dl-horizontal dl-large mt-2 mb-0">
                    <dt>Guild Min. Level</dt>
                    <dd class="font-monospace">{{ guildData.clan.minLevel }}</dd>
                    <dt>Dismissal Delay</dt>
                    <dd class="font-monospace">{{ guildData.clan.daysToKick }} days</dd>
                    <dt>Guild Master Gifts</dt>
                    <dd class="font-monospace">{{ guildData.clan.giftsCount }}</dd>
                    <dt>Adventure Stat</dt>
                    <dd class="font-monospace">{{ guildData.stat.adventureStat }}</dd>
                </dl>
            </div>
            <div class="col-xs-12 col-md-6">
                <span class="border-bottom border-raspberry text-raspberry fs-5">Solide Overview</span>
                <dl class="dl-horizontal dl-large mt-2 mb-0">
                    <dt>Today Activity</dt>
                    <dd class="font-monospace text-end">{{ guildData.stat.todayActivity }}</dd>
                    <dt>Today Titanite</dt>
                    <dd class="font-monospace text-end">{{ guildData.stat.todayDungeonActivity }}</dd>
                    <dt>Activity Sum</dt>
                    <dd class="font-monospace text-end">{{ guildData.stat.activitySum }}</dd>
                    <dt>Titanite Sum</dt>
                    <dd class="font-monospace text-end">{{ guildData.stat.dungeonActivitySum }}</dd>
                </dl>
            </div>
        </div>
    </mat-card-content>
</mat-card>