<div>
	<div>
		<div class="whapp-header clearfix">
			{{#if data.id}}
				<h1>{{ i18n.callflows.directory.edit_directory }}</h1>
			{{else}}
				<h1>{{ i18n.callflows.directory.create_directory }}</h1>
			{{/if}}
			<div class="buttons-right pasted view-buttons">
				<button class="btn black basic activate">{{ i18n.callflows.directory.basic }}</button>
				<button class="btn black advanced">{{ i18n.callflows.directory.advanced }}</button>
			</div>
		</div>
	</div>
	<div>
		<ul class="tabs" data-tabs="tabs">
			<li class="active"><a href="#basic">{{ i18n.callflows.directory.basic }}</a></li>
			<li><a href="#options"><i class="fa fa-wrench"></i>{{ i18n.callflows.directory.options }}</a></li>
		</ul>
		<form id="directory-form" action="" method="post">
			<div class="pill-content">
				<div class="active basic_view" id="basic">
					<div class="clearfix">
						<label for="name">{{ i18n.callflows.directory.name }}</label>
						<div class="input">
							<input class="span4" id="name" name="name" type="text" placeholder="{{ i18n.callflows.directory.name }}" value="{{ data.name }}" rel="popover" data-content="{{ i18n.callflows.directory.name_data_content }}" required/>
						</div>
					</div>

					<div class="clearfix">
						<div id="tab_users">
							<div class="row row-user title">
								<div class="column first">
									<i class="fa fa-users"></i>
									{{ i18n.callflows.directory.user }}
								</div>
								<div class="column second">
									<i class="fa fa-link"></i>
									{{ i18n.callflows.directory.callflow }}
								</div>
								<div class="column third">
									{{ i18n.callflows.directory.remove }}
								</div>
							</div>
							<div class="rows"></div>
						</div>

						<div class="add_user">
							<div class="add_user_title">{{ i18n.callflows.directory.add_user }}</div>
							<div class="add_content_wrapper">
								<div class="add_user_fields">
									<ul class="controls">
										<div id="user_list_select">
											<li>
												<label>{{ i18n.callflows.directory.user }}</label>
												<select name="select_user_id" id="select_user_id">
													<option id="empty_option_user" value="empty_option_user">-- {{ i18n.callflows.directory.select }} --</option>
													{{#each field_data.users}}
														<option value="{{ id }}" id="option_user_{{ id }}">{{ first_name }} {{ last_name }}</option>
													{{/each}}
												</select>
											</li>
											<div class="clear"/>
										</div>
										<li id="callflow_li">
											</span>
											<label>{{ i18n.callflows.directory.callflow }}</label>
											<select name="callflow_id" id="callflow_id">
												<option id="empty_option_callflow" value="empty_option_callflow">-- {{ i18n.callflows.directory.select }} --</option>
												{{#each field_data.callflows}}
													<option value="{{ id }}" id="option_callflow_{{ id }}">
														&nbsp;
														{{#if name}}
															{{name}}&nbsp;
														{{else}}
															{{#each numbers}} {{this}}&nbsp;{{/each}}
														{{/if}}
													</option>
												{{/each}}
											</select>
										</li>
										<div class="clear"/>
									</ul>
								</div>
								<div class="add_user_div">
									<span class="fa fa-plus-circle"/>&nbsp;
									<a class="add_user_link" href="javascript:void(0);" data-directory_id="{{ data.id }}">{{ i18n.callflows.directory.add_this_user }}</a>
									<div class="clear"/>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div id="options">
					<div class="clearfix">
						<label for="min_dtmf">{{ i18n.callflows.directory.minimum_number_of_input }}</label>
						<div class="input">
							<input class="span4" id="min_dtmf" name="min_dtmf" type="text" placeholder="{{ i18n.callflows.directory.minimum_number_of_input_placeholder }}" value="{{ data.min_dtmf }}" rel="popover" data-content="{{ i18n.callflows.directory.minimum_number_of_input_data_content }}"/>
						</div>
					</div>

					<div class="clearfix">
						<label for="max_dtmf">{{ i18n.callflows.directory.max_number_of_input }}</label>
						<div class="input">
							<input class="span4" id="max_dtmf" name="max_dtmf" type="text" placeholder="{{ i18n.callflows.directory.max_number_of_input_placeholder }}" value="{{ data.max_dtmf }}" rel="popover" data-content="{{ i18n.callflows.directory.max_number_of_input_data_content }}"/>
						</div>
					</div>

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

					<div class="clearfix">
						<label for="sort_by">{{ i18n.callflows.directory.sort_by }}</label>
						<div class="input">
							<select name="sort_by" id="sort_by" class="medium" rel="popover" data-content="{{ i18n.callflows.directory.sort_by_data_content }}">
								{{#select data.sort_by}}
									{{#each field_data.sort_by}}
										<option value="{{ @key }}">{{ this }}</option>
									{{/each}}
								{{/select}}
							</select>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div class="buttons-wrapper">
			{{#if data.id}}
				<button class="monster-button monster-button-danger directory-delete">{{ i18n.callflows.directory.delete }}</button>
			{{/if}}
			<button class="monster-button monster-button-success directory-save">{{ i18n.callflows.directory.save }}</button>
		</div>
	</div>
</div>
