<div class="uf-quick-settings">
	<!-- Quick Settings Title -->
	<div class="uf-panel-minimal-heading uf-panel-minimal-heading-console" ng-click="hideMySettings=!hideMySettings">
		Quick Settings <span style="font-weight:400;font-size:12px;" ng-show="vm.ufQuickSettingsSrv.getPinnedList().length>0">| <a href="" ng-click="hideMySettings=!hideMySettings;vm.ufQuickSettingsSrv.removeAll();" title="Remove All Quick Settings">Remove All</a></span><span class="glyphicon" ng-class="hideMySettings?'glyphicon-triangle-right':'glyphicon-triangle-bottom'"></span>
	</div>
	
	<!-- Quick Settings Content -->
	<div ng-show="!hideMySettings">
		<div style="margin:0;border-bottom:1px solid #ddd;color:#444;background-color:#fff;">
			<!-- Empty Content -->
			<div class="uf-quick-settings-none highlight_hover_light2" ng-show="vm.ufQuickSettingsSrv.getPinnedList().length===0" uib-tooltip="Create a customized UI of all of your frequently used Flash settings." tooltip-placement="left" tooltip-trigger="mouseenter" tooltip-popup-delay="300" ng-click="vm.ufSettingsDisplayControlSrv.showPinSetting=true;vm.goToUtilitiesAndSettings();">
                Create your personalize settings view. Click to add settings.
			</div>
			<!-- List of Quick settings -->
			<div style="padding-top:7px;padding-bottom:10px;" ng-show="vm.ufQuickSettingsSrv.getPinnedList().length>0">
				<table style="width:100%;">
					<tr class="highlight_hover_light3" ng-repeat="pinnedProperty in vm.ufQuickSettingsSrv.getPinnedList()" ng-mouseenter="showControl=true;" ng-mouseleave="showControl=false;">
						<td style="width:90%;padding:2px 0 2px 14px;" ng-if="pinnedProperty.type==='property'">
							<uf-property id="{{pinnedProperty.id}}"></uf-property>
						</td>
						<td style="width:100%;padding:2px 5px;" colspan="2" ng-if="pinnedProperty.type==='category'">
							<uf-property-category category="{{vm.ufPropertiesDB.getCategoryName(pinnedProperty.id)}}" showButton="true" searchable="false" hideQuick="true" toggle="{{pinnedProperty.id._toggle}}" read="{{pinnedProperty.id._read}}"></uf-property-category>
						</td>
						<!-- Setting Control -->
						<td style="color:#999;text-align:right;padding-right:24px;font-size:12px;" ng-show="showControl&&pinnedProperty.type!=='category'">
							<span ng-class="{'disabled':$index===0}" class="glyphicon glyphicon glyphicon-arrow-up uf-btn-fg" style="cursor:pointer" ng-click="vm.ufQuickSettingsSrv.moveEntryUp($index)" title="Move Setting Up"></span>
							<span ng-class="{'disabled':$index===(vm.ufQuickSettingsSrv.getPinnedList().length-1)}" class="glyphicon glyphicon glyphicon-arrow-down uf-btn-fg" style="cursor:pointer" ng-click="vm.ufQuickSettingsSrv.moveEntryDown($index)" title="Move Setting Down"></span>
							<span class="glyphicon glyphicon-remove uf-btn-fg" style="cursor:pointer" ng-click="vm.ufQuickSettingsSrv.remove($index)" title="Remove Item from My Quick Settings"></span>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>