

<app-all-menus></app-all-menus>
<div style="padding-top: 6%;">
        <p style="text-align: center;font-size: 22px;font-weight: 500;color:#797676;margin-bottom:4px">{{'Groups' | translate}}</p>
        <div class="addStyle">
            <md-icon style="margin-left:15px; cursor: pointer;" (click)="addGroupComponent()">add</md-icon>
        </div>
    
    
        <div style="width:100%; text-align: center;" class="row">
            <div class="cardStyle col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" style="width:100%;" *ngFor="let group of groups" (mouseenter)="showGroupOptions(group)"
                (mouseleave)="hideGroupOptions(group)">
                <!-- <div class="row"> -->
                <!-- <div > -->
                <md-card>
                    <md-card-content>
    
    
                        <!-- Version 3 -->
                        <span *ngIf="group.isShowGroupOptions">
                            <md-icon (click)="editGroupById(group._id)" style="position: absolute;
     top: 10px;
     right: 40px;
     cursor: pointer;">edit</md-icon>
                            <md-icon style="margin-left:15px; cursor: pointer" (click)="deletegroup(group._id)" style="position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;">delete</md-icon>
                        </span>
                        <div *ngIf="group.t">
    
    
                            <canvas baseChart width="200" height="200" [data]="group.statusCount" [chartType]="doughnutChartType" [labels]="group.statusList"
                                [options]="options">
                                <!-- (chartHover)="chartHovered($event)"
     (chartClick)="chartClicked($event)" -->
                            </canvas>
                            <div style="position: sticky;
     margin-top: -60%;
     cursor: pointer;
     margin-bottom: 35%;
     margin-left: 25%;
     margin-right: 25%;" (click)="showVehiclesByGroup(group)">
                                <p style=" text-align: center;
     font-weight: 500;
     margin-bottom: 0px;
     color: #6191d7;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 5px 0px -5px 0px;" md-tooltip="{{group.name}}"> {{group.name}}
                                </p>
                                <p style="text-align:center;font-size:15px;" md-tooltip="{{group.totalCount}}">{{group.totalCount}}</p>
                            </div>
                        </div>
    
                        <div *ngIf="!group.t" style="width: 200px;
     height: 200px;
     border: 25px solid #e5e5e5;
     border-radius: 50%;
     text-align: center;
     display: inline-block;">
                            <div style="position: sticky;
     cursor: pointer;
     margin-top:35%;
     margin-bottom: 35%;
     margin-left: 25%;
     margin-right: 25%;" (click)="showVehiclesByGroup(group)">
                                <p style=" text-align: center;
     font-weight: 500;
     margin-bottom: 0px;
     color: #6191d7;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin: 5px 0px -5px 0px;" md-tooltip="{{group.name}}"> {{group.name}}
                                </p>
                                <p style="text-align:center;font-size:15px;" md-tooltip="{{group.totalCount}}">{{group.totalCount}}</p>
                            </div>
                        </div>
                    </md-card-content>
                </md-card>
                <!-- </div> -->
                <!-- </div> -->
            </div>
        </div>
    
    
</div>
  