<clr-modal
    [(clrModalOpen)]="addRuleOpened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="true"
    [clrModalSize]="'lg'">
    <h3 class="modal-title" *ngIf="isAdd">
        {{ 'TAG_RETENTION.ADD_TITLE' | translate }}
    </h3>
    <h3 class="modal-title" *ngIf="!isAdd">
        {{ 'TAG_RETENTION.EDIT_TITLE' | translate }}
    </h3>
    <div class="modal-body no-scrolling">
        <inline-alert class="modal-title"></inline-alert>
        <p class="color-97">{{ 'TAG_RETENTION.ADD_SUBTITLE' | translate }}</p>
        <div class="height-72">
            <div class="clr-row mt-1">
                <div class="clr-col-4">
                    <span>{{
                        'TAG_RETENTION.IN_REPOSITORIES' | translate
                    }}</span>
                </div>
                <div class="clr-col-2">
                    <div class="clr-select-wrapper w-100">
                        <select
                            [(ngModel)]="repoSelect"
                            class="clr-select w-100">
                            <option
                                *ngFor="
                                    let d of metadata?.scope_selectors[0]
                                        ?.decorations
                                "
                                value="{{ d }}">
                                {{ getI18nKey(d) | translate }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="clr-col-6">
                    <div class="w-100">
                        <input
                            id="repos"
                            required
                            [(ngModel)]="repositories"
                            class="clr-input w-100" />
                    </div>
                </div>
            </div>
            <div class="clr-row">
                <div class="clr-col-4"></div>
                <div class="clr-col-8 margin-top-5px">
                    <span class="tootip">{{
                        'TAG_RETENTION.REP_SEPARATOR' | translate
                    }}</span>
                </div>
            </div>
        </div>
        <div class="height-72">
            <div class="clr-row">
                <div class="clr-col-4">
                    <div class="over-line"></div>
                    <label>{{ 'TAG_RETENTION.BY_WHAT' | translate }}</label>
                </div>
                <div class="clr-col-5">
                    <div class="over-line"></div>
                    <div class="clr-select-wrapper w-100">
                        <select
                            id="template"
                            [(ngModel)]="template"
                            class="clr-select w-100">
                            <option class="display-none" value=""></option>
                            <option
                                *ngFor="let t of metadata?.templates"
                                value="{{ t?.rule_template }}">
                                {{ getI18nKey(t?.action) | translate
                                }}{{ getI18nKey(t?.display_text) | translate }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="clr-col-3">
                    <div class="over-line">
                        <span *ngIf="hasParam()">{{
                            getI18nKey(unit) | translate
                        }}</span>
                    </div>
                    <div class="w-100 disabled">
                        <input
                            id="param"
                            *ngIf="hasParam()"
                            [(ngModel)]="num"
                            class="clr-input w-100" />
                    </div>
                </div>
            </div>
        </div>
        <div class="height-95">
            <div class="clr-row">
                <div class="clr-col-4">
                    <label>{{ 'TAG_RETENTION.TAGS' | translate }}</label>
                </div>
                <div class="clr-col-2">
                    <div class="clr-select-wrapper w-100">
                        <select
                            [(ngModel)]="tagsSelect"
                            class="clr-select w-100">
                            <option
                                *ngFor="
                                    let d of metadata?.tag_selectors[0]
                                        ?.decorations
                                "
                                value="{{ d }}">
                                {{ getI18nKey(d) | translate }}
                            </option>
                        </select>
                    </div>
                </div>
                <div class="clr-col-3">
                    <div class="w-100">
                        <input
                            id="tags"
                            required
                            [(ngModel)]="tagsInput"
                            class="clr-input w-100" />
                    </div>
                </div>
                <div class="clr-col-3 p-0">
                    <div class="w-100 untagged">
                        <label for="untagged">{{
                            'TAG_RETENTION.INCLUDE_UNTAGGED' | translate
                        }}</label>
                        <input
                            type="checkbox"
                            [(ngModel)]="untagged"
                            name="untagged"
                            id="untagged"
                            class="clr-input w-100"
                            clrCheckbox />
                    </div>
                </div>
            </div>
            <div class="clr-row">
                <div class="clr-col-4"></div>
                <div class="clr-col-8 margin-top-5px">
                    <span class="tootip">{{
                        'TAG_RETENTION.TAG_SEPARATOR' | translate
                    }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="cancel()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            id="save-add"
            [disabled]="canNotAdd()"
            type="button"
            class="btn btn-primary"
            (click)="add()">
            <span *ngIf="isAdd">{{ 'BUTTON.ADD' | translate }}</span>
            <span *ngIf="!isAdd">{{ 'BUTTON.SAVE' | translate }}</span>
        </button>
    </div>
</clr-modal>
