<!--
/********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * 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
 ********************************************************************************/
-->
<div class="container-fluid">
    <form class="mt-3" [formGroup]="form" novalidate>
        <ngb-accordion #acc="ngbAccordion" activeIds="functionData,dataData">
            <!-- DATEN -->
            <ngb-panel title="Kopfdaten" id="functionData">
                <ng-template ngbPanelContent>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="title" class="col-sm-3 col-form-label">Ebene</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="statusName" placeholder="Ebene"
                                        formControlName="statusName">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="title" class="col-sm-3 col-form-label">Titel</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="title" placeholder="Titel"
                                        formControlName="title">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="comment" class="col-sm-3 col-form-label">Kommentar</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="comment" placeholder="Kommentar"
                                        formControlName="comment">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <label class="form-check-label col-form-label col-md-3">
                                    Zeitraum
                                </label>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="von" name="dp" ngbDatepicker
                                                #validFrom="ngbDatepicker" formControlName="validFrom" required id="dateFromInput">
                                        </div>
                                        <ok-error [control]="form.controls['validFrom']"></ok-error>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="bis" name="dp" ngbDatepicker
                                                #validFrom="ngbDatepicker" formControlName="validTo" required id="dateFromInput">
                                        </div>
                                        <ok-error [control]="form.controls['validTo']"></ok-error>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="modifiedBy" class="col-sm-3 col-form-label">Bearbeiter</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modifiedBy" formControlName="modifiedBy">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group row">
                                <label for="modifiedCause" class="col-sm-3 col-form-label">Bearbeitungsgrund</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="modifiedCause" formControlName="modifiedCause">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <label class="form-check-label col-form-label col-md-3">
                                    Gültigkeit
                                </label>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <input class="form-control" placeholder="von" name="dp" ngbDatepicker
                                                #validFrom="ngbDatepicker" formControlName="modificationDate" required
                                                id="dateFromInput">
                                        </div>
                                        <ok-error [control]="form.controls['modificationDate']"></ok-error>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ngb-panel>
            <ngb-panel title="Daten" id="dataData">
                <ng-template ngbPanelContent>
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <button class="btn btn-primary" (click)="importIntoPlanning()" id="importIntoPlanning">
                                in Planebene ausrollen
                            </button>
                        </div>
                    </div>
                    <div class="row" *ngIf="plan">
                        <div class="col-md-12">
                            <table class="table stick-table-top" id="table">
                                <thead>
                                    <tr>
                                        <th scope="col">{{plan?.planHeader?.label}}</th>
                                        <th *ngFor="let group of plan?.planHeader?.listGroups">
                                            {{group.title}}
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of plan?.listPlanRows" [ngClass]="row.style">
                                        <th scope="row">{{row.label}}</th>
                                        <td *ngFor="let listGroupBody of row?.listGroupBodies">
                                            <div *ngFor="let standby of listGroupBody" class="table-cell">
                                                <span class="text-nowrap">
                                                    {{(standby.validFrom | date:'HH:mm') +' Uhr - '+ (standby.validTo |
                                                    date:'HH:mm')+'
                                                    Uhr'}} {{standby.user.firstname}} {{standby.user.lastname}}
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </ng-template>
            </ngb-panel>
        </ngb-accordion>
    </form>
</div>