<clr-modal
    [(clrModalOpen)]="addRuleOpened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="true"
    [clrModalSize]="'lg'">
    <h3 class="modal-title" *ngIf="isAdd">
        {{ 'IMMUTABLE_TAG.ADD_TITLE' | translate }}
    </h3>
    <h3 class="modal-title" *ngIf="!isAdd">
        {{ 'IMMUTABLE_TAG.EDIT_TITLE' | translate }}
    </h3>
    <div class="modal-body no-scrolling">
        <inline-alert class="modal-title"></inline-alert>
        <p class="color-97">{{ 'IMMUTABLE_TAG.ADD_SUBTITLE' | translate }}</p>
        <div class="height-72">
            <div class="clr-row mt-1">
                <div class="clr-col-4">
                    <span>{{
                        'IMMUTABLE_TAG.IN_REPOSITORIES' | translate
                    }}</span>
                </div>
                <div class="clr-col-3">
                    <div class="clr-select-wrapper w-100">
                        <select
                            id="scope_selectors"
                            [(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-5">
                    <div class="w-100">
                        <input
                            required
                            id="scope-input"
                            [(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">
                    <span>{{ 'IMMUTABLE_TAG.REP_SEPARATOR' | translate }}</span>
                </div>
            </div>
        </div>
        <div class="height-72">
            <div class="clr-row">
                <div class="clr-col-4">
                    <label>{{ 'IMMUTABLE_TAG.TAGS' | translate }}</label>
                </div>
                <div class="clr-col-3">
                    <div class="clr-select-wrapper w-100">
                        <select
                            id="tag_selectors"
                            [(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-5">
                    <div class="w-100">
                        <input
                            required
                            id="tag-input"
                            [(ngModel)]="tagsInput"
                            class="clr-input w-100" />
                    </div>
                </div>
            </div>
            <div class="clr-row">
                <div class="clr-col-4"></div>
                <div class="clr-col-8">
                    <span>{{ 'IMMUTABLE_TAG.TAG_SEPARATOR' | translate }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button
            type="button"
            class="btn btn-outline"
            id="close-btn"
            (click)="cancel()">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <button
            [disabled]="canNotAdd()"
            type="button"
            id="add-edit-btn"
            class="btn btn-primary"
            (click)="add()">
            <span *ngIf="isAdd">{{ 'BUTTON.ADD' | translate }}</span>
            <span *ngIf="!isAdd">{{ 'BUTTON.SAVE' | translate }}</span>
        </button>
    </div>
</clr-modal>
