<!--
/********************************************************************************
 * 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>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom stick-headlines">
      <h1 class="h2">Kalenderdaten verwalten</h1>
      <div class="btn-toolbar mb-2 mb-md-0">
        <button *ngIf="authService.userHasRoles(['BP_Sachbearbeiter','BP_Admin'])" class="btn btn-success mr-1" (click)="saveDate()"
          id="dateSafe">Speichern</button>
        <button *ngIf="this.instanceId !== 'new' && authService.userHasRoles(['BP_Sachbearbeiter','BP_Admin'])" class="btn btn-danger mr-1"
          (click)="deleteDate()" id="dateDelete">Löschen</button>
        <button class="btn btn-danger float-right" routerLink="/stammdatenverwaltung/kalender" id="dateCancel">Abbrechen</button>
      </div>
    </div>
    <ngb-accordion #acc="ngbAccordion" activeIds="calendarData">
      <!-- DATEN -->
      <ngb-panel title="Kalendereintrag" id="calendarData">
        <ng-template ngbPanelContent>
          <div class="row">
            <div class="col-md-4">
              <div class="form-group row">
                <label for="name" class="col-sm-3 col-form-label">Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="name" placeholder="Name" formControlName="name" required>
                  <ok-error [control]="form.controls['name']"></ok-error>
                </div>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <div class="input-group">
                  <input class="form-control" placeholder="Datum" name="dp" ngbDatepicker #date="ngbDatepicker"
                    formControlName="date" id="dateInput" required>
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" (click)="date.toggle()" type="button" id="datePicker">
                      <i class="fa fa-calendar" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" (click)="setDefaultDate('date')" type="button" id="dateDefault"
                      data-toggle="tooltip" data-placement="bottom" title="Auf Standardwert setzen">
                      <i class="fa fa-clock-o" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <ok-error [control]="form.controls['date']"></ok-error>
              </div>
            </div>
          </div>
        </ng-template>
      </ngb-panel>
    </ngb-accordion>
  </form>
</div>