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">Timespan</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>

		<div class="main-viz">
			<div id="{{uniqueToggleId}}"></div>
		</div>

		<div class="well well-expand" ng-show="!dateEndDim || !dateStartDim || !groupDim">Select an Upper date, a Lower date and a Group dimension on the right</div>

	</div>

	<div data-ng-show="showSettings" class="col-lg-3 timespan-settings">

		<div class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline text-muted">Timespan</label>
			</div>
			<div ng-show="showAccordion" class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<a class="btn btn-default btn-xs pull-right"
					tooltip-animation="false"
					tooltip-append-to-body="true"
					tooltip-placement="left"
					tooltip="Collapse"
					ng-click="collapse=true">
					<i class="fa fa-chevron-down"></i>
				</a>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Description</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<input type="text" class="form-control" data-ng-model="title" placeholder="Untitled"></input>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Layout</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<ui-select ng-model="$parent.stepMode" theme="selectize">
					<ui-select-match placeholder="Select">
						{{$select.selected}}
						<span class="caret"></span>
					</ui-select-match>
				    <ui-select-choices repeat="mode in stepModes">
				      <span ng-bind-html="mode"></span>
				    </ui-select-choices>
				</ui-select>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Start date</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showDateStartModal()">
					{{dateStartDim.description || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">End date</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showDateEndModal()">
					{{dateEndDim.description || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Label</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showTooltipLabelModal()">
					{{tooltipLabelDim.description || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
				<label class="inline">Group</label>
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">
				<span class="btn btn-default btn-modal" ng-click="showGroupModal()">
					{{groupDim.description || "Choose"}}
					<span class="caret"></span>
				</span>
			</div>
		</div>

		<div data-ng-show="showControls" class="row margin-top">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right ">
			</div>
			<div class="col-lg-8 col-md-8 col-md-8 col-xs-8 col-condensed">

				<a class="small" data-ng-click="filterReset()">Clear</a>
        <a class="small" data-ng-click="saveAsSVG()"
          tooltip-animation="false"
				 	tooltip-append-to-body="true"
					tooltip-placement="top"
					tooltip="Download as SVG">
          
          <i class="fa fa-download"></i>
        </a>

				<a class="text-danger pull-right"
					tooltip-animation="false"
					tooltip-append-to-body="true"
					tooltip-placement="left"
					tooltip="Delete filter"
					data-ng-click="$parent.removeFilter($event)">
					<i class="fa fa-trash-o"></i>
				</a>
			</div>
		</div>


	</div>

</div>

<div id="{{uniqueModalId}}">
	<div id="date-start-modal" data-modal dimensions="dateDims" model="dateStartDim"></div>
	<div id="date-end-modal" data-modal dimensions="dateDims" model="dateEndDim"></div>
	<div id="tooltip-label-modal" data-modal dimensions="labelDims" model="tooltipLabelDim"></div>
	<div id="group-modal" data-modal dimensions="labelDims" model="groupDim"></div>
</div>