<clr-modal
    [(clrModalOpen)]="opened"
    [clrModalClosable]="false"
    [clrModalStaticBackdrop]="false">
    <h3 class="modal-title">{{ 'CHANGE_PREF.TITLE' | translate }}</h3>
    <div class="modal-body body-format dialog-body">
        <div class="dropdowns content-container">
            <div class="content-area centered-content-area">
                <div class="clr-control-label">
                    {{ 'CHANGE_PREF.LANGUAGE' | translate }}
                </div>
                <clr-dropdown class="dropdown-lang dropdown bottom-left">
                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
                        <clr-icon shape="world" class="icon-left"></clr-icon>
                        <span class="currentLocale">{{ currentLang }}</span>
                        <clr-icon size="10" shape="caret down"></clr-icon>
                    </button>
                    <clr-dropdown-menu *clrIfOpen>
                        <a
                            *ngFor="let lang of guiLanguages"
                            href="javascript:void(0)"
                            clrDropdownItem
                            (click)="switchLanguage(lang[0])"
                            [class.lang-selected]="matchLang(lang[0])"
                            >{{ lang[1][0] }}</a
                        >
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>

            <div class="content-area centered-content-area">
                <div class="clr-control-label">
                    {{ 'CHANGE_PREF.DATE_TIME_FORMAT' | translate }}
                </div>
                <clr-dropdown class="dropdown bottom-left">
                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
                        <clr-icon shape="date" class="icon-left"></clr-icon>
                        <span class="currentLocale">{{
                            currentDatetimeRendering | translate
                        }}</span>
                        <clr-icon size="10" shape="caret down"></clr-icon>
                    </button>
                    <clr-dropdown-menu *clrIfOpen>
                        <a
                            *ngFor="let rendering of guiDatetimeRenderings"
                            href="javascript:void(0)"
                            clrDropdownItem
                            (click)="switchDatetimeRendering(rendering[0])"
                            [class.locale-selected]="
                                matchDatetimeRendering(rendering[0])
                            "
                            >{{ rendering[1] | translate }}</a
                        >
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>

            <div class="content-area centered-content-area">
                <div class="clr-control-label">
                    {{ 'CHANGE_PREF.PULL_CMD_PREFIX' | translate }}
                </div>
                <clr-dropdown class="dropdown-lang dropdown bottom-left">
                    <button class="nav-icon nav-icon-width" clrDropdownToggle>
                        <clr-icon shape="bundle" class="icon-left"></clr-icon>
                        <span class="currentLocale">{{ currentRuntime }}</span>
                        <clr-icon size="10" shape="caret down"></clr-icon>
                    </button>
                    <clr-dropdown-menu *clrIfOpen>
                        <clr-dropdown>
                            <button clrDropdownTrigger>custom</button>
                            <clr-dropdown-menu *clrIfOpen>
                                <form
                                    #customruntimeForm="ngForm"
                                    class="clr-form">
                                    <div class="clr-form-control">
                                        <label
                                            for="customPrefix"
                                            class="clr-control-label"
                                            >Custom</label
                                        >
                                        <div class="clr-control-container">
                                            <div class="clr-input-wrapper">
                                                <input
                                                    type="text"
                                                    id="customPrefix"
                                                    name="customPrefix"
                                                    placeholder="Enter custom prefix"
                                                    [(ngModel)]="customRuntime"
                                                    #customPrefix="ngModel"
                                                    [ngClass]="{
                                                        'is-invalid':
                                                            customPrefix.invalid &&
                                                            customPrefix.touched
                                                    }"
                                                    pattern="^[a-z]+$"
                                                    minlength="2"
                                                    class="clr-input" />
                                                <cds-icon
                                                    class="clr-validate-icon"
                                                    shape="exclamation-circle"></cds-icon>
                                            </div>
                                            <div
                                                *ngIf="
                                                    customPrefix.invalid &&
                                                    customPrefix.touched
                                                ">
                                                <div
                                                    *ngIf="customPrefix.errors?.['required']">
                                                    Prefix is required
                                                </div>
                                                <div
                                                    *ngIf="customPrefix.errors?.['minlength']">
                                                    Prefix must be at least 2
                                                    characters
                                                </div>
                                                <div
                                                    *ngIf="customPrefix.errors?.['pattern']">
                                                    Prefix must only contain
                                                    lowercase alphabets (a-z)
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button
                                                clrDropdownItem
                                                type="button"
                                                class="btn btn-primary"
                                                id="ok-btn"
                                                [disabled]="!isValid"
                                                (click)="addCustomRuntime()">
                                                {{ 'BUTTON.OK' | translate }}
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </clr-dropdown-menu>
                        </clr-dropdown>
                        <ng-container *ngFor="let runtime of guiRuntimes">
                            <a
                                href="javascript:void(0)"
                                clrDropdownItem
                                (click)="switchRuntime(runtime[0])"
                                [class.lang-selected]="matchRuntime(runtime[0])"
                                >{{ runtime[1] }}</a
                            >
                        </ng-container>
                    </clr-dropdown-menu>
                </clr-dropdown>
            </div>
        </div>
    </div>
    <div class="modal-footer margin-left-override">
        <button type="button" class="btn btn-primary" (click)="close()">
            {{ 'BUTTON.CLOSE' | translate }}
        </button>
    </div>
</clr-modal>
