<div class="top-pad"></div>

<div class="content-padding" ng-show="ready">

	<h1 class="title left"><i class="fa fa-hand-paper-o"></i><span>Community Director</span></h1>

	<div class="divider"></div>

	<div>

		<form name="form" novalidate>

			<div class="support-box-wrap box-content2">

				<div class="support-box-wrap-header">
					<h1>Basic Info</h1>
					<div class="divider"></div>
				</div>

				<div class="no-box-content-color">

					<ul ng-class="{'submitted':submitted}" class="ul-inputs">

						<li class="li-input" ng-class="{'error':form.staffName.$invalid}">
							<div class="label">Name:</div>
							<div class="input"><input type="text" name="staffName" ng-model="staff.name" required placeholder="Name" ng-minlength="5" ng-maxlength="40" ></div>
							<div class="box-error">
								<small ng-show="form.staffName.$error.required">Required.</small>
								<small ng-show="form.staffName.$error.minlength">Name is too short. Name is required to be at least 5 characters.</small>
								<small ng-show="form.staffName.$error.maxlength">Name cannot be longer than 40 characters.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffLogin.$invalid}">
							<div class="label">Login:</div>
							<div class="input"><input type="text" name="staffLogin" ng-readonly="staff.id_admin" required placeholder="Login" ng-model="staff.login"></div>
							<div class="box-error">
								<small ng-show="form.staffLogin.$error.required">Required.</small>
								<small ng-show="form.staffLogin.$error.isUnique">This login is already in use!</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffPass.$invalid}">
							<div class="label">Password:</div>
							<div class="input"><input type="text" ng-required="!staff.id_admin" name="staffPass" ng-model="staff.pass"></div>
							<small  ng-if="staff.id_admin" class="tip">Leave it blank if you don't wanna change it.</small>
							<div class="box-error">
								<small ng-show="form.staffLogin.$error.required">Required.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffPhone.$invalid}">
							<div class="label">Phone:</div>
							<div class="input"><input type="text" name="staffPhone" ng-model="staff.phone" required placeholder="Phone"></div>
							<div class="box-error">
								<small ng-show="form.staffPhone.$error.required">Required.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':submitted && !staff.id_community}">
			 				<div class="label">Community:</div>
							<ui-select ng-model="staff.id_community" theme="select2" close-on-select="true" style="width: 300px;" title="Select a community">
								<ui-select-match placeholder="Select a community...">{{$select.selected.name}}</ui-select-match>
								<ui-select-choices repeat="community.id_community as community in communities | propsFilter: {name: $select.search}">
									{{community.name}}
								</ui-select-choices>
							</ui-select>
							<div class="box-error">
								<small ng-show="submitted && !staff.id_community">Required.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.staffEmail.$invalid}">
							<div class="label">Email:</div>
							<div class="input"><input type="email" name="staffEmail" ng-model="staff.email" placeholder="Email"></div>
							<div class="box-error">
								<small ng-show="form.staffEmail.$invalid">Enter a valid email.</small>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</form>
	</div>

	<ul class="ul-inputs">
		<li class="li-input" ng-show="!isSaving">
			<button class="button save" ng-click="save();">Save</button>
		</li>
		<li class="li-input" ng-show="isSaving">
			<i class="fa fa-circle-o-notch fa-spin"></i>
		</li>
	</ul>

</div>

<spinner-loading></spinner-loading>
<hack-expand-content></hack-expand-content>