<form (ngSubmit)="saveData()" #editThemeForm="ngForm">

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Název:</mat-label>
            <input matInput maxUtf8Length="60" [(ngModel)]="model.name" name="class" #name="ngModel" placeholder="">
        </mat-form-field> 
    </div>


    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
            <mat-label>Popis:</mat-label>
            <textarea matInput maxUtf8Length="1000" [(ngModel)]="model.description" name="information" #description="ngModel" placeholder=""></textarea>
        </mat-form-field> 
        <span *ngIf="description.invalid" class="form-error">
            <span *ngIf="description.errors != null">
                <span *ngIf="description.errors.utfLength" class="form-error" matTooltip="{{description.errors.actualLength | utfLengthError: description.errors.maxAllowed}}"> 
                    <mat-icon aria-hidden="false" aria-label="Example home icon">error_outline</mat-icon>
                </span>
            </span>
        </span>
    </div>

    <div class="form-item">
        <mat-form-field appearance="outline" class="solo-mid">
          <mat-label>Stav:</mat-label>
          <mat-select [(ngModel)]="model.state" name="state" #theme="ngModel">
              <mat-option *ngFor="let stateKey of states; let i = index" [value]="stateKey">
                {{statesPretty[i]}}
              </mat-option>
          </mat-select>
        </mat-form-field>
    </div>

    <div class="form-buttons-row">
        <a mat-raised-button color="accent" class="button-large" routerLink="/{{targetAfterSubmit}}" matTooltip="Odejít z formuláře bez uložení">
            Zrušit změny
        </a>
        <button mat-raised-button type="submit" color="primary" class="button-large" [disabled]="editThemeForm.invalid"
                matTooltip="Formulář není správně vyplněn" [matTooltipDisabled]="editThemeForm.valid">
            {{model.ID == null ? 'Vytvořit téma' : 'Uložit změny'}}
        </button>
        <app-saving-status [actualStatus]="themeSavingStatus"></app-saving-status>
    </div>
</form>
