<div class="large-4 small-12 columns">
	<div class="hide-for-small panel">
		<h3>Conversations</h3>
		<h5 class="subheader">Allows you to browse and simply manage your conversation history.
		</h5>
	</div>

	<div class="panel">
		<form action="" class="custom">
			<label for="conversation-id">ID</label>
			<input type="number" id="conversation-id" ng-model="filter.id"/>

			<label for="conversation-date-from">Date from</label>
			<input type="date" id="conversation-date-from" ng-model="filter.dateFrom"/>

			<label for="conversation-date-to">Date to</label>
			<input type="date" id="conversation-date-to" ng-model="filter.dateTo"/>

			<div ng-show="users.length > 0">
				<label for="conversation-operator">Operator</label>
				<select id="conversation-operator" ng-model="filter.operator">
					<option value="0">- choose -</option>
					<option ng-repeat="user in users" value="{{user.id}}">{{user.name}}</option>
				</select>
			</div>

			<label for="conversation-fulltext">Fulltext search</label>
			<input type="text" id="conversation-fulltext" ng-model="filter.fulltext"/>
		</form>
	</div>
</div>

<div class="large-8 columns">
	<div class="row">
		<div class="large-12 columns">
			<div class="panel"  ng-repeat="conversation in conversations">
				<div class="row">
					<div class="large-2 small-6 columns conversation-date">
						<strong>{{conversation.date | date:'MM/dd'}}</strong><br/>
						<span>{{conversation.date | date:'yyyy'}}</span>
						<br/>
						<span>{{conversation.date | date:'mediumTime'}}</span>
					</div>

					<div class="large-10 small-6 columns">
						<a href="#/conversation/{{conversation.id}}">
							ID: <strong>{{conversation.id}}</strong>,
							Operator: <strong>{{conversation.operatorName}}</strong>
						</a>

						<div class="conversation-note">
							<i>Note: </i>
							{{conversation.note}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

