<p class="lead" style="min-width: 300px;">
	<i class="fa fa-bulblight"></i> Your Reminders
	<span class="btn pull-right" ng-click="showModal()"><i class="fa fa-plus"></i> New reminder</span>
</p>

<div data-tabset>
	<div data-tab data-heading="Open">
		<div class="chat-messages">
			<table class="table table-hover table-no-header" ng-if="(reminders | filter:{completed: '0'}).length > 0">
				<tbody>
					<tr ng-repeat="reminder in reminders | filter:{completed: '0'} | orderBy:'remind_at'" ng-class="{warning: reminder.highlight}">
						@include('reminders::partials.item')
					</tr>
				</tbody>
			</table>

			<p ng-hide="(reminders | filter:{completed: 0}).length > 0"><i class="fa fa-info-circle"></i> You have no reminders</p>
		</div>
	</div>
	<div data-tab data-heading="Completed">
		<div class="chat-messages">
			<table class="table table-hover table-no-header" ng-if="(reminders | filter:{completed: '1'}).length > 0">
				<tbody>
					<tr ng-repeat="reminder in reminders | filter:{completed: '1'} | orderBy:'remind_at'" ng-class="{warning: reminder.highlight}">
						@include('reminders::partials.item')
					</tr>
				</tbody>
			</table>

			<p ng-hide="(reminders | filter:{completed: '1'}).length > 0"><i class="fa fa-info-circle"></i> You have no reminders</p>
		</div>
	</div>
</div>