<div>
  <sly-field title="Result project" description="Define destination project and dataset">
    <div class="fflex">
      <el-radio class="radio" v-model="state.{{{widget.widget_id}}}.project_mode" label="new_project" @input="(val) => {
                            if (val === 'new_project') {
                                state.{{{widget.widget_id}}}.dataset_mode = 'new_dataset';
                            }
                          }">
        Create new project
      </el-radio>
      <el-radio class="radio" v-model="state.{{{widget.widget_id}}}.project_mode" label="existing_project">Add to
        existing project
      </el-radio>
    </div>
    <div class="mt5">
      <div v-if="state.{{{widget.widget_id}}}.project_mode === 'new_project'">
        <el-input placeholder="Please input project name" v-model="state.{{{widget.widget_id}}}.project_name"></el-input>
        <div class="mt5" style="color: #5a6772">
          <i>If project with the same name already exists, a new name will be
            generated automatically</i>
        </div>
      </div>
      <div v-if="state.{{{widget.widget_id}}}.project_mode === 'existing_project'">
        <sly-select-project :workspace-id="state.{{{widget.widget_id}}}.workspace_id"
          :project-id.sync="state.{{{widget.widget_id}}}.project_id"
          :options="{showLabel: false, availableTypes: [state.{{{widget.widget_id}}}.project_type]}">
        </sly-select-project>
      </div>
    </div>
  </sly-field>


  <sly-field title="Result dataset" description="All selected items will be placed to a single dataset">
    <div class="fflex">
      <el-radio class="radio" v-model="state.{{{widget.widget_id}}}.dataset_mode" label="new_dataset">Create new
        dataset</el-radio>
      <el-radio class="radio" v-model="state.{{{widget.widget_id}}}.dataset_mode" label="existing_dataset"
        :disabled="state.{{{widget.widget_id}}}.project_mode === 'new_project'">
        Add to existing dataset
      </el-radio>
    </div>
    <div class="mt5">
      <div v-if="state.{{{widget.widget_id}}}.dataset_mode === 'new_dataset'">
        <el-input placeholder="Please input dataset name" v-model="state.{{{widget.widget_id}}}.dataset_name"></el-input>
        <div class="mt5" style="color: #5a6772">
          <i>If dataset with the same name already exists, a new name will be
            generated automatically</i>
        </div>
      </div>
      <div v-if="state.{{{widget.widget_id}}}.dataset_mode === 'existing_dataset'">
        <sly-select-dataset :project-id="state.{{{widget.widget_id}}}.project_id"
          :datasets.sync="state.{{{widget.widget_id}}}.dataset_id" :options="{showLabel: false}">
        </sly-select-dataset>
      </div>
    </div>
  </sly-field>
</div>