<clr-wizard
    #wizard
    [(clrWizardOpen)]="addRobotOpened"
    [clrWizardSize]="'lg'"
    (clrWizardOnCancel)="cancel()">
    <clr-wizard-title
        ><h3 *ngIf="!isEditMode" class="modal-title">
            {{ 'SYSTEM_ROBOT.CREATE_PROJECT_ROBOT' | translate }}
        </h3>
        <h3 *ngIf="isEditMode" class="modal-title">
            {{ 'SYSTEM_ROBOT.EDIT_PROJECT_ROBOT' | translate }}
        </h3>
        <p *ngIf="!isEditMode" class="mt-0">
            {{ 'SYSTEM_ROBOT.CREATE_PROJECT_ROBOT_SUMMARY' | translate }}
        </p>
        <p *ngIf="isEditMode" class="mt-0">
            {{ 'SYSTEM_ROBOT.EDIT_PROJECT_ROBOT_SUMMARY' | translate }}
        </p></clr-wizard-title
    >
    <clr-wizard-button [type]="'cancel'">{{
        'BUTTON.CANCEL' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">{{
        'ROBOT_ACCOUNT.BACK' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [type]="'next'">{{
        'ROBOT_ACCOUNT.NEXT' | translate
    }}</clr-wizard-button>
    <clr-wizard-button [clrLoading]="saveBtnState" [type]="'finish'">{{
        'ROBOT_ACCOUNT.FINISH' | translate
    }}</clr-wizard-button>
    <clr-wizard-page
        [clrWizardPageNextDisabled]="
            !robotBasicForm.valid || checkNameOnGoing || isNameExisting
        ">
        <ng-template clrPageTitle>{{
            'ROBOT_ACCOUNT.BASIC_INFO' | translate
        }}</ng-template>
        <form
            #robotBasicForm="ngForm"
            class="clr-form clr-form-horizontal mt-1">
            <section class="form-block">
                <div class="clr-form-control">
                    <label for="name" class="clr-control-label required"
                        >{{ 'P2P_PROVIDER.NAME' | translate }}
                        <clr-tooltip *ngIf="!isEditMode">
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *clrIfOpen>
                                <span>{{
                                    'SYSTEM_ROBOT.FINAL_PROJECT_NAME_TIP'
                                        | translate
                                }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                    <div
                        class="clr-control-container"
                        [class.clr-error]="
                            ((name.dirty || name.touched) && name.invalid) ||
                            isNameExisting
                        ">
                        <div class="clr-input-wrapper">
                            <input
                                class="clr-input input-width"
                                [disabled]="loading || isEditMode"
                                type="text"
                                id="name"
                                [(ngModel)]="robot.name"
                                required
                                pattern="^[a-z0-9]+(?:[._\-][a-z0-9]+)*$"
                                maxLengthExt="255"
                                autocomplete="off"
                                size="30"
                                name="name"
                                #name="ngModel"
                                (keyup)="inputName()" />
                            <clr-icon
                                class="clr-validate-icon"
                                shape="exclamation-circle"></clr-icon>
                            <span
                                class="spinner spinner-inline"
                                [hidden]="!checkNameOnGoing"></span>
                        </div>
                        <clr-control-error
                            *ngIf="
                                ((name.dirty || name.touched) &&
                                    name.invalid) ||
                                isNameExisting
                            ">
                            <span
                                *ngIf="
                                    !(
                                        (name.dirty || name.touched) &&
                                        name.invalid
                                    ) && isNameExisting
                                "
                                >{{
                                    'ROBOT_ACCOUNT.ACCOUNT_EXISTING' | translate
                                }}</span
                            >
                            <span
                                *ngIf="
                                    (name.dirty || name.touched) && name.invalid
                                "
                                >{{
                                    'SYSTEM_ROBOT.NAME_TOOLTIP' | translate
                                }}</span
                            >
                        </clr-control-error>
                    </div>
                </div>
                <clr-textarea-container class="mt-2">
                    <label>{{ 'DISTRIBUTION.DESCRIPTION' | translate }}</label>
                    <textarea
                        class="input-width"
                        clrTextarea
                        type="text"
                        id="description"
                        name="description"
                        [(ngModel)]="robot.description"></textarea>
                </clr-textarea-container>
                <div class="clr-form-control mt-2">
                    <label class="clr-control-label required"
                        >{{ 'SYSTEM_ROBOT.EXPIRATION_TIME' | translate }}
                        <clr-tooltip>
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *clrIfOpen>
                                <span>{{
                                    'SYSTEM_ROBOT.EXPIRATION_TIME_EXPLAIN'
                                        | translate
                                }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                    <div
                        class="clr-control-container"
                        [class.clr-error]="
                            ((expiration.dirty || expiration.touched) &&
                                expiration.invalid) ||
                            isExpirationInvalid()
                        ">
                        <div class="input-width flex">
                            <div class="clr-select-wrapper">
                                <select
                                    [ngModelOptions]="{ standalone: true }"
                                    (change)="changeExpirationType()"
                                    [(ngModel)]="expirationType"
                                    id="expiration-type"
                                    class="clr-select">
                                    <option value="days">
                                        {{
                                            'SYSTEM_ROBOT.EXPIRATION_DAYS'
                                                | translate
                                        }}
                                    </option>
                                    <option value="never">
                                        {{
                                            'SYSTEM_ROBOT.EXPIRATION_NEVER'
                                                | translate
                                        }}
                                    </option>
                                </select>
                            </div>
                            <div class="clr-input-wrapper expiration">
                                <input
                                    (input)="inputExpiration()"
                                    class="clr-input"
                                    name="expiration"
                                    type="text"
                                    #expiration="ngModel"
                                    autocomplete="off"
                                    [(ngModel)]="robot.duration"
                                    required
                                    pattern="^[\-1-9]{1}[0-9]*$"
                                    id="robotTokenExpiration"
                                    size="20" />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                        </div>
                        <clr-control-helper
                            *ngIf="
                                (isEditMode &&
                                    robot?.duration > 0 &&
                                    !(
                                        (expiration.dirty ||
                                            expiration.touched) &&
                                        expiration.invalid
                                    )) ||
                                isExpirationInvalid()
                            ">
                            <span
                                [ngClass]="{
                                    showWarning: shouldShowWarning()
                                }">
                                <clr-icon
                                    *ngIf="shouldShowWarning()"
                                    class="alert-icon"
                                    shape="exclamation-triangle"></clr-icon
                                ><span>{{
                                    'SYSTEM_ROBOT.EXPIRES_AT' | translate
                                }}</span
                                >:
                                <span>{{
                                    calculateExpiresAt()
                                        | harborDatetime : 'short'
                                }}</span>
                            </span>
                        </clr-control-helper>
                        <clr-control-error
                            *ngIf="
                                ((expiration.dirty || expiration.touched) &&
                                    expiration.invalid) ||
                                isExpirationInvalid()
                            ">
                            {{ 'SYSTEM_ROBOT.EXPIRATION_REQUIRED' | translate }}
                        </clr-control-error>
                    </div>
                </div>
            </section>
        </form>
    </clr-wizard-page>

    <clr-wizard-page
        (clrWizardPageOnLoad)="clrWizardPageOnLoad()"
        (clrWizardPageOnCommit)="save()"
        [clrWizardPagePreventDefaultNext]="true"
        [clrWizardPageNextDisabled]="disabled()">
        <ng-template clrPageTitle>{{
            'ROBOT_ACCOUNT.SELECT_PERMISSIONS' | translate
        }}</ng-template>
        <inline-alert></inline-alert>
        <form class="clr-form clr-form-horizontal mt-1">
            <section class="form-block">
                <robot-permissions-panel
                    [mode]="PermissionSelectPanelModes.NORMAL"
                    [(permissionsModel)]="robot.permissions[0].access"
                    [candidatePermissions]="robotMetadata?.project">
                </robot-permissions-panel>
            </section>
        </form>
    </clr-wizard-page>
</clr-wizard>
