<!--
  ~ 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 (click)="getEndpoinConnectionStatus(element.url)" matTooltip="Test" matTooltipPosition="above">
                    <mat-icon>compare_arrows</mat-icon>
                  </span>
                  <span (click)="deleteEndpoint(element)" matTooltip="Disconnect" matTooltipPosition="above">
                    <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>