@if (!isInlineModel) { @if (!isEditMode) {
<div class="normal-wrapper-box">
    <span class="font-style" [style.width]="labelWidth">{{
        labelCurrent | translate
    }}</span>
    <span>{{
        (originScheduleType
            ? 'SCHEDULE.' + originScheduleType.toUpperCase()
            : ''
        ) | translate
    }}</span>
    <a
        [hidden]="originScheduleType !== SCHEDULE_TYPE.HOURLY"
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.HOURLY_CRON' | translate
        }}</span>
    </a>
    <a
        [hidden]="originScheduleType !== SCHEDULE_TYPE.WEEKLY"
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.WEEKLY_CRON' | translate
        }}</span>
    </a>
    <a
        [hidden]="originScheduleType !== SCHEDULE_TYPE.DAILY"
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.DAILY_CRON' | translate
        }}</span>
    </a>
    <span [hidden]="originScheduleType !== SCHEDULE_TYPE.CUSTOM"
        >&nbsp;{{ 'SCHEDULE.CRON' | translate }} :</span
    >
    <span [hidden]="originScheduleType !== SCHEDULE_TYPE.CUSTOM">{{
        oriCron
    }}</span>
    <button
        [disabled]="disabled"
        class="btn btn-link"
        (click)="editSchedule()"
        id="editSchedule">
        {{ 'BUTTON.EDIT' | translate }}
    </button>
