{% extends "base.html" %}
{% load thumbnail %}


{% block title %}Edit Profile{% endblock %}

{% block extrahead %}
	{# Bring in jquery-ui and its theme #}
	<link type="text/css" href="{{STATIC_URL}}js/jquery-ui/css/eggplant/jquery-ui-1.8rc1.custom.css" rel="Stylesheet" />	
	<script type="text/javascript" src="{{STATIC_URL}}js/jquery-ui/js/jquery-ui-1.8rc1.custom.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	
		jQuery("#formatting").dialog({
		      bgiframe: true, autoOpen: false, height: 570, width: 550, modal: false
		    });
		
		jQuery("#adding_media").dialog({
		      bgiframe: true, autoOpen: false, height: 500, width: 650, modal: false
		    });	
	});
	</script>
	
	{# form.media #}  {# -- js for tinymce #}
	<script type="text/javascript" src="/static/js/tiny_mce/tiny_mce.js"></script>
	
{% endblock %}

{% block content %}

{# Hidden divs - revealed by jquery dialog #}

<div id="adding_media" title="Adding images and video">
	{% include 'media_instr.html' %}
</div>


{% if form.errors %}
	<ul id="messagelist">
		<p>The following required fields are missing:</p>
		{% for error in form.errors %}
		<li class="error">{{ error }}</li>
		{% endfor %}
	</ul>
{% endif %}


{# Reusable avatar code #}
{% if not profile.avatar %}
	{% include 'profiles/avatar.html' %}	
{% endif %}



<h2>Edit profile for {{ user.first_name }} {{ user.last_name }} ({{user}})</h2>



<div class="clear"></div>

<h1>Tell us about yourself...</h1>

<form enctype="multipart/form-data" method="post" action="" style="margin-top:20px;">

	{% csrf_token %}
	
	<div class="fieldWrapper">
	{{form.avatar.label_tag}}
	{% if profile.avatar %}
	{% thumbnail profile.avatar "100x100" crop="center" as im %}
	    <a href="{% url list_view profile.user.username %}"><img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}" alt="{{profile}}'s avatar image" /></a>
	{% endthumbnail %}<br />
	
	   {# <img src="{% thumbnail profile.avatar 100x100 quality=70 %}" />	<br /> #}
	{% endif %}
	{{form.avatar}}<br />
	{{form.avatar.help_text|safe}}
	</div>	

	<div class="fieldWrapper">
	{{form.about.label_tag}}
	{{form.about.help_text|safe}}<br />
	
	<a style="margin-right:30px;" href="#" onclick="jQuery('#adding_media').dialog('open'); return false">&#x238B; You can add images and video to your profile!</a>
	{{form.about}}
	
	</div>
	
	<div class="fieldWrapper">
	{{form.email.label_tag}}
	{{form.email}}<br />
	{{form.email.help_text}}
	</div>	
	

	
	<div class="fieldWrapper">
	{{form.city.label_tag}}
	{{form.city}}
	</div>

	<div class="fieldWrapper">
	{{form.state.label_tag}}
	{{form.state}}
	</div>
	

	<div class="fieldWrapper">
	{{form.country.label_tag}}
	{{form.country}}
	</div>	
	
	<div class="fieldWrapper">
	{{form.twitter.label_tag}}
	{{form.twitter}}<br />
	{{form.twitter.help_text|safe}}	
	</div>
	
	<div class="fieldWrapper">
	{{form.facebook.label_tag}}
	{{form.facebook}}<br />
	{{form.facebook.help_text|safe}}
	</div>	
	
	<div class="fieldWrapper inline">
	{{form.allow_contact}} {{form.allow_contact.label_tag}}
	</div>
	
	<div class="fieldWrapper inline">
	{{form.email_updates}} {{form.email_updates.label_tag}}
	</div>
	
	<div class="fieldWrapper inline">
	{{form.email_on_follow}} {{form.email_on_follow.label_tag}}
	</div>	
	
	<div class="fieldWrapper inline">
	{{form.email_site_news}} {{form.email_site_news.label_tag}}
	</div>				
	
	<p><input class="button blue" type="submit" value="Update profile" /> </p>

	<p>
		<a href="/accounts/password/change/" class="button small blue">&raquo; Change password &laquo;</a> 
		<a href="{% url profile_settings %}" class="button small blue">&raquo; Account settings &laquo;</a> 
		<a href="{% url account_del %}" class="button small blue">&raquo; Delete account &laquo;</a> 		
	</p>


</form>
{% endblock content %}

