<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<div id="dialog-box" class="manage-env-dialog">
  <header class="dialog-header">
    <h4 class="modal-title">Manage DataLab quotas</h4>
    <button type="button" class="close" (click)="dialogRef.close()">&times;</button>
  </header>
  <div class="dialog-content">
    <div class="content-box">
      <div *ngIf="data.projectsList?.length">
        <form [formGroup]="manageUsersForm" (submit)="setBudgetLimits(manageUsersForm.value)" novalidate>
          <mat-list>
            <mat-list-item class="list-header">
              <div class="username">Project</div>
              <div class="period">Set per month</div>
              <div class="quotes">Limit</div>
            </mat-list-item>
            <div class="scrolling-content" id="scrolling" formArrayName="projects">
              <mat-list-item *ngFor="let item of usersEnvironments.controls; let i=index" [formGroupName]="i"
                class="list-item">
                <div class="username ellipsis">
                  <span class="ellipsis"
                  matTooltip="{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}"
                  matTooltipPosition="above">{{ manageUsersForm.controls['projects']['controls'][i].value['project'] }}
                    </span>
                </div>
                <div class="period">
                  <mat-slide-toggle formControlName="monthlyBudget">
                  </mat-slide-toggle>
                </div>
                <div class="quotes">
                  <input type="number" (keypress)="CheckUtils.numberOnly($event)" min="0"
                    placeholder="Enter limit, in USD" formControlName="budget">
                  <span class="error"
                    *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('overrun') &&
                     !manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')"
                  >
                    Projects budget cannot be higher than total budget.
                  </span>
                  <span class="error"
                        *ngIf="manageUsersForm?.controls['projects']['controls'][i].controls['budget'].hasError('max')">Project budget cannot be higher than 1000000000.</span>
                </div>
              </mat-list-item>
            </div>
            <div class="control-group total-budget">

              <mat-list-item class="list-item">
                <div class="username ellipsis">
                  <span class="ellipsis">Total budget</span>
                </div>
                <div class="period">
                </div>
                <div class="quotes">
                  <input type="number" (keypress)="CheckUtils.numberOnly($event)" formControlName="total"
                         placeholder="Enter total budget, in USD">
                  <span class="error" *ngIf="manageUsersForm?.controls['total'].hasError('overrun')
                  && !manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be lower than a sum of project quotes.</span>
                  <span class="error"
                        *ngIf="manageUsersForm?.controls['total'].hasError('max')">Total budget cannot be higher than 1000000000.</span>
                </div>
              </mat-list-item>
            </div>
            <div class="text-center m-top-30">
              <button mat-raised-button type="button" (click)="dialogRef.close()" class="butt action">Cancel</button>
              <button mat-raised-button type="submit" [disabled]="!manageUsersForm.valid || isFormChanged" class="butt butt-success"
                [ngClass]="{'not-allowed': !manageUsersForm.valid}">Apply</button>
            </div>
          </mat-list>
        </form>
      </div>
      <div class="info message" *ngIf="!data?.projectsList.length">No active projects</div>
    </div>
  </div>
</div>