<div class="main-container" *ngIf="chartMetaForm && chartDataForm">
  <div class="mat-h2 heading">{{ editMode ? 'Upravit graf ' : 'Nový graf' }}</div>
  <mat-card class="chart-edit-card">
    <mat-card-content>
      <mat-vertical-stepper linear="true" #stepper>
        <mat-step [stepControl]="chartMetaForm" errorMessage="Doplňte základní informace">
          <form [formGroup]="chartMetaForm" class="chart-meta-form">
            <ng-template matStepLabel>Základní informace</ng-template>
            <div class="web-view-group">
              <mat-form-field>
                <input matInput placeholder="Titulek" formControlName="title" autocomplete="off">
                <mat-error *ngIf="chartMetaForm.controls['title'].hasError('required')">
                  Titulek je <strong>povinný</strong>
                </mat-error>
                <mat-error *ngIf="chartMetaForm.controls['title'].hasError('maxLength')">
                  Titulek může mít nanejvýš <strong>100 znaků</strong>
                </mat-error>
              </mat-form-field> 
              <mat-form-field class="chart-type">
                <mat-label>Typ grafu</mat-label>
                <mat-select formControlName="type" (selectionChange)="reInitDataForm(true);" [compareWith]="chartTypeMatcher">
                  <mat-option *ngFor="let chartType of formData.chartTypes" [value]="chartType">
                      {{chartType.label}}
                    </mat-option>
                </mat-select>
                <mat-error *ngIf="chartMetaForm.controls['type'].hasError('required')">
                  Typ grafu je <strong>povinný</strong>
                </mat-error>
              </mat-form-field>
            </div>
            <div class="web-view-group">
              <mat-form-field>
                <input matInput [matDatepicker]="fromDatepicker" placeholder="Data od" formControlName="fromDate" autocomplete="off">
                <mat-error *ngIf="chartMetaForm.controls['fromDate'].errors">
                  Datum musí být ve formátu <strong>den.měsíc.rok</strong>
                </mat-error>
                <mat-datepicker-toggle matSuffix [for]="fromDatepicker"></mat-datepicker-toggle>
                <mat-datepicker #fromDatepicker></mat-datepicker>
              </mat-form-field>
              <mat-form-field>
                <input matInput [matDatepicker]="toDatepicker" placeholder="Data do" formControlName="toDate" autocomplete="off">
                <mat-error *ngIf="chartMetaForm.controls['toDate'].errors">
                  Datum musí být ve formátu <strong>den.měsíc.rok</strong>
                </mat-error>
                <mat-datepicker-toggle matSuffix [for]="toDatepicker"></mat-datepicker-toggle>
                <mat-datepicker #toDatepicker></mat-datepicker>
              </mat-form-field>
            </div>
            <mat-slide-toggle *ngIf="roleUtil.hasAnalystRights(user)" formControlName="publicChart">Veřejný</mat-slide-toggle>
            <div class="button-panel">
              <button mat-button mat-stroked-button color="primary" [disabled]="!chartMetaForm.valid" matStepperNext>Další</button>
            </div>
          </form>
        </mat-step>
        <mat-step [stepControl]="chartDataForm" errorMessage="Vyberte datovou sadu">
          <form [formGroup]="chartDataForm">
            <ng-template matStepLabel>Výběr datové sady</ng-template>
            <ng-template [ngIf]="chartMetaForm.controls['type'].value && chartMetaForm.controls['type'].value.name === 'BAR'">
              <!-- X FROM AVG, SUM, COUNT | Y FROM TEXT_VALUES -->
              <mat-form-field>
                <mat-label>Data na ose X</mat-label>
                <mat-select formControlName="x" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['x'].hasError('required')">
                  Data na ose X jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Data na ose Y</mat-label>
                <mat-select formControlName="y" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['TEXT_VALUE']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['y'].hasError('required')">
                  Data na ose Y jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
            </ng-template>
            <ng-template [ngIf]="chartMetaForm.controls['type'].value && chartMetaForm.controls['type'].value.name === 'COLUMN'">
              <!--X from TEXT_VALUES | Y from AVG, SUM, COUNT -->
              <mat-form-field>
                <mat-label>Data na ose X</mat-label>
                <mat-select formControlName="x" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['TEXT_VALUE']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['x'].hasError('required')">
                  Data na ose X jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Data na ose Y</mat-label>
                <mat-select formControlName="y" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['y'].hasError('required')">
                  Data na ose Y jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
            </ng-template>
            <!--ng-template [ngIf]="chartMetaForm.controls['type'].value === 'STACKED_COLUMN'">Skladany sloupcovy</ng-template-->
            <ng-template [ngIf]="chartMetaForm.controls['type'].value && chartMetaForm.controls['type'].value.name === 'LINE'">
              <!--X FROM NUMERIC_VALUE + interval | Y FROM AVG, SUM, COUNT-->
              <div class="web-view-group">
                <mat-form-field>
                  <mat-label>Data na ose X</mat-label>
                  <mat-select formControlName="x" (selectionChange)="reInitDataForm();" [compareWith]="chartAxisMatcher">
                    <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['NUMERIC_VALUE']" [value]="type">
                      {{type.label}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="chartDataForm.controls['x'].hasError('required')">
                    Data na ose X jsou <strong>povinné</strong>
                  </mat-error>
                </mat-form-field>
                <!--mat-form-field class="interval-field">
                  <input matInput type="number" class="interval-input" step="1" placeholder="Interval" formControlName="xInterval" autocomplete="off">
                  <mat-icon class="warn-icon" matTooltip="Interval určuje rozsah po jakém budou shlukovány data pro osu X." matSuffix>error_outline</mat-icon>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('required')">
                    Interval je <strong>povinný</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('pattern')">
                    Interval musí být <strong>celé číslo</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('min')">
                    Interval musí být <strong>větší než 1</strong>
                  </mat-error>
                </mat-form-field-->
              </div>
              <mat-form-field>
                <mat-label>Data na ose Y</mat-label>
                <mat-select formControlName="y" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['y'].hasError('required')">
                  Data na ose Y jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
            </ng-template>
            <ng-template [ngIf]="chartMetaForm.controls['type'].value && chartMetaForm.controls['type'].value.name === 'PIE'">
              <!--X FROM TEXT_VALUE OR NUMERIC_VALUE + interval-->
              <div class="web-view-group">
                <mat-form-field>
                  <mat-label>Data na ose X (koláč dělený dle)</mat-label>
                  <mat-select formControlName="x" (selectionChange)="reInitDataForm();" [compareWith]="chartAxisMatcher">
                    <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['TEXT_VALUE', 'NUMERIC_VALUE']" [value]="type">
                      {{type.label}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="chartDataForm.controls['x'].hasError('required')">
                    Data na ose X <strong>povinné</strong>
                  </mat-error>
                </mat-form-field>
                <mat-form-field class="interval-field" *ngIf="chartDataForm.controls['x'].value && chartDataForm.controls['x'].value.type === 'NUMERIC_VALUE'">
                  <input matInput type="number" class="interval-input" step="1" placeholder="Interval" formControlName="xInterval" autocomplete="off">
                  <mat-icon class="warn-icon" matTooltip="Interval určuje rozsah po jakém budou shlukovány data pro osu X." matSuffix>error_outline</mat-icon>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('required')">
                    Interval je <strong>povinný</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('pattern')">
                    Interval musí být <strong>celé číslo</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('min')">
                    Interval musí být <strong>větší než 1</strong>
                  </mat-error>
                </mat-form-field>
              </div>
              <mat-form-field>
                <mat-label>Data na ose Y (velikost dílů koláče)</mat-label>
                <mat-select formControlName="y" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['y'].hasError('required')">
                  Data na ose Y jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
            </ng-template>
            <ng-template [ngIf]="chartMetaForm.controls['type'].value && chartMetaForm.controls['type'].value.name === 'BUBBLE'">
              <!-- X FROM NUMERIC_VALUE + interval | Y FROM AVG, SUM, COUNT | Z FROM AVG, SUM, COUNT -->
              <div class="web-view-group">
                <mat-form-field>
                  <mat-label>Data na ose X</mat-label>
                  <mat-select formControlName="x" (selectionChange)="reInitDataForm();" [compareWith]="chartAxisMatcher">
                    <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['NUMERIC_VALUE']" [value]="type">
                      {{type.label}}
                    </mat-option>
                  </mat-select>
                  <mat-error *ngIf="chartDataForm.controls['x'].hasError('required')">
                    Data na ose X jsou <strong>povinné</strong>
                  </mat-error>
                </mat-form-field>
                <!--<mat-form-field class="interval-field">
                  <input matInput type="number" class="interval-input" step="1" placeholder="Interval" formControlName="xInterval" autocomplete="off">
                  <mat-icon class="warn-icon" matTooltip="Interval určuje rozsah po jakém budou shlukovány data pro osu X." matSuffix>error_outline</mat-icon>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('required')">
                    Interval je <strong>povinný</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('pattern')">
                    Interval musí být <strong>celé číslo</strong>
                  </mat-error>
                  <mat-error *ngIf="chartDataForm.controls['xInterval'].hasError('min')">
                    Interval musí být <strong>větší než 1</strong>
                  </mat-error>
                </mat-form-field>-->
              </div>
              <mat-form-field>
                <mat-label>Data na ose Y</mat-label>
                <mat-select formControlName="y" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['y'].hasError('required')">
                  Data na ose Y jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
              <mat-form-field>
                <mat-label>Data na ose Z</mat-label>
                <mat-select formControlName="z" [compareWith]="chartAxisMatcher">
                  <mat-option *ngFor="let type of formData.chartAxes | filterTypes: ['AVG', 'SUM', 'COUNT']" [value]="type">
                    {{type.label}}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="chartDataForm.controls['z'].hasError('required')">
                  Data na ose Z jsou <strong>povinné</strong>
                </mat-error>
              </mat-form-field>
            </ng-template>
            <div class="button-panel">
              <button mat-button mat-stroked-button color="primary" matStepperPrevious class="back-button">Zpět</button>
              <button mat-button mat-stroked-button color="primary" matStepperNext [disabled]="!chartDataForm.valid">Další</button>
            </div>
          </form>
        </mat-step>
        <mat-step>
          <ng-template matStepLabel>Souhrn</ng-template>
            <div class="web-view-group" *ngIf="chartMetaForm.valid">
              <div>
                <h5 class="summary-title">Titulek</h5>
                {{ chartMetaForm.controls['title'].value }}
              </div>
              <div class="summary-chart-type">
                <h5>Typ grafu</h5>
                {{ chartMetaForm.controls['type'].value.label }}
              </div>
              <div class="summary-dates">
                <h5>Data od - do</h5>
                {{ chartMetaForm.controls['fromDate'].value | amLocale:'cs' | amDateFormat:'l' }} - {{ chartMetaForm.controls['toDate'].value | amLocale:'cs' | amDateFormat:'l' }}
              </div>
            </div>
            <div class="web-view-group" *ngIf="chartDataForm.controls['x'].value">
              <div>
                <h5>Data na ose X</h5>
                {{ chartDataForm.controls['x'].value.label }}
              </div>
              <div class="summary-interval" *ngIf="chartDataForm.controls['xInterval'].value">
                  <h5>Interval dat osy X</h5>
                  {{ chartDataForm.controls['xInterval'].value }}
                </div>
            </div>
            <div class="web-view-group" *ngIf="chartDataForm.controls['y'].value || chartDataForm.controls['z'].value">
              <div *ngIf="chartDataForm.controls['y'].value">
                <h5>Data na ose Y</h5>
                {{ chartDataForm.controls['y'].value.label }}
              </div>
              <div *ngIf="chartDataForm.controls['z'].value">
                <h5>Data na ose Z</h5>
                {{ chartDataForm.controls['z'].value.label }}
              </div>
            </div>
          <div class="button-panel">
              <button mat-button mat-stroked-button color="primary" matStepperPrevious class="back-button">Zpět</button>
              <button mat-button mat-flat-button color="accent" matStepperNext (click)="onSaveClick();">{{ editMode ? 'Uložit' : 'Vytvořit' }}</button>
          </div>
        </mat-step>
      </mat-vertical-stepper>
    </mat-card-content>
  </mat-card>
</div>