<div class="header">
    <div class="title" trans>General</div>
    <div class="subtitle" trans>Configure general site settings.</div>
</div>

<form class="body many-inputs" (ngSubmit)="saveSettings()" ngNativeValidate>
    <div class="input-container">
        <label for="app_url" trans>Site Url</label>
        <input type="text" id="app_url" name="app_url" [(ngModel)]="state.server['app_url']" readonly="readonly" required>
    </div>

    <div class="error-group many-inputs">
        <div class="input-container">
            <label for="homepage.type" trans>Homepage Type</label>
            <select name="homepage.type" id="homepage.type" [(ngModel)]="state.client['homepage.type']">
                <option value="default">Default</option>
                <option value="component">Application Page</option>
                <option [value]="category.name" *ngFor="let category of menuItemCategories$ | async">{{category.name}}</option>
            </select>
            <p trans>Type of the homepage.</p>
        </div>

        <ng-container *ngFor="let category of menuItemCategories$ | async">
            <div class="input-container" *ngIf="state.client['homepage.type'] === category.name">
                <label [for]="category.name">{{category.name}}</label>
                <select [id]="category.name" [name]="category.name" [(ngModel)]="state.client['homepage.value']">
                    <option *ngFor="let item of category.items" [value]="item.model_id">{{item.label}}</option>
                </select>
            </div>
        </ng-container>

        <div class="input-container" *ngIf="state.client['homepage.type'] === 'component'">
            <label for="homepage.value" trans>Application Page</label>
            <select name="homepage.value" id="homepage.value" [(ngModel)]="state.client['homepage.value']">
                <option [ngValue]="page.name" *ngFor="let page of getHomepageComponents()" trans>{{getDisplayName(page)}}</option>
            </select>
            <p trans>Select application page that should be used for homepage.</p>
        </div>
    </div>

    <div class="input-container">
        <label for="themes.default_mode" trans>Default Site Theme</label>
        <select id="themes.default_mode" name="themes.default_mode" [(ngModel)]="state.client['themes.default_mode']">
            <option value="light" trans>Light</option>
            <option value="dark" trans>Dark</option>
        </select>
    </div>

    <div class="setting-toggle-container">
        <mat-slide-toggle name="themes.user_change" id="themes.user_change" [(ngModel)]="state.client['themes.user_change']" trans>Allow Theme Change</mat-slide-toggle>
        <p trans>Allow user to switch from dark to light mode and vice versa.</p>
    </div>

    <div class="setting-toggle-container">
        <mat-slide-toggle name="site.force_https" id="site.force_https" [(ngModel)]="state.client['site.force_https']" trans>
            Redirect to HTTPS
        </mat-slide-toggle>
        <p trans>You must have SSL set up on the server for this to work.</p>
    </div>

    <button mat-raised-button color="accent" class="button primary update-button" type="submit" [disabled]="loading$ | async" trans>Update</button>
    <mat-progress-bar mode="indeterminate" color="accent" *ngIf="loading$ | async"></mat-progress-bar>
</form>