AlexAegis/loreplotter

<h1 mat-dialog-title>{{ originalData.id ? 'Edit' : 'Create' }}</h1>
<mat-dialog-content>
    <form [formGroup]="loreForm">
        <mat-label class="nameLabel">Name:</mat-label>
        <mat-form-field class="name" floatLabel="never">
            <mat-label>{{ originalData?.name }}</mat-label>
            <input formControlName="name" matInput/>
            <mat-error *ngIf="loreForm.hasError('duplicate', 'name')">Duplicate found</mat-error>
            <mat-error *ngIf="loreForm.hasError('required', 'name')">Required</mat-error>
        </mat-form-field>

        <hr class="divider"/>
        <div formGroupName="planet">
            <mat-label class="planetNameLabel">Planet Name:</mat-label>
            <mat-form-field class="speed" floatLabel="never">
                <mat-label>{{ originalData?.planet?.name }}</mat-label>
                <input formControlName="name" matInput/>
                <mat-error *ngIf="loreForm.hasError('required', 'planet.name')">Required</mat-error>
            </mat-form-field>

            <mat-label class="planetRadius">Planet Radius:</mat-label>
            <mat-form-field class="radius" floatLabel="never">
                <mat-label>{{ originalData?.planet?.radius }}</mat-label>
                <input formControlName="radius" mask="9*" matInput/>
                <mat-error *ngIf="loreForm.hasError('large', 'planet.radius')">Too large for current paths!</mat-error>
                <mat-error *ngIf="loreForm.hasError('small', 'planet.radius')"
                >Too small, must be larger than 500!
                </mat-error>
                <mat-error *ngIf="loreForm.hasError('required', 'planet.radius')">Required</mat-error>
            </mat-form-field>
            <ng-container *ngIf="originalData.id">
                Max radius: {{ maxPossiblePlanetRadius$ | async | mathRound }}
            </ng-container>
        </div>
    </form>
</mat-dialog-content>
<mat-label>Landscape texture {{ originalData.id ? 'change' : '' }}:</mat-label>
<mat-dialog-actions>
    <input (change)="handleFileInput($event)" type="file"/>

    <button
        *ngIf="originalData.id"
        aria-label="Load Default Earth"
        mat-flat-button
        color="accent"
        (click)="loadDefaultEarth()"
    >
        Load Earth
    </button>
    <button
        aria-label="Save Form"
        mat-flat-button
        color="accent"
        class="save"
        [mat-dialog-close]="loreForm.value"
        [disabled]="!loreForm.valid"
    >
        {{ originalData.id ? 'Save' : 'Create' }}
    </button>
</mat-dialog-actions>