{% extends "base.html" %}

{% block pageid %}{% endblock %}

{% block bodyclass %}profile{% endblock %}

{% block title %}{{ page_title(_('Edit Your Profile')) }}{% endblock %}

{% block site_css %}
    {{ super() }}
    {{ css('demostudio') }}
    {% if waffle.flag('redesign') %}{{ css('redesign-profile') }}{% endif %}
{% endblock %}

{% block site_js %}
    {{ super() }}
    {{ js('libs/jqueryui') }}
    {{ js('demostudio') }}
    {{ js('libs/tagit') }}
    {{ js('profile') }}
{% endblock %}

{% macro li_field(form, field_name, label='', id='', classes='', note='', image=False, show_label=True) %}
    {% set field = form[field_name] %}
    <li id="field_{{field_name}}" class="field {{ 'type_%s' % field.field.widget.input_type if field.field.widget.input_type }}{{ ' required' if field.field.required }}{{ ' error' if field.errors }} {{classes}}">
        {% if show_label %}
            <label for="id_{{field_name}}">{{label or field.label}}</label>
        {% endif %}
        {{ field|safe }}
        {% if note %}
            <p class="note">{{ note }}</p>
        {% endif %}
        {{ field.errors|safe }}
    </li>
{% endmacro %}

{% block content %}
<section id="content">
<div class="wrap">

  <section id="content-main" class="full">

    <form id="profile-edit" class="submission" method="post" action="">
        {{ csrf() }}
        <h1 class="page-title">{{ profile.user.username }}</h1>
      
      <div class="extra">
        <figure class="acc-avatar">
          <img src="{{ profile.gravatar }}" alt="{{ profile.user.username }}" width="120" height="120" class="photo avatar">
          <figcaption>
              {{ _('Change your avatar at') }} <a href="http://gravatar.com" rel="external">gravatar.com</a>
          </figcaption>
        </figure>
        
        <ul>
            <li><a href="{{ url('devmo.views.profile_view', username=profile.user.username) }}">{{ _('View profile') }}</a></li>
          {# TODO: Implement account deletion #}
          {# <li class="delete"><a href="#">{{ _('Delete my account') }}</a></li> #}
        </ul>
      </div>
      
      <fieldset class="section notitle" id="personal">
        <ul>
            <li id="field_email" class="field type_email required">
                <label for="id_email">{{ _('Email') }}</label>
                {{ user.email }} <a href="{{ url('users.change_email') }}">{{ _('Change') }}</a>
                <input id="id_email" type="hidden" value="{{ user.email }}" name="email"/>
            </li>
          {{ li_field(form, 'beta') }}
          {{ li_field(form, 'fullname') }}
          {{ li_field(form, 'title') }}
          {{ li_field(form, 'organization') }}
          {{ li_field(form, 'location') }}
          {{ li_field(form, 'locale') }}
          {{ li_field(form, 'timezone') }}
          {{ li_field(form, 'irc_nickname') }}

          {% set field = form['bio'] %}
          <li class="wordcount{{ ' error' if field.errors }}">
            <label for="id_bio">{{ _('About Me') }} <span class="note"><b id="bio_wordcount" class="counter">150</b> {{ _('words remaining') }}</span></label> 
            {{ field | safe }}
          </li>

          {% set field = form['interests'] %}
          <li class="{{ ' error' if field.errors }}">
            <strong class="label">{{ _('Interests (tags)') }}</strong>
            <p class="note">{{ _('Separate tags with commas or spaces. Join multi-word tags with double quotes, like "web standards".') }}</p>
            {{ field | safe }}
            {{ field.errors|safe }}
          </li>

          {% set field = form['expertise'] %}
          <li class="{{ ' error' if field.errors }}">
            <strong class="label">{{ _('Areas of Expertise') }}</strong>
            <p class="note">{{ _('Add your interests first, then declare yourself an expert in selected topics.') }}</p>
            {{ field | safe }}
            {{ field.errors|safe }}
          </li>

        </ul>
      </fieldset>

      <fieldset class="section" id="elsewhere">
        <legend><b>{{ _('My Other Profiles') }}</b></legend>
        
        <ul>
            {% for site in profile.website_choices %}
                {% set name = site[0] %}
                {% set meta = site[1] %}
                {{ li_field(form, 
                    'websites_{name}' | f(name=name),
                    classes="site {name}" | f(name=name), 
                    label=meta['label']) }}
            {% endfor %}
        </ul>

      </fieldset>
      
      <p class="fm-submit"><button type="submit">{{ _('Save Changes') }}</button></p>

    </form>



  </section><!-- /#content-main -->
</div>
</section>
{% endblock %}

{% block js %}
<script type="text/javascript">
// <![CDATA[
    var INTEREST_SUGGESTIONS = {{ INTEREST_SUGGESTIONS | jsonencode }};
// ]]>
</script>
{% endblock %}