<div>
	<div>
		<div class="whapp-header clearfix">
			<h1>{{ i18n.callflows.device.view_mobile_phone }}</h1>
			<div class="buttons-right pasted view-buttons">
				<button class="btn black basic activate">{{ i18n.callflows.device.basic }}</button>
				<button class="btn black advanced">{{ i18n.callflows.device.advanced }}</button>
			</div>
		</div>
	</div>
	<div>
		<ul class="tabs" data-tabs="tabs">
			<li class="active"><a href="#basic">{{ i18n.callflows.device.basic }}</a></li>
			<li><a href="#caller_id">{{ i18n.callflows.device.caller_id }}</a></li>
			<li><a href="#restrictions">{{ i18n.callflows.device.restrictions }}</a></li>
		</ul>
		<form id="device-form" action="" method="post">
			<div class="pill-content">
				<div class="active basic_view" id="basic">
					<div class="clearfix">
						<label for="name">{{ i18n.callflows.device.device_nickname }}</label>
						<div class="input">
							<div class="text">{{ data.name }}</div>
						</div>
					</div>

					{{#unless field_data.hide_owner}}
						<div class="clearfix">
							<label for="owner_id">{{ i18n.callflows.device.assign_to }}</label>
							<div class="input">
								<div class="text">{{field_data.users.first_name}} {{field_data.users.last_name}}</div>
							</div>
						</div>
					{{/unless}}

					<div class="clearfix">
						<label for="sip_realm">{{ i18n.callflows.device.realm }}</label>
						<div class="input">
							<div class="text">{{ field_data.sip.realm }}</div>
						</div>
					</div>

					<div class="clearfix">
						<label for="sip_username">{{ i18n.callflows.device.username }}</label>
						<div class="input">
							<div class="text">{{ data.sip.username }}</div>
						</div>
					</div>

					<div class="clearfix">
						<label for="sip_password">{{ i18n.callflows.device.password }}</label>
						<div class="input">
							<div class="text">{{ data.sip.password }}</div>
						</div>
					</div>

					<div class="clearfix">
						<label for="name">{{ i18n.callflows.device.mdn }}</label>
						<div class="input">
							<div class="text">{{ data.mobile.mdn }}</div>
						</div>
					</div>

					<div class="clearfix hidden">
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<span rel="popover" data-content="{{ i18n.callflows.device.enabled_data_content }}">
											<input type="checkbox" id="enabled" name="enabled"{{#if data.enabled}} checked="checked"{{/if}} />
											<span>{{ i18n.callflows.device.enabled }}</span>
										</span>
									</label>
								</li>
							</ul>
						</div>
					</div>

					<input type="hidden" value="{{ data.device_type }}" name="device_type"/>
				</div>

				<div id="caller_id">
					<div class="clearfix">
						<label for="name">{{ i18n.callflows.device.presence_id }}</label>
						<div class="input">
							<input class="span4" id="presence_id" name="presence_id" type="text" placeholder="{{ i18n.callflows.device.presence_id_placeholder }}" value="{{ data.presence_id }}" rel="popover" data-content="{{ i18n.callflows.device.presence_id_help }}"/>
						</div>
					</div>

					<h3>{{ i18n.callflows.device.in_house_calls }}</h3>
					<div class="clearfix">
						<label for="caller_id_name_internal">{{ i18n.callflows.device.caller_id_name }}</label>
						<div class="input">
							<input class="span4" id="caller_id_name_internal" name="caller_id.internal.name" type="text" placeholder="{{ i18n.callflows.device.name }}" value="{{ data.caller_id.internal.name }}"  rel="popover" data-content="{{ i18n.callflows.device.caller_id_name_data_content }}" />
						</div>
					</div>

					<div class="clearfix">
						<label for="caller_id_number_internal">{{ i18n.callflows.device.caller_id_number }}</label>
						<div class="input">
							<input class="span4" id="caller_id_number_internal" name="caller_id.internal.number" type="text" placeholder="+15555555555" value="{{ data.caller_id.internal.number }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_number_data_content }}" data-mask="phoneNumber" />
						</div>
					</div>
					<hr />

					<h3>{{ i18n.callflows.device.outbound_calls }}</h3>
					<div class="clearfix">
						<label for="caller_id_name_external">{{ i18n.callflows.device.caller_id_name }}</label>
						<div class="input">
							<input class="span4" id="caller_id_name_external" name="caller_id.external.name" type="text" placeholder="{{ i18n.callflows.device.name }}" value="{{ data.caller_id.external.name }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_name_data_content2 }}"/>
						</div>
					</div>

					<div class="clearfix">
						<label for="caller_id_number_external">{{ i18n.callflows.device.caller_id_number }}</label>
						<div class="input">
							<input class="span4" id="caller_id_number_external" name="caller_id.external.number" type="text" placeholder="+15555555555" value="{{ data.caller_id.external.number }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_number_data_content2 }}" data-mask="phoneNumber" />
						</div>
					</div>

					<div class="clearfix hidden">
						<label for="caller_id_name_emergency">{{ i18n.callflows.device.caller_id_name }}</label>
						<div class="input">
							<input class="span4" id="caller_id_name_emergency" name="caller_id.emergency.name" type="text" placeholder="{{ i18n.callflows.device.name }}" value="{{ data.caller_id.emergency.name }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_name_data_content3 }}" />
						</div>
					</div>

					<div class="clearfix hidden">
						<label for="caller_id_number_emergency">{{ i18n.callflows.device.caller_id_number }}</label>
						<div class="input">
							<input class="span4" id="caller_id_number_emergency" name="caller_id.emergency.number" type="text" placeholder="+15555555555" value="{{ data.caller_id.emergency.number }}" rel="popover" data-content="{{ i18n.callflows.device.aller_id_number_data_content3 }}" data-mask="phoneNumber" />
						</div>
					</div>
					<hr />

				{{#if showPAssertedIdentity}}
					<h3>{{ i18n.callflows.device.asserted }}</h3>
					<div class="clearfix">
						<label for="advanced_caller_id_name_asserted">{{ i18n.callflows.device.caller_id_name }}</label>
						<div class="input">
							<input class="span4" id="advanced_caller_id_name_asserted" name="caller_id.asserted.name" type="text" placeholder="{{ i18n.callflows.device.name }}" value="{{ data.caller_id.asserted.name }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_name_data_content4 }}" />
						</div>
					</div>

					<div class="clearfix">
						<label for="advanced_caller_id_number_asserted">{{ i18n.callflows.device.caller_id_number }}</label>
						<div class="input">
							<input class="span4" id="advanced_caller_id_number_asserted" name="caller_id.asserted.number" type="text" placeholder="+15555555555" value="{{ data.caller_id.asserted.number }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_number_data_content4 }}" data-mask="phoneNumber" />
						</div>
					</div>

					<div class="clearfix">
						<label for="advanced_caller_id_realm_asserted">{{ i18n.callflows.device.caller_id_realm }}</label>
						<div class="input">
							<input class="span4" id="advanced_caller_id_realm_asserted" name="caller_id.asserted.realm" type="text" placeholder="{{ i18n.callflows.device.caller_id_realm_placeholder }}" value="{{ data.caller_id.asserted.realm }}" rel="popover" data-content="{{ i18n.callflows.device.caller_id_realm_data_content4 }}" />
						</div>
					</div>
				{{/if}}
				</div>

				<div id="sip_settings">
					<div class="clearfix">
						<label for="sip_method">{{ i18n.callflows.device.authentication_method }}</label>
						<div class="input">
							<select name="sip.method" id="sip_method" class="medium" rel="popover" data-content="{{ i18n.callflows.device.authentication_method_data_content }}">
								{{#select data.sip.method}}
									{{#each field_data.sip.methods}}
										{{#compare key "!=" "ip"}}
											<option value="{{ @key }}">{{ this }}</option>
										{{/compare}}
									{{/each}}
								{{/select}}
							</select>
						</div>
					</div>

					<div class="clearfix">
						<label for="sip_invite_format">{{ i18n.callflows.device.invite_format }}</label>
						<div class="input">
							<select name="sip.invite_format" id="sip_invite_format" class="medium" rel="popover" data-content="{{ i18n.callflows.device.invite_format_data_content }}">
								{{#select data.sip.invite_format}}
									{{#each field_data.sip.invite_formats}}
										<option value="{{ @key }}">{{ this }}</option>
									{{/each}}
								{{/select}}
							</select>
						</div>
					</div>

					<div class="clearfix">
						<label for="sip_expire_seconds">{{ i18n.callflows.device.expire_seconds }}</label>
						<div class="input">
							<input class="span4" id="sip_expire_seconds" name="sip.expire_seconds" type="text" placeholder="{{ i18n.callflows.device.expire_seconds }}" value="{{ data.sip.expire_seconds }}" rel="popover" data-content="{{ i18n.callflows.device.expire_seconds_data_content }}" required/>
						</div>
					</div>
				</div>

				<div id="audio_settings">
					<div class="clearfix">
						<label for="music_on_hold">{{ i18n.callflows.device.music_on_hold }}</label>
						<div class="input">
							<span rel="popover" data-content="{{ i18n.callflows.device.music_on_hold_data_content }}">
								<select name="music_on_hold.media_id" id="music_on_hold_media_id" class="medium">
									{{#select data.music_on_hold.media_id}}
										{{#each field_data.music_on_hold}}
											<option id="{{ id }}" value="{{ id }}">{{ name }}</option>
										{{/each}}
									{{/select}}
								</select>
								<div class="edit_create">
									<a id="edit_link_media" class="inline_action_media" data-action="edit" href="#">{{ i18n.callflows.device.edit }}</a>
									<a class="inline_action_media" data-action="create" href="#">{{ i18n.callflows.device.create }}</a>
								</div>
							</span>
						</div>
					</div>

					<div class="clearfix shoutcast-div{{#if extra.isShoutcast}} active{{/if}}">
						<label for="extra.shoutcastUrl">{{ i18n.callflows.accountSettings.musicOnHold.shoutcastURL }}</label>
						<div class="input">
							<input type="text" class="shoutcast-url-input" name="extra.shoutcastUrl" value="{{extra.shoutcastValue}}" rel="popover" data-content="{{ i18n.callflows.accountSettings.musicOnHold.shoutcastURLHelp }}"/>
						</div>
						<div class="shoutcast-warning">
							{{#monsterText 'warning'}}
								{{ i18n.callflows.accountSettings.musicOnHold.shoutcastURLWarning }}
							{{/monsterText}}
						</div>
					</div>

					<div class="clearfix">
						<label for="media_peer_to_peer">{{ i18n.callflows.device.peer_to_peer_audio }}</label>
						<div class="input">
							<select name="media.peer_to_peer" id="media_peer_to_peer" class="medium" rel="popover" data-content="{{ i18n.callflows.device.peer_to_peer_audio_data_content }}">
								{{#select data.media.peer_to_peer}}
									{{#each field_data.media.peer_to_peer_options}}
										<option value="{{ @key }}">{{ this }}</option>
									{{/each}}
								{{/select}}
							</select>
						</div>
					</div>

					<div class="clearfix">
						<label for="secure_rtp">{{ i18n.callflows.device.secure_rtp }}</label>
						<div class="input">
							<select name="extra.encryptionMethod" id="secure_rtp" class="medium" rel="popover" data-content="{{ i18n.callflows.device.secure_rtp_help }}">
								{{#select field_data.media.secure_rtp.value}}
									{{#each field_data.media.secure_rtp.options}}
										<option value="{{ @key }}">{{ this }}</option>
									{{/each}}
								{{/select}}
							</select>
						</div>
					</div>

					{{#each field_data.media.audio.codecs}}
						<div>
							<div class="input">
								<ul class="inputs-list">
									<li>
										<label>
											<input type="checkbox" id="media_audio_codecs" name="media.audio.codecs[]"{{#ifInArray @key ../data.media.audio.codecs}} checked="checked"{{/ifInArray}} rel="popover" data-content="" value="{{ @key }}"/>
											<span>{{ this }}</span>
										</label>
									</li>
								</ul>
							</div>
						</div>
					{{/each}}
				</div>

				<div id="video_settings">
					{{#each field_data.media.video.codecs}}
						<div class="clearfix">
							<div class="input">
								<ul class="inputs-list">
									<li>
										<label>
											<input type="checkbox" id="media_video_codecs" name="media.video.codecs[]"{{#ifInArray @key ../data.media.video.codecs}} checked="checked"{{/ifInArray}} rel="popover" data-content="" value="{{ @key }}"/>
											<span>{{ this }}</span>
										</label>
									</li>
								</ul>
							</div>
						</div>
					{{/each}}
				</div>

				<div id="options">
					<div class="clearfix">
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<span rel="popover" data-content="{{ i18n.callflows.device.t_38_data_content }}">
											<input id="media_fax_option" type="checkbox" name="media.fax_option"{{#if data.media.fax_option}} checked="checked"{{/if}} />
											<span>{{ i18n.callflows.device.t_38 }}</span>
										</span>
									</label>
								</li>
							</ul>
						</div>
					</div>

					<div class="clearfix">
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<span rel="popover" data-content="{{ i18n.callflows.device.hide_from_contact_list_data_content }}">
											<input id="contact_list_exclude" type="checkbox" name="contact_list.exclude"{{#if data.contact_list.exclude}} checked="checked"{{/if}} />
											<span>{{ i18n.callflows.device.hide_from_contact_list }}</span>
										</span>
									</label>
								</li>
							</ul>
						</div>
					</div>

					<div class="clearfix">
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<span rel="popover" data-content="{{ i18n.callflows.device.ignore_completed_elsewhere_data_content }}">
											<input id="ignore_completed_elsewhere" type="checkbox" name="ignore_completed_elsewhere"{{#if data.ignore_completed_elsewhere}} checked="checked"{{/if}} />
											<span>{{ i18n.callflows.device.ignore_completed_elsewhere }}</span>
										</span>
									</label>
								</li>
							</ul>
						</div>
					</div>
					<input type="hidden" name="extra.notify_unregister" value="false"/>
				</div>

				<div id="restrictions">
					<div class="clearfix">
						<div class="input">
							<ul class="inputs-list">
								<li>
									<label>
										<span rel="popover" data-content="{{ i18n.callflows.device.closed_groups_data_content }}">
											<input type="checkbox" name="extra.closed_groups"{{#compare data.call_restriction.closed_groups.action "===" "deny"}} checked="checked"{{/compare}}/>
											<span>{{ i18n.callflows.device.closed_groups }}</span>
										</span>
									</label>
								</li>
							</ul>
						</div>
					</div>

					{{#each field_data.call_restriction}}
					<div class="clearfix">
						<label>{{ this.friendly_name }}</label>
						<div class="input">
							<select name="call_restriction.{{ @key }}.action" class="medium" rel="popover">
								{{#select this.value }}
									<option value="deny">{{ @root.i18n.callflows.device.deny }}</option>
									<option value="inherit">{{ @root.i18n.callflows.device.inherit }}</option>
								{{/select}}
							</select>
						</div>
					</div>
					{{/each}}
				</div>
			</div>
		</form>
		<div class="buttons-wrapper">
			<button class="monster-button monster-button-success device-save">{{ i18n.callflows.device.save }}</button>
		</div>
	</div>
</div>
