extends layout

block variables
	- var active = 'messages'

block title 
	|  - Messages

block content
	include _header

	.container
		.row(ng-controller='MessagesCtrl')
			link(
				ng-repeat='contact in contacts | orderByPriority'
				rel="prerender", 
				ng-href="http://images.weserv.nl/?url=upload.wikimedia.org/wikipedia/commons/{{contact.img}}&h=120&w=120&t=square"
			)
			.modal.fade#newMessage
				.modal-dialog
					.modal-content
						.modal-header
							button.close(type="button" class="close" data-dismiss="modal" aria-hidden="true") ×
							h4 New Message
						.modal-body
							form(role="form")
								.form-group 
									input.form-control(type="text" placeholder="To:")
								.form-group 
									textarea.form-control(placeholder="Message" rows="10")
						.modal-footer
							button.btn.btn-default(type="button" data-dismiss="modal") Cancel
							button.btn.btn-primary(type="button" data-dismiss="modal") Send Message
			div.col-sm-12.col-md-3
				h1 Messages
				p.lead
					a(data-toggle="modal" data-target="#newMessage" href="#") New
				article.panel.panel-default
					.panel-heading 
						input.form-control(type='text', ng-model='threadInput', placeholder='Search Threads')
					.list-group.ks-beforeload
						p.list-group-item Loading...
					.list-group.ks-afterload
						a.list-group-item(
							sly-repeat='thread in threads | orderByPriority | filter: threadInput'
							ng-click='setSelectedThread(thread)'
							href="#message"
							ng-class="{'active': selectedThread.threadId == thread.threadId }"
						) 
							.media(ng-if="contacts[thread.messages[0].contactId].img")
								img.media-object.img-rounded.pull-left(ng-src="http://images.weserv.nl/?url=upload.wikimedia.org/wikipedia/commons/{{contacts[thread.messages[0].contactId].img}}&h=128&w=128&t=square", style="width: 64px;")
								.media-body
									h4.media-heading {{thread.subject}}
									p.text-muted(style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;") {{thread.messages[0].text}}
			div#message(style="padding-top: 50px;")
				nav.navbar.navbar-default.visible-sm.visible-xs
					.container
						ul.nav.navbar-nav	
							li
								a(href="#") 
									span.glyphicon.glyphicon-chevron-left 
									|  Messages
			div.col-sm-12.col-md-9.ks-afterload
				p.text-muted(ng-hide="threads.$getIndex().length > 0")
					em No messages to display
				.text-muted(ng-hide="selectedThread || threads.$getIndex().length == 0")
					em.hidden-xs.hidden-sm Please select a thread from the left
					em.visible-xs.visible-sm Please select a thread from above
					.center-block#ads
				h1 {{selectedThread.subject}}
				br
				.media(ng-repeat='message in selectedThread.messages')
					img.img-rounded.media-object.pull-left(ng-src="http://images.weserv.nl/?url=upload.wikimedia.org/wikipedia/commons/{{contacts[message.contactId].img}}&h=64&w=64&t=square", style="width: 32px;")
					.media-body
						p.lead.pull-left {{contacts[message.contactId].fName}} {{contacts[message.contactId].lName}}
						.clearfix
						p
							em.text-muted Sent at {{message.date}}
						p.readable {{message.text}}

block foot
	include _example-growl