template.html

<div class="row" ng-show="collapse" ng-init="collapse=false">
	<div class="col-lg-12">
		{{title}}<span class="text-muted margin-left small">Facet</span>
		<a class="btn btn-default btn-xs pull-right"
			tooltip-animation="false"
			tooltip-append-to-body="true"
			tooltip-placement="left"
			tooltip="Expand"
			ng-click="collapse=false">
			<i class="fa fa-chevron-up"></i>
		</a>
	</div>
</div>

<div class="row" ng-show="!collapse">

	<div ng-class="{'col-lg-9': showSettings, 'col-md-8': showSettings, 'col-lg-12': !showSettings, 'col-md-12': !showSettings}">

		<div class="facet-container" style="height: {{calcHeight}}">
			<div class="mid-facet-container" style="height: {{calcHeight}};">
				<div class="inner-facet-container" style="height: {{calcHeight}};"></div>
				<div ng-show="showDropArea === 'true'" palladio-droppable model="dropModel" class="facet-drop-area" style="margin-top: {{dropMarginTop}};">
					<div class="facet-drop-area-text">
						Drop dimensions here
					</div>
				</div>
			</div>
		</div>

		<div class="well well-expand" ng-show="!fieldDescriptions() && showSettings === 'true'">Select at least one dimension on the right</div>
		<div class="well well-expand" ng-show="!fieldDescriptions() && showSettings !== 'true'">No dimensions configured for facet display</div>

	</div>

	<div class="facet-settings col-lg-3 col-md-4" ng-show="showSettings">
		<palladio-facet-filter-settings></palladio-facet-filter-settings>
	</div>
</div>

<div id="{{uniqueModalId}}">
	<div id="facet-modal" data-description="Choose facet dimensions" data-modal toggle-key="addKey" dimensions="fields" model="dims" sortable="false"></div>
	<div id="facet-agg-modal" data-description="Choose count dimensions" data-modal dimensions="aggDims" model="aggDim" description-accessor="getAggDescription"></div>
</div>