<os-head-bar
    [hasMainButton]="canManage()"
    [editMode]="isEditing"
    [mainButtonIcon]="'edit'"
    [isSaveButtonEnabled]="startForm.valid"
    (mainEvent)="editStartPage()"
    (saveEvent)="saveChanges()"
    (cancelEditEvent)="isEditing = !isEditing"
>
    <div class="title-slot">
        <h2 translate>Home</h2>
    </div>
</os-head-bar>

<mat-card [ngClass]="isEditing ? 'os-form-card' : 'os-card'">
    <ng-container *ngIf="!isEditing">
        <div class="app-content">
            <h1>{{ startContent.general_event_welcome_title | translate }}</h1>

            <div [innerHTML]="startContent.general_event_welcome_text | trust: 'html'"></div>
        </div>
    </ng-container>

    <ng-container *ngIf="isEditing">
        <form [formGroup]="startForm">
            <mat-form-field>
                <input
                    matInput
                    formControlName="general_event_welcome_title"
                    required
                    placeholder="{{ 'Front page title' | translate }}"
                />
                <mat-error translate>The title is required</mat-error>
            </mat-form-field>
            <editor formControlName="general_event_welcome_text" [init]="tinyMceSettings"></editor>
        </form>
    </ng-container>
</mat-card>
