{! admin/util/notifier !}

<form method="post" id="{{_form}}" enctype="multipart/form-data" autocomplete="off">
<div class="row">
	<div class="span6">

<p>
	<label>{"Your name"} <span class="notice" id="name-notice">{"Required field"}</span></label>
	<input type="text" name="name" value="{{ name|quotes }}" />
</p>

<p>
	<label>{"Email address"} <span class="notice" id="email-notice">{"Required field"}</span></label>
	<input type="email" name="email" value="{{ email|quotes }}" autocomplete="off" />
</p>

<p>
	<label>{"New password"} <span class="notice" id="new_pass-notice">{"Must be 6+ characters"}</span></label>
	<input type="password" name="new_pass" value="{{ new_pass|quotes }}" autocomplete="off" />
</p>

<p>
	<label>{"Verify password"} <span class="notice" id="ver_pass-notice">{"Password does not match"}</span></label>
	<input type="password" name="ver_pass" value="{{ ver_pass|quotes }}" autocomplete="off" />
</p>

	</div>
	<div class="span6">

<p>
	<label>{"Profile photo (160x160)"}{% if has_photo %} <a href="{{ saasy\App::href () }}/account/removephoto">{"Remove"}</a>{% end %}</label><br />
	<img src="{{photo}}" width="160" height="160" style="padding-bottom: 5px" /><br />
	<span class="notice" id="photo-notice">{"Must be JPG, PNG, or GIF"}<br /></span>
	<input type="file" name="photo" />
</p>

<p><br /><input type="submit" value="{"Update settings"}" /></p>

	</div>
</div>

<hr />

<div class="row">
	<div class="span6">

<p>
	<label>{"Company name"} <span class="notice" id="customer_name-notice">{"Required field"}</span></label>
	<input type="text" name="customer_name" value="{{ customer_name|quotes }}" />
</p>

<p>
	<label>{"Change your domain"}:</label>
	<div class="input-append">
		<input type="text" name="subdomain" id="subdomain" value="{{ subdomain|quotes }}" />
		<span class="add-on">.{{ saasy\App::base_domain () }}</span>
	</div>
	<span class="notice" id="subdomain-notice"><br />{"Domain may be taken by another user. Must contain letters and numbers only."}</span>
</p>

	</div>
	<div class="span6">

<p>
	<label>{"Company logo (250x40)"}{% if has_logo %} <a href="{{ saasy\App::href () }}/account/removelogo">{"Remove"}</a>{% end %}</label><br />
	{% if customer_logo %}
	<img src="{{customer_logo}}" width="250" height="40" style="padding-bottom: 5px" /><br />
	{% else %}
	<img src="/apps/saasy/pix/default.png" width="250" height="40" style="padding-bottom: 5px" /><br />
	{% end %}
	<span class="notice" id="photo-notice">{"Must be JPG, PNG, or GIF"}<br /></span>
	<input type="file" name="customer_logo" />
</p>

<p><br /><input type="submit" value="{"Update settings"}" /></p>

	</div>
</div>
</form>

{% if member_limit !== 0 %}

<hr />

<p style="float: right; margin-top: 18px;">
	<a href="#" id="member-add">{"Add a member"}</a>
</p>

<h2>{"Members"}</h2>

<div id="members" class="row"></div>

<br clear="both" />

<script>
$(function () {
	{% if ! detect ('msie') %}
	$(':file').filestyle ();
	{% end %}
	$.account_members ({
		list: '#members',
		add_button: '#member-add',
		member_tpl: '#member-tpl',
		data: {{ members|json_encode }},
		limit: {{ member_limit }}
	});
});
</script>

<script type="text/html" id="member-tpl">
<div class="member span2">
	<img src="\{{photo}}" width="120" height="100" /><br />
	<a href="mailto:\{{email}}"><b>\{{name}}</b></a><br />
	\{{#if is_owner}}
		{"Owner"}
	\{{else}}
		\{{#if enabled}}
			<a href="#" data-id="\{{id}}" data-name="\{{name}}" class="member-disable">{"Disable"}</a>
		\{{else}}
			<a href="#" data-id="\{{id}}" data-name="\{{name}}" class="member-enable">{"Enable"}</a>
		\{{/if}}
		| <a href="#" data-id="\{{id}}" data-name="\{{name}}" class="member-remove">{"Remove"}</a>
	\{{/if}}
</div>
</script>

<div id="add-member" class="modal">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">x</button>
		<h3>{"Add Member"}</h3>
	</div>
	<div class="modal-body">
		<form id="add-member-form">
			<p>
				<label>{"Member name"} <span class="notice" id="add-member-name-notice">{"Required field"}</span></label>
				<input type="text" id="add-member-name" />
			</p>
			<p>
				<label>
					{"Email address"}
					<span class="notice" id="add-member-email-notice">{"Required field"}</span>
					<span class="notice" id="add-member-email2-notice">{"Email already in use"}</span>
				</label>
				<input type="email" id="add-member-email" />
			</p>
			<p>
				<input type="submit" value="{"Add member"}" />
			</p>
		</form>
	</div>
</div>

<div id="limit-reached" class="modal">
	<div class="modal-body">
		<p>
			{"You have reached the maximum members for your account."}<br />
			<a href="{{ saasy\App::href () }}/account/plans">{"Upgrade to add more members."}</a>
		</p>
		<input type="submit" data-dismiss="modal" value="{"Close"}" />
	</div>
</div>

{% end %}