<!--
  ~ 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 class="endpoints-dialog" id="dialog-box">
  <header class="dialog-header">
    <h4 class="modal-title">Connect endpoint</h4>
    <button 
      type="button" 
      class="close" 
      (click)="dialogRef.close()"
    >&times;</button>
  </header>
  <div class="dialog-content tabs">
    <div class="content-box">
      <mat-tab-group #tabGroup>
        <mat-tab label="CONNECT ENDPOINT">
          <div class="split">
            <form [formGroup]="createEndpointForm" novalidate>
              <div class="control-group">
                <label class="label">Name</label>
                <div class="control">
                  <input 
                    type="text" 
                    formControlName="name" 
                    placeholder="Enter endpoint name"
                    (blur)="generateEndpointTag($event)"
                  />
                  <span 
                    class="error"
                    *ngIf="!createEndpointForm?.controls.name.valid
                        && createEndpointForm?.controls.name.touched
                        && !createEndpointForm?.controls['name'].hasError('isDuplicate')
                        && !createEndpointForm?.controls['name'].hasError('limit')"
                  >
                    Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters.
                  </span>
                  <span 
                    class="error"
                    *ngIf="createEndpointForm?.controls['name'].hasError('isDuplicate')"
                  >
                    This endpoint name already exists.
                  </span>
                  <span 
                    class="error"
                    *ngIf="createEndpointForm?.controls['name'].hasError('limit')"
                  >
                    Endpoint name cannot be longer than {{ maxEndpointNameLength }} characters.
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Endpoint url</label>
                <div class="control">
                  <input type="text" formControlName="url" placeholder="Enter endpoint url">
                  <span class="error" *ngIf="createEndpointForm?.controls['url'].hasError('isDuplicate')">This endpoint url already exists.</span>
                  <span 
                    class="error"
                    *ngIf="!createEndpointForm?.controls.url.valid 
                        && createEndpointForm.controls.url.touched 
                        && !createEndpointForm?.controls['url'].hasError('isDuplicate')"
                  >
                    Please provide a valid endpoint url with slash in the end.
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Account</label>
                <div class="control">
                  <input type="text" formControlName="account" placeholder="Enter account">
                  <span 
                    class="error"
                    *ngIf="!createEndpointForm?.controls.account.valid && createEndpointForm.controls.account.touched"
                  >
                    Endpoint account can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters.
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="label">Endpoint tag</label>
                <div class="control">
                  <input 
                    readonly 
                    type="text" 
                    formControlName="endpoint_tag" 
                    placeholder="< equal to endpoint name >"
                    class="not-allowed"
                  />
                  <span 
                    class="error"
                    *ngIf="!createEndpointForm?.controls.endpoint_tag.valid 
                        && createEndpointForm.controls.endpoint_tag.touched"
                  >
                    Endpoint tag can only contain letters, numbers, hyphens and '_' but can not end with special
                    characters.
                  </span>
                </div>
              </div>
            </form>
            <div class="action-group m-bott-10">
              <button 
                mat-raised-button
                type="button"
                [disabled]="!this.createEndpointForm.value.url || !createEndpointForm.valid"
                class="butt action"
                (click)="getEndpoinConnectionStatus(createEndpointForm.value.url)"
              >
                Test
              </button>
              <div class="action-butt">
                <button 
                  mat-raised-button 
                  type="button" 
                  class="butt action" 
                  (click)="dialogRef.close()"
                >
                  Cancel
                </button>
                <button 
                  mat-raised-button 
                  type="button" 
                  [disabled]="!createEndpointForm.valid"
                  (click)="assignChanges(createEndpointForm.value)" 
                  class="butt butt-success action"
                >
                  Connect
                </button>
              </div>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="ENDPOINTS LIST">
          <div class="endpoints scrolling">
            <table 
              mat-table 
              [dataSource]="endpoints" 
              class="endpoints-table" 
              *ngIf="endpoints?.length; else empty"
            >
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef class="name"> Endpoint name </th>
                <td mat-cell *matCellDef="let element"> {{element.name}} </td>
              </ng-container>

              <ng-container matColumnDef="url">
                <th mat-header-cell *matHeaderCellDef class="url"> Url </th>
                <td mat-cell *matCellDef="let element">
                  <span matTooltip="{{element.url}}" matTooltipPosition="above">{{element.url}}</span>
                </td>
              </ng-container>

              <ng-container matColumnDef="account">
                <th mat-header-cell *matHeaderCellDef class="account"> Account </th>
                <td mat-cell *matCellDef="let element"> {{element.account}} </td>
              </ng-container>

              <ng-container matColumnDef="endpoint_tag">
                <th mat-header-cell *matHeaderCellDef class="account"> Endpoint tag </th>
                <td mat-cell *matCellDef="let element"> {{element.endpoint_tag}} </td>
              </ng-container>

              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef class="actions"></th>
                <td mat-cell *matCellDef="let element" class="actions">
                  <span 
                    matTooltip="Test" 
                    matTooltipPosition="above"
                    (click)="getEndpoinConnectionStatus(element.url)" 
                  >
                    <mat-icon>compare_arrows</mat-icon>
                  </span>
                  <span 
                    matTooltip="Disconnect" 
                    matTooltipPosition="above"
                    (click)="deleteEndpoint(element)" 
                  >
                    <mat-icon>delete_forever</mat-icon>
                  </span>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

            <ng-template #empty>
              <div class="info empty-box">
                <div class="content">
                  <p>Looks like you don't have any endpoints</p>
                  <button mat-raised-button class="butt" (click)="tabGroup.selectedIndex = 0">
                    <i class="material-icons">settings_system_daydream</i>New endpoint
                  </button>
                </div>
              </div>
            </ng-template>
          </div>
        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>