scrutiny/webapp/frontend/src/app/layout/common/dashboard-settings/dashboard-settings.component.html

<h2 mat-dialog-title>Scrutiny Settings</h2>
<mat-dialog-content class="mat-typography">

    <div class="flex flex-col p-8 pb-0 overflow-hidden">
        <div class="flex flex-col gt-md:flex-row">
            <mat-slide-toggle class="mb-2" [(ngModel)]="darkModeUseSystem">Use system settings for dark mode</mat-slide-toggle>
            <p [class.text-hint]="darkModeUseSystem">
                Theme:
                <mat-button-toggle-group class="ml-2" #group="matButtonToggleGroup" [(ngModel)]="theme" [disabled]="darkModeUseSystem">
                    <mat-button-toggle value="light" aria-label="Light mode">
                      <mat-icon>light_mode</mat-icon>
                    </mat-button-toggle>
                    <mat-button-toggle value="dark" aria-label="Dark mode">
                      <mat-icon>dark_mode</mat-icon>
                    </mat-button-toggle>
                </mat-button-toggle-group>
            </p>
        </div>

        <div class="flex flex-col mt-5 gt-md:flex-row">
            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                <mat-label>Display Title</mat-label>
                <mat-select [(ngModel)]="dashboardDisplay">
                    <mat-option value="name">Name</mat-option>
                    <mat-option value="serial_id">Serial ID</mat-option>
                    <mat-option value="uuid">UUID</mat-option>
                    <mat-option value="label">Label</mat-option>
                </mat-select>
            </mat-form-field>

            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pl-3">
                <mat-label>Sort By</mat-label>
                <mat-select [(ngModel)]="dashboardSort">
                    <mat-option value="status">Status</mat-option>
                    <mat-option value="title">Title</mat-option>
                    <mat-option value="age">Age</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

        <div class="flex flex-col mt-5 gt-md:flex-row">
            <mat-form-field class="flex-auto gt-xs:pr-3 gt-md:pr-3">
                <mat-label>Temperature Display Unit</mat-label>
                <mat-select [(ngModel)]="temperatureUnit">
                    <mat-option value="celsius">Celsius</mat-option>
                    <mat-option value="fahrenheit">Fahrenheit</mat-option>
                </mat-select>
            </mat-form-field>

        </div>

        <div class="flex">
            <mat-tab-group mat-align-tabs="start">
                <mat-tab label="Ata">

                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
                        <mat-form-field class="flex-auto gt-md:pr-3">
                            <mat-label>Critical Error Threshold</mat-label>
                            <input disabled matInput [value]="'10%'">
                        </mat-form-field>
                        <mat-form-field class="flex-auto gt-md:pl-3">
                            <mat-label>Critical Warning Threshold</mat-label>
                            <input disabled matInput>
                        </mat-form-field>
                    </div>

                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col gt-md:flex-row">
                        <mat-form-field class="flex-auto gt-md:pr-3">
                            <mat-label>Error Threshold</mat-label>
                            <input disabled matInput [value]="'20%'">
                        </mat-form-field>
                        <mat-form-field class="flex-auto gt-md:pl-3">
                            <mat-label>Warning Threshold</mat-label>
                            <input disabled matInput [value]="'10%'">
                        </mat-form-field>
                    </div>

                </mat-tab>
                <mat-tab label="NVMe">

                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
                        <mat-form-field class="flex-auto gt-md:pr-3">
                            <mat-label>Critical Error Threshold</mat-label>
                            <input disabled matInput [value]="'enabled'">
                        </mat-form-field>
                        <mat-form-field class="flex-auto gt-md:pl-3">
                            <mat-label>Critical Warning Threshold</mat-label>
                            <input disabled matInput>
                        </mat-form-field>
                    </div>

                </mat-tab>
                <mat-tab label="SCSI">
                    <div matTooltip="not yet implemented" class="gray-200 flex flex-col mt-5 gt-md:flex-row">
                        <mat-form-field class="flex-auto gt-md:pr-3">
                            <mat-label>Critical Error Threshold</mat-label>
                            <input disabled matInput [value]="'enabled'">
                        </mat-form-field>
                        <mat-form-field class="flex-auto gt-md:pl-3">
                            <mat-label>Critical Warning Threshold</mat-label>
                            <input disabled matInput>
                        </mat-form-field>
                    </div>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>

</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button mat-dialog-close (click)="saveSettings()" cdkFocusInitial>Save</button>
</mat-dialog-actions>