<div class="admin-container" [class.admin-is-mobile]="appService.getViewMode()" style="margin-top: -63px;">
    <mat-toolbar color="primary" class="admin-toolbar">
        <button mat-button>
            <mat-icon class="maarchLogoWhiteFull" [svgIcon]="appService.getViewMode() ? 'maarchLogoOnly' : 'maarchLogo'"></mat-icon>
        </button>
        <h1 class="admin-toolbar-title text-center" >{{lang.missingAdvertTitle}}</h1>
        <span style="flex: 1 1 auto;"></span>
    </mat-toolbar>

    <mat-sidenav-container autosize class="admin-sidenav-container">
        <mat-sidenav-content>
            <div *ngIf="loading" style="display:flex;height:100%;">
                <mat-spinner style="margin:auto;"></mat-spinner>
            </div>
            <div *ngIf="!loading" class="card-app-content">         
                <div class="text-center" style="margin-top: 50px;">
                    {{lang.missingAdvert}}<br>
                    {{lang.missingAdvert2}}<br>
                    <ng-container *ngIf="user.redirectedBaskets.length > 0">
                        <br>
                        {{lang.missingBasket}}<br>
                    </ng-container>
                </div>
                <div class="col-sm-4" style="overflow:hidden;"></div>
                <div class="col-sm-4" style="overflow:hidden;">
                    <mat-list *ngIf="user.redirectedBaskets.length > 0">
                        <mat-list-item>
                            <mat-icon mat-list-icon color="primary">
                                <mat-checkbox color="primary" (change)="$event ? masterToggleBaskets($event) : null" [checked]="selectionBaskets.hasValue()"
                                    matTooltip="{{lang.selectAll}}"></mat-checkbox>
                            </mat-icon>
                            <p mat-line>
                                <span *ngIf="!selectionBaskets.hasValue()" style="opacity: 0.5;font-style: italic;font-size: 80%;">
                                    {{lang.selectAll}}
                                </span>
                                <span *ngIf="selectionBaskets.hasValue()" style="opacity: 1;font-style: normal;font-size: 100%;">
                                    {{lang.selectAll}}
                                </span>
                            </p>
                        </mat-list-item>
                        <mat-divider></mat-divider>
                        <ng-container *ngFor="let basket of user.redirectedBaskets;let i = index">
                            <mat-list-item *ngIf="basket.userToDisplay != null" (mouseover)="showActions(basket)" (mouseout)="hideActions(basket)"
                                style="cursor: pointer;">
                                <mat-icon mat-list-icon color="primary">
                                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionBaskets.toggle(basket) : null" [checked]="selectionBaskets.isSelected(basket)"
                                        color="primary"></mat-checkbox>
                                </mat-icon>
                                <h4 mat-line color="primary" style="display: flex;align-items: center;">
                                    <span (click)="selectionBaskets.toggle(basket);" matTooltip="{{basket.basket_name}} [{{basket.group_desc}}] {{lang.redirectedTo}} {{basket.userToDisplay}}" style="flex: 2;overflow: hidden;text-overflow: ellipsis;">
                                        {{basket.basket_name}}
                                        <span class="label label-primary" style="font-weight:normal">{{basket.group_desc}}</span>
                                        <span style="opacity: 0.5;font-style: italic;font-size: 80%;"> {{lang.redirectedTo}} {{basket.userToDisplay}}</span>
                                    </span>
                                </h4>
                            </mat-list-item>
                        </ng-container>
                    </mat-list>
                </div>
                <div class="col-sm-4" style="overflow:hidden;"></div>
                
                <div style="clear:both;"></div>
                
                <div *ngIf="!loading" class="text-center" style="position:relative; top:50px;">
                    {{lang.missingChoose}}<br>
                    <br>
                    <button mat-raised-button color="primary" type="button" (click)="activateUser()">{{lang.validate}}</button>
                    <button mat-raised-button color="primary" type="button" (click)="logout()">{{lang.cancel}}</button>
                </div>

            </div>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>