<div class="banner mat-elevation-z2">
    <div class="banner-content d-flex text-bg-accent bg-opacity-50">
        <img [src]="user.image" class="user-img me-3" [alt]="user.username" />
        <div class="flex-spacer">
            <h3 class="mb-0">{{bannerTitle}}</h3>
            <span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
        </div>
        <div class="align-self-center text-end">
            <button mat-raised-button color="warn" routerLink="/settings">
                <mat-icon aria-label="Modifier le compte" fontIcon="settings"></mat-icon> {{ btnSettingsTitle }}
            </button>
        </div>
    </div>
</div>
<div class="demo-page">
    <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"></div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <app-list-errors [errors]="errors"></app-list-errors>
</div>
<div class="content mt-3">
    <mat-card>
        <mat-card-header class="d-flex text-bg-primary rounded-top py-2 px-3">
            <div class="flex-fill">
                <mat-card-title>
                    Buttons variants
                </mat-card-title>
                <mat-card-subtitle class="fw-normal text-white">
                    {{ getColors().length }} colors
                </mat-card-subtitle>
            </div>
            <span class="flex-spacer"></span>
            <div class="align-self-center">
                <button mat-icon-button>
                    <mat-icon>more_vert</mat-icon>
                </button>
            </div>
        </mat-card-header>
        <mat-card-content>
            <section class="mt-4">
                <div class="mb-2">Links</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <a href="#" class="text-{{ color }}">{{ color }}</a>
                        </div>
                    }
                </div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <span class="text-{{ color }}">{{ color }}</span>
                        </div>
                    }
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Normal</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <button mat-button class="text-nowrap" [color]="color">{{ color }}</button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-button>Basic</button>
                    </div>
                    <div class="m-2">
                        <button mat-button disabled>Disabled</button>
                    </div>
                    <div class="m-2">
                        <a mat-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Stroked</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <button mat-stroked-button class="text-nowrap" [color]="color">{{ color }}</button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-stroked-button>Basic</button>
                    </div>
                    <div class="m-2">
                        <button mat-stroked-button disabled>Disabled</button>
                    </div>
                    <div class="m-2">
                        <a mat-stroked-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Flat</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <button mat-flat-button class="text-nowrap" [color]="color">{{ color }}</button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-flat-button>Basic</button>
                    </div>
                    <div class="m-2">
                        <button mat-flat-button disabled>Disabled</button>
                    </div>
                    <div class="m-2">
                        <a mat-flat-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Raised</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color) {
                        <div class="m-2">
                            <button mat-raised-button class="text-nowrap" [color]="color">{{ color }}</button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-raised-button>Basic</button>
                    </div>
                    <div class="m-2">
                        <button mat-raised-button disabled>Disabled</button>
                    </div>
                    <div class="m-2">
                        <a mat-raised-button href="https://www.google.com/" target="_blank">&lt;a Link</a>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">FAB</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color; let index = $index) {
                        <div class="m-2">
                            <button mat-fab [color]="color" aria-label="Example icon button with an icon">
                                <mat-icon>{{ getIcon(index) }}</mat-icon>
                            </button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-fab color="white" aria-label="Example icon button with a vertical three dot icon">
                            <mat-icon>more_vert</mat-icon>
                        </button>
                    </div>
                    <div class="m-2">
                        <button mat-fab disabled aria-label="Example icon button with a block icon">
                            <mat-icon>block</mat-icon>
                        </button>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">FAB extended</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color; let index = $index) {
                        <div class="m-2">
                            <button mat-fab extended [color]="color" aria-label="Example icon button with an icon">
                                <mat-icon>{{ getIcon(index) }}</mat-icon>
                                {{ color }}
                            </button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-fab extended color="white" aria-label="Example icon button with a vertical three dot icon">
                            <mat-icon>more_vert</mat-icon>
                            white
                        </button>
                    </div>
                    <div class="m-2">
                        <button mat-fab extended disabled aria-label="Example icon button with a block icon">
                            <mat-icon>block</mat-icon>
                            disabled
                        </button>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Mini FAB</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color; let index = $index) {
                        <div class="m-2">
                            <button mat-mini-fab [color]="color" aria-label="Example icon button with an icon">
                                <mat-icon>{{ getIcon(index) }}</mat-icon>
                            </button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-mini-fab color="white" aria-label="Example icon button with a vertical three dot icon">
                            <mat-icon>more_vert</mat-icon>
                        </button>
                    </div>
                    <div class="m-2">
                        <button mat-mini-fab disabled aria-label="Example icon button with a block icon">
                            <mat-icon>block</mat-icon>
                        </button>
                    </div>
                </div>
            </section>
            <mat-divider class="my-4"></mat-divider>
            <section>
                <div class="mb-2">Icon</div>
                <div class="d-flex flex-wrap align-items-start">
                    @for (color of getColors(); track color; let index = $index) {
                        <div class="m-2">
                            <button mat-icon-button [color]="color" aria-label="Example icon button with an icon">
                                <mat-icon>{{ getIcon(index) }}</mat-icon>
                            </button>
                        </div>
                    }
                    <div class="m-2">
                        <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
                            <mat-icon>more_vert</mat-icon>
                        </button>
                    </div>
                    <div class="m-2">
                        <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
                            <mat-icon>open_in_new</mat-icon>
                        </button>
                    </div>
                </div>
            </section>
        </mat-card-content>
    </mat-card>
</div>
<mat-divider class="my-4"></mat-divider>
<div cdkDropList class="row mb-3" (cdkDropListDropped)="drop($event)">
    @for (color of getColors(); track color) {
        <div class="col-xs-12 col-lg-6 col-xxl-4 pb-3" cdkDrag>
            <div class="card-custom-placeholder col-xs-12 col-lg-6 col-xxl-4 pb-3" *cdkDragPlaceholder></div>
            <mat-card>
                <mat-card-header class="d-flex text-bg-{{ color }} rounded-top py-2 px-3">
                    <div class="flex-fill">
                        <mat-card-title>
                            {{ color }}
                        </mat-card-title>
                        <mat-card-subtitle class="fw-normal">
                            Card subtitle
                        </mat-card-subtitle>
                    </div>
                    <span class="flex-spacer"></span>
                    <div class="align-self-center">
                        <button mat-icon-button>
                            <mat-icon>more_vert</mat-icon>
                        </button>
                    </div>
                </mat-card-header>
                <mat-card-content>
                    <section class="mt-4 mb-3">
                        <div class="d-flex flex-wrap align-items-start">
                            <button mat-raised-button [color]="color" class="m-2 align-self-center">Texte Raised</button>
                            <button mat-flat-button [color]="color" class="m-2 align-self-center">Texte Flat</button>
                            <button mat-stroked-button [color]="color" class="m-2 align-self-center">Texte Stroked</button>
                            <button mat-button [color]="color" class="m-2 align-self-center">{{ color }}</button>
                        </div>
                        <div class="d-flex flex-wrap align-items-start mb-3">
                            <button mat-fab extended [color]="color" class="m-2 align-self-center">
                                <mat-icon>check_circle</mat-icon>
                                {{ color }}
                            </button>
                            <button mat-fab [color]="color" class="m-2 align-self-center">
                                <mat-icon>check_circle</mat-icon>
                            </button>
                            <button mat-mini-fab [color]="color" class="m-2 align-self-center">
                                <mat-icon>check_circle</mat-icon>
                            </button>
                            <button mat-icon-button [color]="color" class="m-2 align-self-center">
                                <mat-icon>check_circle</mat-icon>
                            </button>
                        </div>
                        <mat-progress-bar [color]="color" mode="determinate" value="40"></mat-progress-bar>
                        <mat-slider class="w-100" min="0" max="1000">
                            <input value="300" matSliderStartThumb>
                            <input value="600" matSliderEndThumb>
                        </mat-slider>
                    </section>
                </mat-card-content>
            </mat-card>
        </div>
    }
</div>