<div id="optionModal" class="modal fade optionModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{builder.editOption.title}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						<ion-icon name="close-outline"></ion-icon>
					</span>
				</button>
			</div>
			<div class="modal-body">
				<div>
					<div class="form-group row">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.label">Label</lmsg></label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.title" ng-attr-placeholder="{{builder.placeholder.label}}" ng-disabled="builder.editOption.type === 'divider'" />
						</div>
					</div>
					<div class="form-group row">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.internal_name">Internal name</lmsg></label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.symname" ng-attr-placeholder="{{builder.placeholder.symname}}" />
						</div>
					</div>
					<div class="form-group row">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.type">Type</lmsg></label>
						<div class="col-md-9">
							<select class="form-control" ng-model="builder.editOption.type" ng-change="builder.onTypeChange()">
								<option ng-repeat="(type, type_data) in builder.types" value="{{type}}"><loc>{{type_data.name}}</loc></option>
							</select>
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('input')">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.input">Input control</lmsg></label>
						<div class="col-md-9">
							<select id="test" class="form-control" ng-model="builder.editOption.input" ng-options="item.key as item.name for item in builder.types[builder.editOption.type].inputs">
							</select>
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('options')">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.select_options">Options (as JSON)</lmsg></label>
						<div class="col-md-9">
							<textarea class="form-control" ng-model="builder.editOption.options" rows="8" placeholder="{{builder.optionsPlaceholder}}"></textarea>
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('placeholder')">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.placeholder">Placeholder</lmsg></label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.placeholder">
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('default')">
						<label class="col-form-label col-md-3"><lmsg src="pages.custom.options.default">Default value</lmsg></label>
						<div class="col-md-9">
							<input class="form-control" ng-if="builder.getDefaultType() === 'text'" type="text" ng-model="builder.editOption.default">
							<input class="form-control" ng-if="builder.getDefaultType() === 'int'" type="number" ng-model="builder.editOption.default">
							<input ng-if="builder.getDefaultType() === 'checkbox'" type="checkbox" ng-model="builder.editOption.default">
							<textarea ng-if="builder.getDefaultType() === 'textarea'" ng-model="builder.editOption.default" rows="4"></textarea>
							<cla-colour-picker id="default_colour" ng-if="builder.getDefaultType() === 'color_picker'" ng-model="builder.editOption.default" style="background-color: {{builder.editOption.default}}"></cla-colour-picker>
							<cla-date-picker id="default_date" ng-if="builder.getDefaultType() === 'date_picker'" ng-model="builder.editOption.default"></cla-date-picker>
							<cla-icon-picker id="default_icon" ng-if="builder.getDefaultType() === 'icon_picker'" ng-model="builder.editOption.default"></cla-icon-picker>
							<cla-time-picker id="default_time" ng-if="builder.getDefaultType() === 'time_picker'" ng-model="builder.editOption.default" time-format="{{builder.timeFormat}}"></cla-time-picker>
							<cla-date-time-picker id="default_datetime" ng-if="builder.getDefaultType() === 'datetime_picker'" ng-model="builder.editOption.default" time-format="{{builder.timeFormat}}"></cla-date-time-picker>
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('min')">
						<label class="col-form-label col-md-3">
							<lmsg src="pages.custom.options.minimum">Minimum</lmsg>
						</label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.min">
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('max')">
						<label class="col-form-label col-md-3">
							<lmsg src="pages.custom.options.maximum">Maximum</lmsg>
						</label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.max">
						</div>
					</div>
					<div class="form-group row" ng-if="builder.isInputVisible('max')">
						<label class="col-form-label col-md-3">
							<lmsg src="pages.custom.options.text_after">Text after the input</lmsg>
						</label>
						<div class="col-md-9">
							<input class="form-control" type="text" ng-model="builder.editOption.post_input">
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal" lmsg="common.cancel">Close</button>
				<a class="btn btn-primary" ng-click="builder.submitEdit()" lmsg="common.save">Save changes</a>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div>

<div ng-cloak="">
	<ul class="list-unstyled component-options-list" as-sortable="builder.dragListeners" ng-model="builder.options">
		<li ng-if="builder.options.length === 0" class="text-muted py-1 px-2" lmsg="pages.custom.options.none">No options</li>
		<li class="p-1" ng-repeat="(sort_order, option) in builder.options" as-sortable-item="">
			<div class="media">
				<div class="mr-2" as-sortable-item-handle="">
					<ion-icon name="reorder-three-outline"></ion-icon>
				</div>
				<div class="media-body">
								{{option.title}} ({{option.symname}}) {{option.type}}
				</div>
				<div class="ml-2">
					<a href="#0" class="d-inline-block" data-toggle="modal" data-target="#optionModal" ng-click="builder.setEditOption(option)">
						<ion-icon name="create-outline" ></ion-icon>
					</a>
					<a href="#0" class="d-inline-block" ng-click="builder.deleteOption(option)">
						<ion-icon name="trash-outline"></ion-icon>
					</a>
				</div>
			</div>
		</li>
	</ul>
	<a ng-click="builder.addOption()" class="btn btn-success" lmsg="pages.admin.add_option">[Add option]</a>
</div>
<input type="hidden" name="component_options" value="{{builder.options}}" ng-attr-style="width:100%;">
