<link rel="stylesheet" href="./sly/css/app/widgets/classes_list_selector/style.css" />

<div v-show="data.{{{widget.widget_id}}}.classes.length == 0">
	{{{widget.empty_notification}}}
</div>
<div v-show="data.{{{widget.widget_id}}}.classes.length != 0">
	<link rel="stylesheet" href="./sly/css/app/widgets/object_class_view/style.css" />
	{% if widget._multiple %}
	<div>
		<el-button style="margin-right: 10px" type="text" {% if widget._checkboxes_handled %} @click="{
					state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map(() => true);
					post('/{{{widget.widget_id}}}/checkbox_cb');
				}" {% else %}
			@click="state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map(() => true)" {%
			endif %}>
			<i class="zmdi zmdi-check-all"></i>
			Select all
		</el-button>
		<el-button style="margin-right: 10px" type="text" {% if widget._checkboxes_handled %} @click="{
					state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map(() => false);
					post('/{{{widget.widget_id}}}/checkbox_cb');
				}" {% else %}
			@click="state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map(() => false)" {%
			endif %}>
			<i class="zmdi zmdi-square-o"></i>
			Deselect all
		</el-button>
	</div>
	{% endif %}
	{% if widget._allow_new_classes %}
	<div style="margin-bottom: 10px; margin-top: 10px">
		<el-button type="primary" size="small" icon="el-icon-plus"
			@click="state.{{{widget.widget_id}}}.createClassDialog.visible = true">
			Add new class
		</el-button>
	</div>
	{% endif %}
	<div class="fflex" v-for="(obj_class, idx) in data.{{{widget.widget_id}}}.classes">
		<el-checkbox v-model="state.{{{widget.widget_id}}}.selected[idx]" style="margin-right: 10px" {% if
			widget._checkboxes_handled %} {% if not widget._multiple %} @change="() => {
						if ($event.target.checked) {
							state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map((_, i) => i == idx);
						}
						post('/{{{widget.widget_id}}}/checkbox_cb');
					}" {% else %} @change="() => {
						post('/{{{widget.widget_id}}}/checkbox_cb');
					}" {% endif %} {% else %} {% if not widget._multiple %}
			@change="if ($event.target.checked) {state.{{{widget.widget_id}}}.selected = state.{{{widget.widget_id}}}.selected.map((_, i) => i == idx);}"
			{% endif %} {% endif %}>
		</el-checkbox>
		<span class="icon-text-line classes-list-preview-sidebar">
			<i class="zmdi zmdi-circle" style="margin-right: 5px" :style="{color: obj_class.color}"></i>
			<b style="font-size: 16">{{obj_class.title}}</b>
			<span v-if="obj_class.shape_text" style="
					flex: none;
					margin-left: 5px;
					font-size: 12px;
					color: #8492a6;
					line-height: initial;
				">
				{{obj_class.shape_text}}
			</span>
		</span>
	</div>
</div>

{% if widget._allow_new_classes %}
<!-- Dialog for creating new class -->
<el-dialog title="Create New Class" :visible.sync="state.{{{widget.widget_id}}}.createClassDialog.visible" width="450px"
	:close-on-click-modal="false" @open="state.{{{widget.widget_id}}}.createClassDialog.showError = false">
	<el-form label-width="120px" label-position="left">
		<el-form-item label="Class Name">
			<el-input v-model="state.{{{widget.widget_id}}}.createClassDialog.className" placeholder="Enter class name"
				@input="state.{{{widget.widget_id}}}.createClassDialog.showError = false"
				@keyup.enter.native="post('/{{{widget.widget_id}}}/class_created_cb')"></el-input>
		</el-form-item>
		<el-form-item label="Geometry Type">
			<el-select v-model="state.{{{widget.widget_id}}}.createClassDialog.geometryType"
				placeholder="Select geometry type" style="width: 100%">
				<el-option v-for="geom in data.{{{widget.widget_id}}}.availableGeometryTypes" :key="geom.value"
					:label="geom.label" :value="geom.value">
				</el-option>
			</el-select>
		</el-form-item>
		<div v-show="state.{{{widget.widget_id}}}.createClassDialog.showError" style="margin-top: 10px;">
			{{{widget._error_message}}}
		</div>
	</el-form>
	<span slot="footer" class="dialog-footer">
		<el-button @click="state.{{{widget.widget_id}}}.createClassDialog.visible = false">
			Cancel
		</el-button>
		<el-button type="primary" @click="post('/{{{widget.widget_id}}}/class_created_cb')">
			Create
		</el-button>
	</span>
</el-dialog>
{% endif %}