<!--
 *******************************************************************************
 * Copyright (c) 2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *******************************************************************************
-->

<form #parentForm="ngForm" *ngIf="gridMeasureDetailReceived">

  <div class="row">
    <app-buttons-container #buttonscontainer [isValidForm]="areAllTabsValid()" [isValidForSave]="validForSave"
      [isReadOnlyForm]="readOnlyForm" [gridMeasureStatusId]="gridMeasureDetail?.statusId" [gridMeasureId]="gridMeasureDetail?.id"
      (clickQuitButton)="goToOverview()" (clickCancelButton)="goToCancelPage()" (clickRejectButton)="updateGridMeasureStatus(Globals.STATUS.REJECTED)"
      (clickSaveButton)="createGridMeasure(gridMeasureDetail)" (clickApplyButton)="updateGridMeasureStatus(Globals.STATUS.APPLIED)"
      (clickForApprovalButton)="updateGridMeasureStatus(Globals.STATUS.FORAPPROVAL)" (clickApprovedButton)="updateGridMeasureStatus(Globals.STATUS.APPROVED)"
      (clickRequestButton)="updateGridMeasureStatus(Globals.STATUS.REQUESTED)" (clickReleaseButton)="updateGridMeasureStatus(Globals.STATUS.RELEASED)"
      (clickActivateButton)="updateGridMeasureStatus(Globals.STATUS.ACTIVE)" (clickInWorkButton)="updateGridMeasureStatus(Globals.STATUS.IN_WORK)"
      (clickWorkFinishButton)="updateGridMeasureStatus(Globals.STATUS.WORK_FINISHED)" (clickFinishButton)="updateGridMeasureStatus(Globals.STATUS.FINISHED)"
      (clickCloseButton)="updateGridMeasureStatus(Globals.STATUS.CLOSED)" (clickDuplicateButton)="duplicateGM()"></app-buttons-container>

  </div>

  <div class="panel panel-default" id="gridMeasureHeaderPanel">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a [ngClass]="(!isExpanded)?'glyphicon glyphicon-chevron-down':'glyphicon glyphicon-chevron-up'" data-toggle="collapse"
          href="#collapse1" (click)="isExpanded = !isExpanded"></a>
        <a data-toggle="collapse" href="#collapse1" (click)="isExpanded = !isExpanded">Netzmaßnahme</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">
        <app-grid-measure-detail-header (titleChange)="setSingleGridMeasureTitle()" (isValidForSave)="this.validForSave = $event;"
          [isReadOnlyForm]="readOnlyForm" [id]="id" [showSpinnerGrid]="showSpinner" [gridMeasureDetail]="gridMeasureDetail">
        </app-grid-measure-detail-header>
      </div>
    </div>
  </div>

  <div class="grid-measure-body ">
    <div class="maincontent">

      <div class="panel panel-default" [ngClass]="isExpanded ? '':'mainPanelCollapsed'" id="gridMeasureMainPanel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a [ngClass]="(!isExpandedDetail)?'glyphicon glyphicon-chevron-down':'glyphicon glyphicon-chevron-up'"
              data-toggle="collapse" href="#collapse4" (click)="isExpandedDetail = !isExpandedDetail"></a>
            <a data-toggle="collapse" href="#collapse4" (click)="isExpandedDetail = !isExpandedDetail">Details der
              Netzmaßnahme</a>
          </h4>
        </div>

        <div id="collapse4" class="panel-collapse collapse in">
          <div class="grid-measure-tabs">
            <ul *ngIf="showTabs" class="nav nav-tabs">
              <li class="active">
                <a href="#gridmeasurepanel" (click)="onSelectGridMeasureTab()" data-toggle="tab" [ngClass]="isGridMeasureDetailValid() ? 'valid-tab' : 'invalid-tab'">Maßnahme</a>
              </li>
              <li *ngFor="let singleGridmeasure of gridMeasureDetail?.listSingleGridmeasures; let idx = index;">
                <a *ngIf="!singleGridmeasure.delete" [id]="singleGridmeasure.sortorder" href="#singlegridmeasure"
                  (click)="onSelectSingleGridMeasureTab(singleGridmeasure)" data-toggle="tab" [ngClass]="isSingleGridmeasureValid(singleGridmeasure) ? 'valid-tab' : 'invalid-tab'">Einzelmaßnahme
                  {{idx + 1}} </a>
              </li>
              <li>
                <!-- more singleGridMeasures -->
                <button [disabled]="disableNewTabBtn || isSingleGridmeasureLimitReached()" class="glyphicon glyphicon-plus"
                  id="newSingleGridMeasureBtn" (click)="createNewSingleGridMeasureTab()" [title]="isSingleGridmeasureLimitReached() ? 'Es können maximal ' + Globals.MAX_NUMBER_OF_TABS + ' Einzelmaßnahmen angelegt werden.' : ''"></button>
              </li>
            </ul>
          </div>
          <div class="tab-content clearfix">

            <div class="tab-pane active" id="gridmeasurepanel">
              <div class="panel-body">
                <app-grid-measure-detail-tab (isValidForSave)=" this.validForSave = $event;" [readOnlyForm]="readOnlyForm"
                  [id]="id" [showSpinnerGrid]="showSpinner" [gridMeasureDetail]="gridMeasureDetail">
                </app-grid-measure-detail-tab>
              </div>
            </div>

            <div class="tab-pane" id="singlegridmeasure">
              <div class="panel-body">
                <app-single-grid-measure-detail-tab (singleGridMeasureChanged)="onSingleGridMeasureChanged($event)"
                  [singleGridMeasure]="currentSingleGridMeasure" [isReadOnlyForm]="readOnlyForm" [gridMeasureDetail]="gridMeasureDetail"
                  [dateTimePattern]="dateTimePattern" [dateFormatLocale]="dateFormatLocale">
                </app-single-grid-measure-detail-tab>
              </div>
            </div>

          </div>
        </div>
      </div>


      <div class="panel panel-default" id="gridMeasureEmailPanel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a [ngClass]="(!isExpandedEmail)?'glyphicon glyphicon-chevron-down':'glyphicon glyphicon-chevron-up'"
              data-toggle="collapse" href="#collapse9" (click)="isExpandedEmail = !isExpandedEmail"></a>
            <a *ngIf="isEmailDistributionStatusCollapsed" data-toggle="collapse" href="#collapse9" (click)="isExpandedEmail = !isExpandedEmail">E-Mail
              Verteiler für
              Status Genehmigt, Storniert und Zurückgewiesen</a>
            <div *ngIf="!isEmailDistributionStatusCollapsed">E-Mail-Verteiler</div>
          </h4>
        </div>
        <div id="collapse9" class="panel-collapse panel-body collapse in" [ngClass]="{'in': !isEmailDistributionStatusCollapsed }">
          <app-email-distribution-entry [isReadOnlyForm]="emailAddFormNotAllowed" [(gridMeasureDetail)]="gridMeasureDetail">
            loading ...
          </app-email-distribution-entry>
          <app-email-distribution-list [gridId]="'email-distribution-list'" [withEditButtons]="true"
            [gridMeasureDetail]="gridMeasureDetail" (gridMeasureChanged)="onGridMeasureChanged($event)">
            loading ...
          </app-email-distribution-list>
        </div>
      </div>


      <div id="gridMeasureStatusChangePanel">
        <app-status-changes [gridId]="gridMeasureDetail.id">
          loading ...
        </app-status-changes>
      </div>


    </div>
  </div>
</form>