<p ng-if="picturesMainCtrl._work_order_visit_id"><a href="#/pictures/new/{{vm.work_order_visit.id}}" class="btn btn-sm btn-info" title="New Picture">+ New Picture</a></p>
<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-3" ng-repeat="picture in picturesMainCtrl._pictures">
		<div class="panel panel-default" style="visibility: visible; opacity: 1; display: block; transform: translateY(0px);">
			<div class="panel-heading">
				<h2>{{picture.created_at_formatted}}</h2>
				<div class="panel-ctrls">
					<a class="button-icon" title="Delete Picture" ng-click="picturesMainCtrl._removePicture(picture)"><i class="ti ti-close"></i></a>
					<a href="#/pictures/{{picture.id}}/edit" title="Edit Picture" class="button-icon"><i class="ti ti-pencil-alt"></i></a>
				</div>
			</div>
			<div class="panel-body" style="height: 260px; max-height: 260px;">
				<div style="max-height: 200px; margin-bottom: 10px; overflow-y: hidden;">
					<a href="{{picture.url_full}}" target="_blank" title="View Picture">
						<img ng-src="{{picture.url_full}}" style="width: 100%; height: auto;" />
					</a>
				</div>
				<span class="badge" ng-class="{'badge-success': picture.when_formatted == 'After', 'badge-warning': picture.when_formatted == 'Before'}">{{picture.when_formatted}}</span>
			</div>
		</div>
	</div>
</div>
<p class="text-center" ng-show="picturesMainCtrl._pictures.length == 0">No records found</p>