<mat-progress-bar mode="indeterminate" *ngIf="loading" color="warn"></mat-progress-bar>

<div class="container-responsive" style="min-height: calc(100vh - 155px);">
    <div class="row" style="min-height: 12vh;">
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2">
            <button mat-raised-button class="addButton" style="width: 78px;" (click)="goToDashboard()"> 
               <mat-icon style="font-size: medium;transform: translateY(3px);" >arrow_back</mat-icon>{{ 'Back' | translate }}
         </button>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4"></div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4" class="heading">Approve User</div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4"></div>
    </div>

    <div class="row">
        <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"></div>
        <div class="col-xl-10 col-lg-10 col-md-10 col-sm-10 col-10" style="overflow-x: scroll;padding: 0;">
            <mat-card style="min-width: 100vh; background: #a6a6a6;color:black">
                <div class="row" style="font-family: nucleo;font-size: medium;font-weight: 700;text-align: center;">
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"   style="padding: 0;">Requested Date</div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"   style="padding: 0;">User</div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"   style="padding: 0;">Mobile No.</div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"   style="padding: 0;">Email</div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"   style="padding: 0;">Max Amount</div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"   style="padding: 0;">company profile</div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"   style="padding: 0;">certificate</div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"   style="padding: 0;">Approve / Reject</div>

                    
                </div>
                </mat-card>
            <mat-card style="border: 1px solid #c8ceed;text-align: center;min-width: 100vh;margin-top: 0;" *ngFor="let element of UserData" >
                <div class="row">
    
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"  style="padding: 0;">
                        <span class="userHeading">{{element?.createdDate  | date:'dd-MM-yyyy'}}</span> 
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2" style="padding: 0;">
                        <span class="userHeading">{{element?.userName}}</span> 
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"  style="padding: 0;">
                        <span class="userHeading">{{element?.mobileNumber}}</span> 
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2" style="padding: 0;">
                        <span class="userHeading">{{element?.email}}</span> 
                    </div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"  style="padding: 0;">
                        <span class="userHeading">{{element?.maxAmount}}</span> 
                    </div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"  style="padding: 0;">
                         <button mat-button (click)="downloadCmpProfile(element?.companyProfile)">
                            <mat-icon style="color: #4a4a4a;">file_download</mat-icon>
                        </button> 
                    </div>
                    <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"  style="padding: 0;">
                         <button mat-button (click)="downloadProjectCert(element?.projectCompletedCert)">
                            <mat-icon style="color: #4a4a4a;">file_download</mat-icon>
                        </button> 
                    </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2" style="display: flex;justify-content: end;align-items:center;padding: 0;">
                        <button class="status-button-accepted" (click)="ApproveUser(element)">Approve</button>
                    <!-- </div>
                    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2"> -->
                        <button class="button-Reject" (click)="RejectUser(element)">Reject</button>
                    </div>
                </div>

            </mat-card>
            <mat-card style="min-width: 100vh;" *ngIf="this.UserData?.length === 0;">
                <br>
                <p class="subHead" style="font-size: larger;">No New Requests available.</p>
            </mat-card>
            
            
        </div>
        <div class="col-xl-1 col-lg-1 col-md-1 col-sm-1 col-1"></div>
    </div>
</div> -->



<div class="footer">
    <footer id="footer"
        style="padding: 70px 0; color: #000000; font-size: 16px; bottom: 0;"
        class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center" style="font-size: smaller;">
                    <p class="mb-0" style="font-family: 'nucleo';">&copy; <span style="font-weight: bolder;">Art . n
                            Architects
                        </span>All Rights Reserved</p>
                    <p class="mb-0" style="font-family: 'nucleo';">Designed by <a href="https://www.simssoftware.in/"
                            target="_blank" style="color: #000000;">SiMS</a></p>
                </div>
            </div>
        </div>
    </footer>
</div>