<!--
  ~ 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.
  -->

<form [formGroup]="projectForm" novalidate>
  <mat-horizontal-stepper #stepper class="stepper ani">
    <mat-step [completed]='false'>
      <ng-template matStepLabel >Key upload</ng-template>
      <section class="inner-step mat-reset upload-key">
        <div class="form-block split">
          <div class="row-wrap">
            <div class="col label">
              <label class="control-label">
                <span>Upload public key to start project creation</span>
              </label>
              <div>
                <a href="#/help/publickeyguide" target="_blank">
                  <small class="helper_instruction">
                    <i class="material-icons">help_outline</i>Where can I get public key?
                  </small>
                </a>
              </div>
            </div>
            <div class="col txt-r action">
              <span mat-raised-button class="butt butt-file" [ngClass]="{ 'not-allowed' : item }">
                <span class="upload-icon"></span> Upload
                <input (change)="onFileChange($event)" type="file" name="file" accept=".pub" />
              </span>
              <button 
                mat-raised-button 
                type="button" 
                class="butt butt-generate" 
                [ngClass]="{ 'not-allowed' : item }"
                (click)="generateUserAccessKey()"
              >
                <i class="material-icons">move_to_inbox</i> Generate
              </button>

              <div *ngIf="keyLabel" class="m-bott-10 m-top-10 ellipsis" [class.danger_color]="!accessKeyValid">
                {{ keyLabel }}
              </div>
            </div>
          </div>
          <div class="text-center m-bott-10">
            <button 
              mat-raised-button 
              type="button" 
              class="butt" 
              [disabled]="item" 
              (click)="reset()"
            >
              Clear
            </button>
            <button 
              mat-raised-button 
              type="button" 
              class="butt next" 
              matStepperNext
            >
              Next
              <i class="material-icons arrow-icon">keyboard_arrow_right</i>
            </button>
          </div>
        </div>
      </section>
    </mat-step>

    <mat-step [completed]='false'>
      <ng-template matStepLabel>Project</ng-template>
      <section class="inner-step mat-reset">
        <div class="form-block">
          <div>
            <div class="control-group m-bott-10">
              <label class="label">Project name</label>
              <div class="control">
                <input 
                  type="text" 
                  formControlName="name" 
                  placeholder="Enter project name"
                  (blur)="generateProjectTag($event)" 
                  [ngClass]="{ 'not-allowed' : item }"
                />
                <span class="error" *ngIf="projectForm?.controls.name.hasError('duplication')">
                  This project name already exists.
                </span>
                <span 
                  class="error" 
                  *ngIf="!projectForm?.controls.name.valid
                      && !projectForm?.controls.name.hasError('duplication')
                      && !projectForm?.controls.name.hasError('limit')
                      && projectForm?.controls.name.dirty">
                  Project name can only contain letters and numbers.
                </span>
                <span class="error" *ngIf="projectForm?.controls.name.hasError('limit')">
                  Project name cannot be longer than {{ maxProjectNameLength }} characters.
                </span>
              </div>
            </div>
            <div class="control-group m-bott-10">
              <label class="label">Project tag</label>
              <div class="control">
                <input 
                  readonly 
                  type="text" 
                  formControlName="tag" 
                  placeholder="< equal to project name >"
                  class="not-allowed"
                />
              </div>
            </div>
            <div class="control-group m-bott-10">
              <label class="label">Endpoints</label>
              <div class="control selector-wrapper">
                <mat-form-field>
                  <mat-select 
                    multiple
                    disableOptionCentering 
                    formControlName="endpoints" 
                    placeholder="Select endpoints"
                    panelClass="crete-project-dialog scrolling"
                  >
                    <mat-option class="multiple-select" disabled>
                      <a class="select ani" (click)="selectOptions(endpointsList, 'endpoints', 'all')">
                        <i class="material-icons">playlist_add_check</i>&nbsp;All
                      </a>
                      <a class="deselect ani" (click)="!item && selectOptions(endpointsList, 'endpoints')"
                        [ngClass]="{ 'not-active' : item }">
                        <i class="material-icons">clear</i>&nbsp;None
                      </a>
                    </mat-option>
                    <mat-option 
                      *ngFor="let endpoint of endpointsList" 
                      [value]="endpoint.name"
                      [disabled]="isDisabled(endpoint.name) || endpoint.status !== 'ACTIVE'"
                    >
                      {{ endpoint.name === 'local' ? endpoint.name : endpoint.name + (endpoint.status !== 'ACTIVE' ? ' (inactive)' : '')}}
                    </mat-option>
                    <mat-option 
                      *ngIf="!endpointsList.length" 
                      class="multiple-select empty ml-10" 
                      disabled
                    >
                      Endpoints list is empty
                    </mat-option>
                  </mat-select>
                  <button class="caret">
                    <i class="material-icons">keyboard_arrow_down</i>
                  </button>
                </mat-form-field>
              </div>
            </div>
          </div>

          <div class="text-center m-bott-10">
            <button 
              mat-raised-button 
              type="button" 
              class="butt" 
              [disabled]="item" 
              (click)="reset()"
            >
              Clear
            </button>
            <button 
              mat-raised-button 
              matStepperPrevious 
              class="butt"
            >
              <i class="material-icons arrow-icon">keyboard_arrow_left</i>Back
            </button>
            <button 
              mat-raised-button 
              type="button" 
              class="butt next" 
              matStepperNext
            >
              Next<i class="material-icons arrow-icon">keyboard_arrow_right</i>
            </button>
          </div>
        </div>
      </section>
    </mat-step>

    <mat-step [completed]='false'>
      <ng-template matStepLabel>Groups</ng-template>
      <div class="inner-step mat-reset">
        <div class="form-block split">
          <div class="control-group">
            <label class="label">Groups</label>
            <div class="control selector-wrapper">
              <mat-form-field>
                <mat-select 
                  multiple
                  disableOptionCentering 
                  formControlName="groups" 
                  placeholder="Select user groups"
                  panelClass="crete-project-dialog scrolling"
                >
                  <mat-option class="multiple-select" disabled>
                    <a class="select ani" (click)="selectOptions(groupsList, 'groups', 'all')">
                      <i class="material-icons">playlist_add_check</i>&nbsp;All
                    </a>
                    <a class="deselect ani" (click)="selectOptions(groupsList, 'groups')">
                      <i class="material-icons">clear</i>&nbsp;None
                    </a>
                  </mat-option>
                  <mat-option *ngFor="let group of groupsList" [value]="group">
                    {{ group }}
                  </mat-option>
                  <mat-option *ngIf="!groupsList.length" class="multiple-select ml-10" disabled>
                    Groups list is empty
                  </mat-option>
                </mat-select>
                <button class="caret">
                  <i class="material-icons">keyboard_arrow_down</i>
                </button>
              </mat-form-field>
            </div>
          </div>
          <div class="text-center m-bott-10">
<!--            <div class="control-group">-->
<!--              <mat-slide-toggle formControlName="shared_image_enabled" labelPosition="after">-->
<!--                <span class="hold-label">Use shared image</span>-->
<!--              </mat-slide-toggle>-->
<!--            </div>-->
            <button 
              mat-raised-button 
              type="button" 
              class="butt" 
              [disabled]="item" 
              (click)="reset()"
            >
              Clear
            </button>
            <button 
              mat-raised-button 
              matStepperPrevious 
              class="butt"
            >
              <i class="material-icons arrow-icon">keyboard_arrow_left</i>Back
            </button>
            <button 
              mat-raised-button 
              type="button" 
              class="butt butt-success" 
              [disabled]="!projectForm.valid"
              (click)="confirm(projectForm.value)"
            >
              <span *ngIf="item; else update">Update</span>
              <ng-template #update>Create</ng-template>
            </button>
          </div>
        </div>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>