</div>
} @if (isEditMode) {
<div class="normal-wrapper-box" [ngClass]="{ 'mb-05': dateInvalid }">
    <span class="font-style" [style.width]="labelWidth">{{
        labelEdit | translate
    }}</span>
    <div class="select select-schedule clr-select-wrapper">
        <select
            name="selectPolicy"
            id="selectPolicy"
            [(ngModel)]="scheduleType">
            <option [value]="SCHEDULE_TYPE.NONE">
                {{ 'SCHEDULE.NONE' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.HOURLY">
                {{ 'SCHEDULE.HOURLY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.DAILY">
                {{ 'SCHEDULE.DAILY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.WEEKLY">
                {{ 'SCHEDULE.WEEKLY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.CUSTOM">
                {{ 'SCHEDULE.CUSTOM' | translate }}
            </option>
        </select>
    </div>
    <span class="required" [hidden]="scheduleType !== SCHEDULE_TYPE.CUSTOM"
        >&nbsp;{{ 'SCHEDULE.CRON' | translate }}</span
    >
    <div [hidden]="scheduleType !== SCHEDULE_TYPE.CUSTOM" class="cron-input">
        <div class="height-1rem clr-input-wrapper">
            <label
                for="targetCron"
                aria-haspopup="true"
                role="tooltip"
                [class.clr-error]="dateInvalid"
                class="tooltip tooltip-validation tooltip-md tooltip-top-left cron-label">
                <input
                    autocomplete="off"
                    type="text"
                    (blur)="blurInvalid()"
                    (input)="inputInvalid($event)"
                    name="targetCron"
                    id="targetCron"
                    #cronStringInput="ngModel"
                    required
                    class="clr-input form-control ml-1"
                    [(ngModel)]="cronString" />
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="bottom-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <cron-tooltip></cron-tooltip>
                    </clr-tooltip-content>
                </clr-tooltip>
                @if (dateInvalid) {
                <clr-control-error class="ml-1">{{
                    'TOOLTIP.CRON_REQUIRED' | translate
                }}</clr-control-error>
                }
            </label>
        </div>
    </div>
    <button
        class="btn btn-link"
        [disabled]="!externalValidation"
        (click)="save()"
        id="config-save">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button class="btn btn-link" (click)="isEditMode = false">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
</div>
} @if (paused && oriCron) {
<div class="clr-row mb-1">
    <span class="font-style" [style.width]="labelWidth"></span>
    <div class="alert alert-warning" role="alert">
        <div class="alert-items p-0">
            <div class="alert-item static">
                <div class="alert-icon-wrapper">
                    <cds-icon
                        class="alert-icon"
                        shape="exclamation-triangle"></cds-icon>
                </div>
                <span class="alert-text">{{
                    'JOB_SERVICE_DASHBOARD.SCHEDULE_BEEN_PAUSED'
                        | translate
                            : {
                                  param: labelCurrent
                              }
                }}</span>
            </div>
        </div>
    </div>
</div>
} } @if (isInlineModel) { @if (!isEditMode) {
<div class="normal-wrapper-box height-1rem">
    <span>{{
        (originScheduleType
            ? 'SCHEDULE.' + originScheduleType.toUpperCase()
            : ''
        ) | translate
    }}</span>
    @if (originScheduleType === SCHEDULE_TYPE.HOURLY) {
    <a
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.HOURLY_CRON' | translate
        }}</span>
    </a>
    } @if (originScheduleType === SCHEDULE_TYPE.WEEKLY) {
    <a
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.WEEKLY_CRON' | translate
        }}</span>
    </a>
    } @if (originScheduleType === SCHEDULE_TYPE.DAILY) {
    <a
        href="javascript:void(0)"
        role="tooltip"
        aria-haspopup="true"
        class="tooltip tooltip-top-right">
        <clr-icon
            shape="info-circle"
            class="info-tips-icon"
            size="24"></clr-icon>
        <span class="tooltip-content">{{
            'CONFIG.TOOLTIP.DAILY_CRON' | translate
        }}</span>
    </a>
    } @if (originScheduleType === SCHEDULE_TYPE.CUSTOM) {
    <span>&nbsp;{{ 'SCHEDULE.CRON' | translate }} :</span>
    } @if (originScheduleType === SCHEDULE_TYPE.CUSTOM) {
    <span>{{ oriCron }}</span>
    }
    <button
        [disabled]="disabled"
        class="btn btn-link"
        (click)="editSchedule()"
        id="inline-edit">
        {{ 'BUTTON.EDIT' | translate }}
    </button>
</div>
} @if (isEditMode) {
<div class="normal-wrapper-box height-1rem">
    <div class="select select-schedule clr-select-wrapper">
        <select
            name="selectPolicy"
            id="inline-select"
            [(ngModel)]="scheduleType">
            <option [value]="SCHEDULE_TYPE.NONE">
                {{ 'SCHEDULE.NONE' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.HOURLY">
                {{ 'SCHEDULE.HOURLY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.DAILY">
                {{ 'SCHEDULE.DAILY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.WEEKLY">
                {{ 'SCHEDULE.WEEKLY' | translate }}
            </option>
            <option [value]="SCHEDULE_TYPE.CUSTOM">
                {{ 'SCHEDULE.CUSTOM' | translate }}
            </option>
        </select>
    </div>
    @if (scheduleType === SCHEDULE_TYPE.CUSTOM) {
    <div
        [ngClass]="{ 'mt-1': dateInvalid }"
        class="clr-control-container"
        [class.clr-error]="dateInvalid">
        <div class="clr-input-wrapper">
            <label class="required ml-1">{{
                'SCHEDULE.CRON' | translate
            }}</label>
            <input
                autocomplete="off"
                type="text"
                (blur)="blurInvalid()"
                (input)="inputInvalid($event)"
                name="targetCron"
                id="inline-target"
                #cronStringInput="ngModel"
                required
                class="clr-input"
                [(ngModel)]="cronString" />
            <clr-tooltip>
                <clr-icon
                    clrTooltipTrigger
                    shape="info-circle"
                    size="24"></clr-icon>
                <clr-tooltip-content
                    clrPosition="top-right"
                    clrSize="lg"
                    *clrIfOpen>
                    <cron-tooltip></cron-tooltip>
                </clr-tooltip-content>
            </clr-tooltip>
        </div>
        @if (dateInvalid) {
        <clr-control-error class="ml-1">{{
            'TOOLTIP.CRON_REQUIRED' | translate
        }}</clr-control-error>
        }
    </div>
    }
</div>
} @if (isEditMode) {
<div class="mt-05">
    <button
        class="btn btn-link margin-left-minus-075"
        (click)="save()"
        id="inline-config-save">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button class="btn btn-link" (click)="isEditMode = false">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
</div>
} }