{% extends "base.html" %}
{% from 'includes/common_macros.html' import newsletter_widget, li_field %}
{% block body_attributes %}{% endblock %}

{% block bodyclass %}profile profile-edit{% endblock %}

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

{% block site_css %}
    {{ super() }}
    {{ css('demostudio') }}
    {{ css('jquery-ui') }}
    {{ css('profile') }}
    {{ css('newsletter') }}
    {{ css('submission') }}
{% endblock %}

{% block site_js %}
    {{ super() }}
    {{ js('jquery-ui') }}
    {{ js('demostudio') }}
    {{ js('libs/tagit') }}
    {{ js('profile') }}
    {{ js('newsletter',) }}
{% endblock %}

{% block content %}
  <form class="submission" method="post" action="">
      {{ csrf() }}

    <div class="column-container">

      <div class="column-2">
        <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="{{ profile.user.get_absolute_url() }}">{{ _('View profile') }}</a></li>
            {# TODO: Implement account deletion #}
            {# <li class="delete"><a href="#">{{ _('Delete my account') }}</a></li> #}
          </ul>
        </div>
      </div>

      <div id="profile-edit" class="column-half">
        <h1 class="page-title">{{ profile.user.username }}</h1>

              <fieldset class="section notitle" id="personal">
                <ul>
                  {{ li_field(form, 'beta') }}
                  <li id="field_email" class="field type_email required">
                    <label for="id_email">{{ _('Email') }}</label>
                    {{ profile.user.email }} <a href="{{ url('users.change_email') }}">{{ _('Change') }}</a>
                    <input id="id_email" type="hidden" value="{{ profile.user.email }}" name="email"/>
                  </li>
                  {{ 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'],
                            icon_class=meta['fa_icon']) }}
                    {% endfor %}
                </ul>

              </fieldset>

      </div>

      <div class="column-4"><div class="profile-newsletter-container">
        {{ newsletter_widget(form) }}
        <p class="fm-submit"><button type="submit" class="positive">{{ _('Save Changes') }}<i aria-hidden="true" class="icon-save"></i></button></p>
      </div></div>

    </div>

    <div class="column-container">
      <div class="column-2"></div>
      <div class="column-half">
        <p class="fm-submit"><button type="submit" class="positive">{{ _('Save Changes') }}<i aria-hidden="true" class="icon-save"></i></button></p>
      </div>
    </div>

  </form>
{% endblock %}

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