<template name="agentEdit">
	{{#unless isReady}}
		{{> loading }}
	{{else}}
		<section class="contextual-bar__content">
			<form id="agent-form" data-id="{{agent._id}}">
				<div class="rc-form-group">
					<label class="rc-form-label">
						{{_ "Profile_picture"}}
					</label>
					<div class="rc-select-avatar">
						<div class="rc-select-avatar__preview">
							{{> avatar username=agent.username}}
						</div>
					</div>
				</div>
				<div class="rc-input rc-form-group">
					<label class="rc-input__label">
							<div class="rc-input__title">
								{{_ "Name"}}
							</div>
							<div class="rc-input__wrapper">
									<input name="name" type="text" class="rc-input__element" id="name" autocomplete="off" value="{{agent.name}}" disabled/>
							</div>
					</label>
				</div>
				<div class="rc-input rc-form-group">
						<label class="rc-input__label">
								<div class="rc-input__title">
									{{_ "Username"}}
								</div>
								<div class="rc-input__wrapper">
										<div class="rc-input__icon">
											{{> icon icon='at' }}
										</div>
										<input name="name" type="text" class="rc-input__element" id="username" autocomplete="off" value="{{agent.username}}" disabled/>
								</div>
						</label>
				</div>
				{{#if agent.emails}}
					<div class="rc-form-group">
						<div class="rc-input">
							<label class="rc-input__label">
								<div class="rc-input__title">{{_ "Email"}}</div>
								<div class="rc-input__wrapper">
									<div class="rc-input__icon">
										{{> icon icon='mail' }}
									</div>
									<input name="name" type="text" class="rc-input__element" id="email" autocomplete="off" value="{{agent.emails.[0].address}}" disabled/>
								</div>
							</label>
						</div>
					</div>
				{{/if}}
				{{#if hasAvailableDepartments}}
					<div class="rc-form-group rc-form-group--inline">
						<select id="departmentSelect" class="rc-input rc-input--small rc-form-item-inline">
							<option value="placeholder" disabled selected>{{_ "Select_department"}}</option>
							{{#each dept in availableDepartments}}
								<option value="{{dept._id}}">{{dept.name}}</option>
							{{/each}}
						</select>
						<button id="addDepartment" class="rc-button rc-button--primary rc-form-item-inline"><i class="icon-plus"></i></button>
					</div>
				{{/if}}
				{{#if hasAgentDepartments}}
					<div class="rc-form-group">
						<div class="rc-input">
							<label class="rc-input__label">
								<div class="rc-input__title">{{_ "Departments"}}</div>
								<div class="rc-input__wrapper">
									<ul id="departments" class="chip-container current-agent-departments">
										{{#each dept in agentDepartments}}
											<li data-id="{{dept._id}}" class="remove-department" title="{{dept.name}}">
												{{#if canEditDepartment}}
													<i class="icon icon-cancel-circled"></i>
												{{/if}}
												{{dept.name}}
											</li>
										{{/each}}
									</ul>
								</div>
							</label>
						</div>
					</div>
				{{/if}}
				{{#if customFieldsTemplate}}
					{{> Template.dynamic template=customFieldsTemplate data=agentDataContext }}
				{{/if}}
				<div class="rc-user-info__flex rc-user-info__row">
					<button class='rc-button rc-button--cancel cancel' type="button"><span>{{_ "Cancel"}}</span></button>
					<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
				</div>
			</form>
		</section>
	{{/unless}}
</template>
