<div class="sidebar-card">
	<!-- Habit with trail only -->
	<div class="details" ng-if="data.type == 'HBTR'">
		<div class="row-one">
			<checkbox label="data.label" name="data.hashid"
				is-checked="data.isChecked" mark-checkbox-fn="markCheckbox(data.hashid, data.isChecked)"></checkbox>
			<div class="info">
				<trail binary="data.binaryTrail"></trail>
			</div>
		</div>
	</div>
	<!-- Habit with trail and time -->
	<div class="details" ng-if="data.type == 'HBTT'">
		<div class="row-one">
			<checkbox label="data.label" name="data.hashid"
				is-checked="data.isChecked" mark-checkbox-fn="markCheckbox(data.hashid, data.isChecked)"></checkbox>
			<div class="info">
				<trail binary="data.binaryTrail"></trail>
				<div class="time">{{data.date | date:"h:mma"}}</div>
			</div>
		</div>
	</div>
	<!-- Calendar reminder without time -->
	<div class="details" ng-if="data.type == 'CMWT'">
		<div class="row-one">
			<checkbox label="data.label ? data.label : 'Event'" name="data.hashid"
				 is-checked="data.isChecked" mark-checkbox-fn="markCheckbox(data.hashid, data.isChecked)"></checkbox>
		</div>
	</div>
	<!-- Calendar reminder based on time -->
	<div class="details" ng-if="data.type == 'CRBT'">
		<div class="row-one">
			<checkbox label="data.label ? data.label : 'Event'" name="data.hashid"
				 is-checked="data.isChecked" mark-checkbox-fn="markCheckbox(data.hashid, data.isChecked)"></checkbox>
			<div class="info">
				<div class="time">{{data.times['START'].date | date:"h:mma"}}</div>
			</div>
		</div>
	</div>
	<!-- Calendar meeting with time and location -->
	<div class="details" ng-if="data.type == 'CMTL'">
		<div class="row-one">
			<checkbox label="data.label ? data.label : 'Event'" name="data.hashid"
				 is-checked="data.isChecked" mark-checkbox-fn="markCheckbox(data.hashid, data.isChecked)"></checkbox>
			<div class="info">
				<div class="time">
					{{ "" | datediff: data.times['START'].date : data.times['END'].date }}
				</div>
			</div>
		</div>
		<div class="row-two">
			<div class="location">
				<i class="fa fa-map-marker map-icon" aria-hidden="true"></i>
				<span class="text">{{data.locationText}}</span>
			</div>
			<div class="time-range">
				<div class="period">{{data.times['START'].date | date:"h:mma"}} - {{data.times['END'].date | date:"h:mma"}}</div>
			</div>
		</div>
	</div>
</div>