<div ng-controller="DraftsCtrl">
	<div class="row split-view">
		<div class="col-md-6 col-sm-6" id="messages-list-wrap">
			<ul class="messages-list" infinite-scroll='drafts.nextPage()' infinite-scroll-disabled='drafts.busy' infinite-scroll-distance='1' infinite-scroll-box="messages-list-wrap">
				<li ng-repeat="drf in drafts.items" ng-click="drfClick(drf)" ng-class="{'active': drf.ID == drafts.activeItem}">
					<table>
						<tr>
							<td><span class="message-subject">{{drf.Subject}}</span></td>
							<td><span class="message-date">{{drf.ModTime | date:'MM/dd/yyyy @ h:mm a'}}</span></td>
						</tr>
						<tr>
							<td ng-repeat="g in drf.GroupList">
								<span class="message-template">{{g.GroupName}}</span>
							</td>
							<td ng-repeat="a in drf.AccountList">
								<span class="message-group">{{a.AccountName}}</span>
							</td>
						</tr>
					</table>							
					<span class="message-links" ng-if="subSection !== 'trash'"><a href="#/workplaces/{{workplace.ID}}/drafts/{{drf.ID}}/edit">Edit Message</a> | <a href="#" ng-click="drfDelete($event, drf)">Delete</a></span>

					<span class="message-links" ng-if="subSection == 'trash'"><a ng-click="drfRestore($event, drf)">Restore</a> | <a class="text-danger" href="#" ng-click="drfDelete($event, drf)">Delete</a></span>				
				</li>
				<li class="message-list-info" ng-show="drafts.busy">Loading data...</li>
				<li class="message-list-info" ng-show="!drafts.items.length && drafts.noMoreData">No drafts here yet</li>
			</ul>
		</div>
		<div class="col-md-6 col-sm-6" ng-class="{ 'show': showPreview }" id="preview-container"></div>
	</div>		
</div>		
