<div class="modal">
    <div class="modal-dialog" role="dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button (click)="backHarborPage()" class="close">
                    <clr-icon shape="close"></clr-icon>
                </button>
                <h3 class="modal-title oidc-header-text">
                    <span>{{ 'CONFIG.OIDC.OIDC_SETNAME' | translate }}</span
                    >&nbsp;
                </h3>
            </div>
            <div id="error-message">
                <div class="alert alert-danger" role="alert" *ngIf="errorOpen">
                    <div class="alert-items">
                        <div class="alert-item static">
                            <div class="alert-icon-wrapper">
                                <clr-icon
                                    class="alert-icon"
                                    size="24"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                            <span class="alert-text">{{ errorMessage }}</span>
                        </div>
                    </div>
                    <button
                        type="button"
                        class="close"
                        aria-label="Close"
                        (click)="emptyErrorMessage()">
                        <clr-icon
                            aria-hidden="true"
                            size="16"
                            shape="close"></clr-icon>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                <p class="body-message">
                    {{ 'CONFIG.OIDC.OIDC_SETNAMECONTENT' | translate }}
                </p>
            </div>
            <br />
            <form class="clr-form clr-form-horizontal">
                <div class="clr-form-control">
                    <label
                        for="oidcUsername"
                        class="clr-control-label required"
                        >{{ 'CONFIG.OIDC.OIDC_USERNAME' | translate }}</label
                    >
                    <div class="clr-control-container">
                        <div class="clr-input-wrapper">
                            <input
                                class="clr-input"
                                name="oidcUsername"
                                type="text"
                                [formControl]="oidcUsername"
                                pattern='[^,"~#$%]+'
                                required
                                id="oidcUsername"
                                size="40" />
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button
                    class="btn btn-outline"
                    type="button"
                    (click)="backHarborPage()"
                    id="cancelButton">
                    {{ 'BUTTON.CANCEL' | translate }}
                </button>
                <button
                    class="btn btn-primary"
                    id="saveButton"
                    (click)="clickSaveBtn()"
                    [disabled]="oidcUsername.invalid"
                    type="button">
                    {{ 'BUTTON.SAVE' | translate }}
                </button>
            </div>
        </div>
    </div>
</div>
