<el-select
  v-model="state.{{{widget.widget_id}}}.value"
  {% if widget._changes_handled == true %}
  @change="post('/{{{widget.widget_id}}}/value_changed')"
  {% endif %}
  {% if widget._size is not none %}
  :size="data.{{{widget.widget_id}}}.size"
  {% endif %}
  :placeholder="data.{{{widget.widget_id}}}.placeholder"
  :multiple="data.{{{widget.widget_id}}}.multiple"
  :filterable="data.{{{widget.widget_id}}}.filterable"
  :fit-input-width="data.{{{widget.widget_id}}}.fit_input_width"
  {% if widget._width_px is not none %}
  :style="{ width: `${data.{{{widget.widget_id}}}.width_px}px` }"
  {% elif widget._width_percent is not none %}
  :style="{ width: `${data.{{{widget.widget_id}}}.width_percent}%` }"
  {% endif %}
>
  <div v-if="data.{{{widget.widget_id}}}.items">
    <el-option
      v-for="item in data.{{{widget.widget_id}}}.items"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    >
      <span v-if="item.right_text !== null"
        style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 20px; gap: 10px; flex-wrap: nowrap;">
        <span>{{ item.label }}</span>
        <span style="color: #8492a6; font-size: 13px">{{ item.right_text }}</span>
      </span>
    </el-option>
  </div>
  <div v-else>
    <el-option-group
      v-for="group in data.{{{widget.widget_id}}}.groups"
      :key="group.label"
      :label="group.label"
      :disabled="group.disabled"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      >
        <span v-if="item.right_text"
          style="display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 20px; gap: 10px; flex-wrap: nowrap;">
          <span>{{ item.label }}</span>
          <span style="color: #8492a6; font-size: 13px">{{ item.right_text }}</span>
        </span>
      </el-option>
    </el-option-group>
  </div>
</el-select>
<span v-if="data.{{{widget.widget_id}}}.with_link" style="margin-left:10px;">
  <a :href="state.{{{widget.widget_id}}}.links[state.{{{widget.widget_id}}}.value]" target="_blank">Learn more...</a>
</span>
