star-consent-link.html

<div class="bu-py-1 bu-px-4 cly-vue-drawer-step__section-group--filled">
  <div class="cly-vue-drawer-step__section">
    <div class="text-small text-heading bu-pb-1">{{i18n('rating.drawer.consent.text')}}</div>
    <validation-provider name="value.consent" rules="required|max:94" v-slot="v">
      <el-input
        test-id="ratings-drawer-settings-add-user-consent-text-input"
        :class="{'is-error': v.errors.length > 0}"
        :placeholder="i18n('rating.drawer.consent.placeholder')"
        v-model="value.finalText"
        maxlength="94"
        show-word-limit
        >
      </el-input>
    </validation-provider>
    <div class="bu-pt-4 text-small text-heading" data-test-id="ratings-drawer-settings-add-user-consent-links-label">
        {{i18n('rating.drawer.consent.links')}}
        <cly-tooltip-icon :tooltip="i18n('rating.drawer.links.tooltip')" icon="ion-help-circled" data-test-id="ratings-drawer-settings-add-user-consent-links-tooltip"></cly-tooltip-icon>
    </div>
    <div style="gap:8px" class="bu-is-flex bu-is-justify-content-space-between	bu-is-align-items-center bu-py-1" :key="idx" v-for="(item, idx) in value.link">
      <div class="cly-vue-surveys-drawer__consent__basis-text">
        <validation-provider :name="item.text" rules="required" v-slot="v">
          <el-input
            :test-id="'ratings-drawer-settings-add-user-consent-links-text-input-' + idx"
            :class="{'is-error': v.errors.length > 0}"
            :placeholder=item.text
            v-model="item.textValue">
          </el-input>
        </validation-provider>
      </div>
      <div class="cly-vue-surveys-drawer__consent__basis">
        <validation-provider name="item.link" rules="required" v-slot="v">
          <el-input
            :test-id="'ratings-drawer-settings-add-user-consent-links-link-input-' + idx"
            :class="{'is-error': v.errors.length > 0}"
            :placeholder=item.link
            v-model="item.linkValue">
          </el-input>
        </validation-provider>
      </div>
      <div @click="onDelete(idx)" class="cly-icon-button--gray bu-has-text-right" :data-test-id="'ratings-drawer-settings-add-user-consent-delete-link-icon-' + idx"><i class="ion-ios-close-empty bu-is-clickable ratings-drawer__consent__close-icon" :data-test-id="'ratings-drawer-settings-add-user-consent-delete-link-' + idx"></i></div>
    </div>
    <el-button v-if="newLinkAllowed" @click="add" type="text" data-test-id="ratings-drawer-settings-add-user-consent-add-link-button">{{i18n('rating.drawer.consent.add.link')}}</el-button>
  </div>
</div>