<div ng-repeat="(attr_name, option) in settings.tile.options" class="form-group" ng-if="option.input !== 'none'">
	<div class="collapse-wrapper d-flex" ng-if="option.input === 'collapse'">
			<input type="checkbox" id="collapse_{{attr_name}}_{{settings.tile.id}}" ng-model="option.value" ng-change="settings.onLabelClick(option)">
			<a href="#" ng-class="{'col-sm-4': settings.width === 'small', 'col-sm-3': settings.width === 'medium', 'col-sm-2': settings.width === 'large'}" ng-click="settings.onCollapseClick(option, $event)">
				<ion-icon  ng-if="option.value === false" name="chevron-down-outline"></ion-icon>
				<ion-icon  ng-if="option.value === true" name="chevron-forward-outline"></ion-icon>
			</a>

		<label for="collapse_{{attr_name}}_{{settings.tile.id}}" ng-class="{'col-sm-8': settings.width === 'small', 'col-sm-9': settings.width === 'medium', 'col-sm-10': settings.width === 'large'}">{{option.title}}</label>
	</div>
	<div class="row" ng-if="option.input !== 'collapse'">
		<label ng-if="!(option.input === 'bool')" class="col-form-label" ng-class="{'pt-0': option.input === 'radio','col-sm-4': settings.width === 'small', 'col-sm-3': settings.width === 'medium', 'col-sm-2': settings.width === 'large'}">{{option.title}}</label>
		<div ng-if="option.input === 'divider'" class="col-sm-12 tile-settings-divider">
			<hr>
		</div>

		<div ng-class="{'col-sm-8': settings.width === 'small', 'col-sm-9': settings.width === 'medium', 'col-sm-10': settings.width === 'large', 'offset-sm-4': option.input === 'bool' && settings.width === 'small', 'offset-sm-3': option.input === 'bool' && settings.width === 'medium', 'offset-sm-2': option.input === 'bool' && settings.width === 'large'}">
			<input type="text" ng-if="option.input === 'string'" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" placeholder="{{option.placeholder ? option.placeholder : option.default}}" size="28" class="form-control">

			<input type="number" ng-if="option.input === 'int' && option.post_input === ''" ng-model-options="{ allowInvalid: true}" min="{{option.min}}" max="{{option.max}}" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" placeholder="{{option.default}}" size="10" class="form-control">
			<div ng-if="option.input === 'int' && option.post_input !== ''">
				<input type="number" ng-model-options="{ allowInvalid: true}" min="{{option.min}}" max="{{option.max}}" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" placeholder="{{option.default}}" size="5" class="form-control input-with-string">
				{{option.post_input}}
			</div>

			<select ng-if="option.input === 'select'" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" style="width: 100%;" class="form-control js-options-select" placeholder="{{option.placeholder}}">
				<option ng-repeat="item in option.options" value="{{item[0]}}" ng-attr-selected="item[0] == option.value ? 'selected' : ''">{{item[1]}}</option>
			</select>

			<select ng-if="option.input === 'multi-select'" multiple="multiple" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" class="w-100 form-control js-options-multiselect" ng-options="item[0] as item[1] for item in option.options" placeholder="{{option.placeholder}}"></select>

			<div class="form-check form-check-pages-settings" ng-if="option.input === 'radio' || option.input === 'radio_icon'" ng-repeat="(key, title) in option.options" ng-class="{radio_icon_row: option.input === 'radio_icon', radio: option.input !== 'radio_icon'}">
				<input class="form-check-input" id="{{attr_name}}-{{settings.tile.id}}-{{key}}" type="radio" name="{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" value="{{key}}" ng-class="{radio_icon_input: option.input === 'radio_icon'}">
				<label class="form-check-label" for="{{attr_name}}-{{settings.tile.id}}-{{key}}" ng-class="{'float-left': option.input === 'radio_icon'}">
					<span class="form-check-label-inner" ng-if="option.input === 'radio'">
						{{title}}
					</span>
					<span ng-if="option.input === 'radio_icon'" class="radio_icon" ng-class="{radio_icon_selected: key === option.value}">
						<span class="radio_icon_for_{{attr_name}}"><span class="{{title}}"></span></span>
					</span>
				</label>
			</div>

			<div class="form-check" ng-if="option.input === 'bool'">
				<input class="form-check-input" type="checkbox" name="{{attr_name}}" id="{{attr_name}}-{{settings.tile.id}}" ng-model="option.value" ng-change="settings.onChange(option)">
				<label class="form-check-label" for="{{attr_name}}-{{settings.tile.id}}">
					{{option.title}}
				</label>
			</div>

			<div ng-if="option.input === 'textarea'">
				<textarea name="{{attr_name}}" class="form-control settings-textarea" rows="4" ng-model="option.value" ng-change="settings.onChange(option)"></textarea>
			</div>

			<div ng-if="option.input === 'html_editor'">
				<cla-html-editor class="settings-html_editor js-html-editor" ng-model="option.value" ng-change="settings.onChange(option)" control="option.token"></cla-html-editor>
			</div>

			<div ng-if="option.input === 'user_picker'">
				<cla-user-picker class="settings-user-picker" select-id="user_picker-{{attr_name}}" user-name="{{option.users_name}}" ng-model="option.value" ng-change="settings.onChange(option)" control="option.token" allow-unset="1">
				</cla-user-picker>
			</div>

			<div ng-if="option.input === 'date_picker'">
				<cla-date-picker class="settings-date-picker" id="date_picker-{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)">
				</cla-date-picker>
			</div>

			<div ng-if="option.input === 'time_picker'">
				<cla-time-picker class="settings-time-picker" id="time_picker-{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" time-format="{{option.time_format}}">
				</cla-time-picker>
			</div>

			<div ng-if="option.input === 'datetime_picker'">
				<cla-date-time-picker class="settings-datetime-picker" id="datetime_picker-{{attr_name}}" ng-model="option.value" ng-change="settings.onChange(option)" time-format="{{option.time_format}}">
				</cla-date-time-picker>
			</div>

			<div ng-if="option.input === 'group_picker'">
				<cla-group-picker class="settings-group-picker" select-id="group_picker-{{attr_name}}-{{settings.tile.id}}" groups="option.groups" ng-model="option.value" ng-change="settings.onChange(option)" control="option.token" placeholder="{{option.placeholder}}">
				</cla-group-picker>
			</div>

			<div ng-if="option.input === 'role_picker'">
				<cla-role-picker class="settings-role-picker" select-id="role_picker-{{attr_name}}-{{settings.tile.id}}" roles="option.roles" ng-model="option.value" ng-change="settings.onChange(option)" control="option.token" placeholder="{{option.placeholder}}">
				</cla-role-picker>
			</div>

			<div ng-if="option.input === 'folder_picker'">
				<cla-folder-picker ng-model="option.value" folder-name="{{option.folder_name}}" unique="{{settings.tile.id}}" ng-change="settings.onChange(option)" control="option.token"></cla-folder-picker>
			</div>

			<div ng-if="option.input === 'document_picker'">
				<cla-document-picker ng-model="option.value" document-name="{{option.document_name}}" unique="{{settings.tile.id}}" ng-change="settings.onChange(option)" control="option.token"></cla-document-picker>
			</div>

			<div ng-if="option.input === 'image_picker'">
				<cla-image-picker ng-model="option.value" id="dd" unique="{{settings.tile.id}}" control="option.token"></cla-image-picker>
			</div>

			<div ng-if="option.input === 'icon_picker'">
				<cla-icon-picker ng-model="option.value" id="icon_picker_{{attr_name}}_{{settings.tile.id}}"></cla-icon-picker>
			</div>

			<div ng-if="option.input === 'button'">
				<a href="javascript:void(0);" ng-model="option.value" id="button_{{attr_name}}_{{settings.tile.id}}" class="btn {{option.class}}" ng-click="settings.onButtonClick(option)">{{option.label}}</a>
			</div>

			<div ng-if="option.input === 'icon_grid'" class="pages-icon-grid-container">
				<cla-icon-grid ng-model="option.value" id="icon_grid_{{attr_name}}_{{settings.tile.id}}"></cla-icon-grid>
			</div>


			<tile_settings_custom ng-if="settings.isCustomType(option)" value="option.input_fragment" option="option" id="custom_{{attr_name}}_{{settings.tile.id}}">
			</tile_settings_custom>
			<div ng-if="option.input === 'color_picker'">
				<cla-colour-picker ng-model="option.value" id="color_picker_{{attr_name}}_{{settings.tile.id}}"></cla-colour-picker>
			</div>
		</div>
	</div>
</div>
