<div ng-controller="TemplatesCtrl">
	<div class="row split-view">
		<div class="col-md-6 col-sm-6" id="messages-list-wrap">
			<ul class="messages-list" infinite-scroll='templates.nextPage()' infinite-scroll-disabled='templates.busy' infinite-scroll-distance='1' infinite-scroll-box="messages-list-wrap">
				<li ng-repeat="tpl in templates.items" ng-click="tplClick(tpl)" ng-class="{'active': tpl.ID == templates.activeItem}">
					<table>
						<tr>
							<td><span class="message-subject">{{tpl.Subject}}</span></td>
							<td><span class="message-date">{{tpl.ModTime | date:'MM/dd/yyyy @ h:mm a'}}</span></td>
						</tr>
						<tr>
							<td ng-repeat="g in tpl.GroupList">
								<span class="message-template">{{g.GroupName}}</span>
							</td>
							<td ng-repeat="a in tpl.AccountList">
								<span class="message-group">{{a.AccountName}}</span>
							</td>
						</tr>
					</table>							
					<span class="message-links" ng-if="sub !== 'trash'"><a href="#/workplaces/{{workplace.ID}}/templates/{{tpl.ID}}/edit" em-nobubble>Edit Template</a> | <a ng-click="tplCreateMsg($event, tpl)">Create New Message</a> | <a class="text-danger" ng-click="tplDelete($event, tpl)">Delete</a></span>
					<span class="message-links" ng-if="sub == 'trash'"><a ng-click="tplRestore($event, tpl)">Restore</a> | <a class="text-danger" ng-click="tplDelete($event, tpl)">Delete</a></span>					
				</li>
				<li class="message-list-info" ng-show="templates.busy">Loading data...</li>
				<li class="message-list-info" ng-show="!templates.items.length && templates.noMoreData">No templates here yet</li>
			</ul>
		</div>
		<div class="col-md-6 col-sm-6" ng-class="{ 'show': showPreview }" id="preview-container"></div>
	</div>		
</div>		
