<p-dialog header="Rename App" [(visible)]="visible" [style]="{ 'max-width': '100rem' }" (onHide)="handleOnHide()">
    <p style="padding-bottom: 1em">
        Assign a friendly name to the app. The name may include whitespace and does not have to use the default
        [app-type]&#64;[machine-address] notation. However, when using this notation, the [machine-address] must be an
        address or FQDN of a machine monitored in Stork. Otherwise, an error will be returned. To suppress the error,
        use a special notation with double &#64; character, e.g., dhcp&#64;&#64;machineX. In that case, the machineX
        does not have to exist in the system.
    </p>
    <div class="p-field">
        <label for="app-name-input">App Name</label>
        <input
            id="app-name-input"
            type="text"
            aria-describedby="app-name-input-error"
            class="{{ invalid ? 'ng-invalid' : 'ng-valid' }}"
            style="width: 100%"
            pInputText
            [(ngModel)]="appName"
            (keyup)="handleKeyUp($event)"
        />
        <p id="app-name-input-error" class="text-red-700" *ngIf="invalid">{{ errorText }}</p>
    </div>
    <p-footer>
        <button type="button" pButton icon="pi pi-times" label="Cancel" (click)="cancel()"></button>
        <button
            id="rename-button"
            type="button"
            pButton
            icon="pi pi-check"
            label="Rename"
            class="p-button-warning"
            [disabled]="invalid"
            (click)="save()"
        ></button>
    </p-footer>
</p-dialog>
