{{#if data.id}}
	<h1>Edit Queue</h1>
{{else}}
	<h1>Create Queue</h1>
{{/if}}

<form id="queue-form" class="form-vertical">
    <div class="control-group">
        <label class="control-label" for="queue-name">Name</label>
        <div class="controls">
            <input class="js-to-serialize" type="text" value="{{ data.name }}" name="name" data-toggle="tooltip"
				id="queue-name" title="Friendly name for this Queue">
        </div>
    </div>

	<div id="accordion" class="accordion-light">

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent=".accordion-light" href="#queue-agents-wrapper" class="collapsed">
						<i class="fa fa-accordion-mark"></i>
						<span>Agents</span>
					</a>
				</h4>
			</div>
			<div id="queue-agents-wrapper" class="panel-collapse collapse">
				<div class="panel-body queue-agents-content" id="queue-agents-content"></div>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent=".accordion-light" href="#queue-settings" class="collapsed">
						<i class="fa fa-accordion-mark"></i>
						<span>Queue settings</span>
					</a>
				</h4>
			</div>
			<div id="queue-settings" class="panel-collapse collapse">
				<div class="panel-body">
					<div class="control-group">
						<span class="control-label"></span>
						<div class="controls">
							<div class="checkbox">
								<label>
									<input class="js-to-serialize" type="checkbox" value="" name="record_caller"
										   {{#if data.record_caller }}checked="checked"{{/if}} >
									<span data-toggle="tooltip" title="You can also change individual agent's recording settings under the Agent's section">Call Recording</span>
								</label>
							</div>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-music-on-hold">Music on Hold</label>
						<div class="controls">
							<select class="js-to-serialize" name="moh" id="queue-music-on-hold" data-toggle="tooltip" title="Select the media file that you want to be played by default when it's not set on a user or a device.">
								{{#each media_list}}
									{{#compare @root.data.moh "===" id}}
										<option id="{{ id }}" value="{{ id }}" selected="selected">{{ name }}</option>
									{{else}}
										<option id="{{ id }}" value="{{ id }}">{{ name }}</option>
									{{/compare}}
								{{/each}}
							</select>
							<a href="#" class="js-edit-media dynamic-link">Edit</a>
							<a href="#" class="js-create-media dynamic-link">Create</a>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-strategy">Strategy</label>
						<div class="controls">
							<select class="js-to-serialize" id="queue-strategy" name="strategy" data-toggle="tooltip" title="The queue strategy for connecting agents to caller">
								{{#compare data.strategy "===" "most_idle"}}
									<option value="round_robin">Round Robin</option>
									<option value="most_idle" selected="selected">Most Idle</option>
								{{else}}
									<option value="round_robin" selected="selected">Round Robin</option>
									<option value="most_idle">Most Idle</option>
								{{/compare}}
							</select>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-call-recording-url">Call Recording URL</label>
						<div class="controls">
							<input id="queue-call-recording-url" class="js-to-serialize" type="text"
								   value="{{ data.call_recording_url }}" name="call_recording_url"
								   placeholder="http://xxx.yyy.com/call_recordings" data-toggle="tooltip"
								   title="URL pointing to a server that will host the recording of the calls processed by this queue.">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-agent-wrapup-time">Call Wrap-up Time (s)</label>
						<div class="controls">
							<input class="js-to-serialize" id="queue-agent-wrapup-time" type="text"
								   name="agent_wrapup_time" placeholder="30"
								   value="{{ data.agent_wrapup_time }}" data-toggle="tooltip"
								   title="Automatic break time between calls for the agents in this queue.">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-max-queue-size">Max Number of Calls</label>
						<div class="controls">
							<input class="js-to-serialize" type="text" name="max_queue_size"
								value="{{ data.max_queue_size }}" id="queue-max-queue-size" placeholder="10000"
								data-toggle="tooltip"
								title="How many callers are allowed to wait on hold in the queue (0 for no limit).">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-connection-timeout">Max Hold Time (s)</label>
						<div class="controls">
							<input class="js-to-serialize" type="text" name="connection_timeout"
								value="{{ data.connection_timeout }}" id="queue-connection-timeout" placeholder="30"
								data-toggle="tooltip"
								title="In seconds, how long to try to connect the caller before progressing past the queue callflow action (0 for no limit).">
						</div>
					</div>

					<div class="control-group">
						<span class="control-label"></span>
						<div class="controls">
							<div class="checkbox">
								<label>
									<input class="js-to-serialize" type="checkbox" name="enter_when_empty"
										{{#if data.enter_when_empty }}checked="checked"{{/if}}>
									Allows a caller to enter this queue when no agents are available.
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent=".accordion-light" href="#notifications-settings" class="collapsed">
						<i class="fa fa-accordion-mark"></i>
						<span>Notifications settings</span>
					</a>
				</h4>
			</div>
			<div id="notifications-settings" class="panel-collapse collapse">
				<div class="panel-body">
					<div class="control-group">
						<label class="control-label" for="queue-notifications-hangup">Notification on Hangup</label>
						<div class="controls">
							<input class="js-to-serialize" type="text" name="notifications.hangup"
								value="{{ data.notifications.hangup }}" id="queue-notifications-hangup"
								placeholder="http://xxx.yyy/script_hangup.php" data-toggle="tooltip"
								title="URL for a callback when the call ends to tell the customer on their own servers that a call has ended.">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-notifications-pickup">Notification after Pickup</label>
						<div class="controls">
							<input class="js-to-serialize" type="text" name="notifications.pickup"
								value="{{ data.notifications.pickup }}" id="queue-notifications-pickup"
								placeholder="http://xxx.yyy/script_pickup.php" data-toggle="tooltip"
								title="URL for a callback when the call is picked up to tell the customer on their own servers that a call has been picked up.">
						</div>
					</div>

					<div class="control-group">
						<label class="control-label" for="queue-notifications-method">Method</label>
						<div class="controls">
							<select class="js-to-serialize" name="notifications.method" data-toggle="tooltip"
									id="queue-notifications-method" title="What HTTP method to use">
								{{#compare data.notifications.method "===" "POST"}}
									<option value="GET">GET</option>
									<option value="POST" selected="selected">POST</option>
								{{else}}
									<option value="GET" selected="selected">GET</option>
									<option value="POST">POST</option>
								{{/compare}}
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

    <div class="buttons-wrapper clearfix">
		{{#if data.id}}
			<button class="btn btn-primary js-save-queue" data-queue-id="{{ data.id }}">Save Changes</button>
			<button class="btn btn-danger js-delete-queue" data-queue-id="{{ data.id }}">Delete Queue</button>
		{{else}}
			<button class="btn btn-primary js-save-queue">Create</button>
		{{/if}}
    </div>
</form>