<div class="castorcito-form-container js-form-wrapper form-wrapper">
  <details v-bind="isCollapseComponentEnabled() ? {} : { open: true }" class="claro-details" data-once="details">
    <summary role="button" aria-expanded="true" {{ attributes.addClass('claro-details__summary', field_required_class) }}>
      <span>
        {{ field_label }}
        {% if field_required_class is not empty %}
          <span class="required-mark"></span>
        {% endif %}
      </span>
      <span class="claro-details__summary-summary"></span>
      <div v-if="Object.keys(componentList).length > 1">
        <div v-if="hasPermission('use castorcito button paste')" class="castorcito--more-operations">
          <div class="message"></div>
          <button class="reset-appearance tabs__trigger" type="button">
            <svg fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
              <path clip-rule="evenodd" d="m15 9h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm0-5h-14c-.56016 0-1-.43984-1-1s.43984-1 1-1h14c.5602 0 1 .43984 1 1s-.4398 1-1 1zm-14 8h14c.5602 0 1 .4398 1 1s-.4398 1-1 1h-14c-.56016 0-1-.4398-1-1s.43984-1 1-1z" fill="#003ECC" fill-rule="evenodd"></path>
            </svg>
          </button>
          <div class="castorcito--more-options">
            <div>
              <button class="reset-appearance" @click="pasteComponent($event)" data-field-name="{{ field_name }}" type="button">
                <span>{{ 'Paste'|t }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </summary>
    <div class="js-form-item form-item">
      <castorcito-form :form-data="formData" :is-unique="isUniqueComponent" @toggle-show-button="handleToggleShowButton"></castorcito-form>
    </div>
    <div class="add-component fieldset__wrapper castorcito-container--add-item" v-show="showButtonAddComponent">
      <label for="{{ field_name }}_select_component" class="form-item__label visually-hidden">{{ 'Select a component'|t }}</label>
      <select v-if="Object.keys(componentList).length > 1" class="form-select form-element form-element--type-select" name="{{ field_name }}_select_component" id="{{ field_name }}_select_component">
        <option value="" disabled selected>{{ 'Select a component'|t }}</option>
        <option v-for="(value, key) in componentList" :key="key" :value="key" v-bind:text="value"></option>
      </select>
      <button type="button" class="button button--action button--primary" aria-label="Add component" @click="addComponent($event)">{{ 'Add component'|t }}</button>
    </div>
  </details>
  <div class="form-item__description">{{ field_description }}</div>
</div>
