<clr-modal
    [(clrModalOpen)]="tokenModalOpened"
    class="copy-token"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="true">
    <div class="modal-title">
        <span>{{ 'SYSTEM_ROBOT.REFRESH_SECRET' | translate }}</span>
        <div class="nav-divider"></div>
        <span class="name">{{ robot?.name }}</span>
    </div>
    <div class="modal-body">
        <inline-alert class="modal-title"></inline-alert>
        <p class="mt-0 mb-1">
            {{ 'SYSTEM_ROBOT.REFRESH_SECRET_SUMMARY' | translate }}
        </p>
        <section class="form-block show-info">
            <form #secretForm="ngForm" class="clr-form clr-form-horizontal">
                <clr-toggle-wrapper class="mt-02">
                    <input
                        (change)="changeEnableNewSecret()"
                        type="checkbox"
                        clrToggle
                        name="enableNewSecret"
                        id="enable-new-secret"
                        [(ngModel)]="enableNewSecret" />
                    <label for="enable-new-secret">{{
                        'SYSTEM_ROBOT.ENABLE_NEW_SECRET' | translate
                    }}</label>
                </clr-toggle-wrapper>
                <div
                    class="clr-form-control"
                    [style.visibility]="enableNewSecret ? 'visible' : 'hidden'">
                    <label for="new-token" class="clr-control-label">{{
                        'SYSTEM_ROBOT.NEW_TOKEN' | translate
                    }}</label>
                    <div
                        class="clr-control-container"
                        [class.clr-error]="
                            (newToken.dirty || newToken.touched) &&
                            newToken.invalid
                        ">
                        <div class="clr-input-wrapper">
                            <input
                                class="clr-input pwd-input"
                                [type]="showNewPwd ? 'text' : 'password'"
                                id="new-token"
                                name="newToken"
                                autocomplete="off"
                                #newToken="ngModel"
                                [(ngModel)]="newSecret"
                                pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                                placeholder="{{
                                    'SYSTEM_ROBOT.PLACEHOLDER' | translate
                                }}" />
                            <clr-icon
                                *ngIf="!showNewPwd"
                                shape="eye"
                                class="pw-eye"
                                (click)="showNewPwd = !showNewPwd"></clr-icon>
                            <clr-icon
                                *ngIf="showNewPwd"
                                shape="eye-hide"
                                class="pw-eye"
                                (click)="showNewPwd = !showNewPwd"></clr-icon>
                            <clr-icon
                                class="clr-validate-icon"
                                shape="exclamation-circle"></clr-icon>
                        </div>
                        <clr-control-error
                            *ngIf="
                                (newToken.dirty || newToken.touched) &&
                                newToken.invalid
                            ">
                            {{ 'SYSTEM_ROBOT.SECRET' | translate }}
                        </clr-control-error>
                    </div>
                </div>
                <div
                    class="clr-form-control"
                    [style.visibility]="enableNewSecret ? 'visible' : 'hidden'">
                    <label for="confirm-token" class="clr-control-label">{{
                        'SYSTEM_ROBOT.CONFIRM_SECRET' | translate
                    }}</label>
                    <div
                        class="clr-control-container"
                        [class.clr-error]="
                            notSame() ||
                            ((confirmToken.dirty || confirmToken.touched) &&
                                confirmToken.invalid)
                        ">
                        <div class="clr-input-wrapper">
                            <input
                                class="clr-input pwd-input"
                                [type]="showConfirmPwd ? 'text' : 'password'"
                                id="confirm-token"
                                name="confirmToken"
                                autocomplete="off"
                                #confirmToken="ngModel"
                                [(ngModel)]="confirmSecret"
                                pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{8,128}$"
                                placeholder="{{
                                    'SYSTEM_ROBOT.SECRET_AGAIN' | translate
                                }}" />
                            <clr-icon
                                *ngIf="!showConfirmPwd"
                                shape="eye"
                                class="pw-eye"
                                (click)="
                                    showConfirmPwd = !showConfirmPwd
                                "></clr-icon>
                            <clr-icon
                                *ngIf="showConfirmPwd"
                                shape="eye-hide"
                                class="pw-eye"
                                (click)="
                                    showConfirmPwd = !showConfirmPwd
                                "></clr-icon>
                            <clr-icon
                                class="clr-validate-icon"
                                shape="exclamation-circle"></clr-icon>
                        </div>
                        <clr-control-error
                            *ngIf="
                                notSame() ||
                                ((confirmToken.dirty || confirmToken.touched) &&
                                    confirmToken.invalid)
                            ">
                            <span *ngIf="!notSame()">{{
                                'SYSTEM_ROBOT.SECRET' | translate
                            }}</span>
                            <span *ngIf="notSame()">{{
                                'SYSTEM_ROBOT.INCONSISTENT' | translate
                            }}</span>
                        </clr-control-error>
                    </div>
                </div>
            </form>
        </section>
    </div>
    <div class="modal-footer">
        <button
            (click)="cancel()"
            id="refresh-token-cancel"
            type="button"
            class="btn btn-outline">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            [disabled]="!canRefresh()"
            (click)="refreshToken()"
            [clrLoading]="btnState"
            id="refresh-token-refresh"
            type="button"
            class="btn btn-primary">
            {{ 'SYSTEM_ROBOT.REFRESH' | translate }}
        </button>
    </div>
</clr-modal>
<clr-modal
    clrModalSize="lg"
    [(clrModalOpen)]="copyToken"
    class="copy-token"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="false">
    <div class="modal-title">
        <h3 class="modal-title">
            <clr-icon
                class="alert-icon success-icon"
                shape="check-circle"
                size="50"></clr-icon>
            {{ createSuccess | translate }}
        </h3>
    </div>
    <div class="modal-body">
        <div class="alert alert-info" role="alert">
            <div class="alert-items">
                <div class="alert-item static">
                    <div class="alert-icon-wrapper">
                        <clr-icon
                            class="alert-icon"
                            shape="info-circle"></clr-icon>
                    </div>
                    <span class="alert-text">{{
                        'ROBOT_ACCOUNT.ALERT_TEXT' | translate
                    }}</span>
                </div>
            </div>
        </div>
        <section class="form-block show-info">
            <div class="form-group robot-name">
                <label class="form-group-label-override">{{
                    'ROBOT_ACCOUNT.NAME' | translate
                }}</label>
                <span>{{ robot?.name }}</span>
            </div>
            <div class="form-group robot-token">
                <label class="form-group-label-override">{{
                    'ROBOT_ACCOUNT.TOKEN' | translate
                }}</label>
                <hbr-copy-input
                    #copyInputComponent
                    (onCopySuccess)="onCpSuccess($event)"
                    inputSize="50"
                    headerTitle=""
                    defaultValue="{{ robot?.secret }}"
                    class="copy-input"></hbr-copy-input>
            </div>
            <a [href]="downLoadHref" [download]="downLoadFileName"
                ><button class="btn mr-0" (click)="closeModal()">
                    {{ 'ROBOT_ACCOUNT.EXPORT_TO_FILE' | translate }}
                </button></a
            >
        </section>
    </div>
</clr-modal>
