profile.html

{% extends "base.html" %}

{% block page_title %}{{ profile.display_name }}{% endblock %}
{% block body_id %}profile{% endblock %}
{% block body_class %}
  {{ super() }}
  {% if not profile.is_vouched %}pending{% endif %}
{% endblock %}

{% block messages %}{% endblock %}

{% block content %}
  {% if messages %}
      {% for message in messages %}
        {% with %}
          {% set label = message.tags in ['error', 'success', 'info'] %}
          <div class="alert{% if label %} alert-{{ message.tags }}{% endif %}">{{ message }}</div>
        {% endwith %}
      {% endfor %}
  {% endif %}
  <div class="alert">
    {% if user.username == shown_user.username %}
      {{ _('Your Profile') }}
    {% elif profile.is_vouched %}
      {{ _('Mozillian Profile') }}
    {% else %}
      {{ _('Pending Profile') }}
    {% endif %}
  </div>
  {% if not profile.is_vouched %}
    <div id="pending-approval">
      {% if user == shown_user %}
        {% trans profile_url=absolutify(url('profile', user.username)),
                 contribute_url='http://www.mozilla.org/contribute' %}
          <p>
            Your profile is waiting to be vouched. Send the link below to someone who
            is familiar with your contributions and ask them to vouch for you:
            <em class="underline" title="Your profile URL">{{ profile_url }}</em>
          </p>
          <p>
            If you are new to the Mozilla community,
            <a class="button" href="{{ contribute_url }}">get involved</a>
          </p>
          <p>
            The chances of being vouched increase as you finish tasks in our community.
          </p>
          
        {% endtrans %}
      {% else %}
        {% if vouch_form %}
          <form action="{{ url('vouch') }}" method="POST"
                id="vouch-form">
            {{ csrf() }}
            {{ vouch_form }}
            {% trans name=profile.display_name %}
                <button type="submit">
                  Vouch for {{ name }}
                </button>
            {% endtrans %}
          </form>
        {% endif %}
        {% trans %}
          <p>This profile is waiting for approval.</p>
          <p>Because our community directory is for Mozillians who
            are 13 and older, please don't vouch for anyone under
            13.</p>
        {% endtrans %}
      {% endif %}
    </div>
  {% endif %}

  {% if privacy_mode == 'anonymous' and not profile.is_public %}
    <div id="anonymous">
      {% trans edit_url=url('profile.edit') %}
        Your profile is not public. If you <a href="{{ edit_url }}">edit
        your profile</a> to have at least one public field,
        your public profile will be viewable.
      {% endtrans %}
    </div>
  {% endif %}

  <article id="profile-stats">
    <div class="profile-photo">
      <img src="{{ shown_user.userprofile.get_photo_url('150x150') }}" alt="{{ shown_user.username }}">
    </div>
    <div class="stats">
      {% set mozillian_years = get_mozillian_years(profile) %}
      {% if not mozillian_years is none %}
        <section id="membership">
            <div class="status">
              <i class="icon-calendar"></i>
              {% if mozillian_years > 0 %}
                {% trans %}
                  Mozillian for {{ mozillian_years }} years
                {% endtrans %}
              {% else %}
                  Mozillian for less than a year
              {% endif %}
              <span>{{ shown_user.userprofile.date_mozillian.strftime('%b %d, %Y') }}</span>
            </div>
        </section>
      {% endif %}
      {% if profile.country or profile.region or profile.city %}
        <section id="location">
          <i class="icon-globe"></i> {% include 'phonebook/includes/profile_location.html' %}
        </section>
      {% endif %}
      {% if profile.timezone %}
        <section id="timezone">
          <i class="icon-time"></i> {{ profile.timezone }}
        </section>
      {% endif %}
     </div>
  </article>

  <article id="profile-info">
    <header>
      {% if user == shown_user %}
        <div class="privacy-view">
          <form method="GET" action=".">
            <label>{{ _('View as:') }}</label>
            <select id="view-privacy-mode">
                <option value="{{ url('profile', shown_user.username) }}"
                        {% if privacy_mode == 'myself' %} selected {% endif %}>
                  {{ _('Myself') }}
                </option>
                <option value="{{ url('profile', shown_user.username)|urlparams(view_as='mozillian') }}"
                        {% if privacy_mode == 'mozillian' %} selected {% endif %} >
                  {{ _('Mozillian') }}
                </option>
                <option value="{{ url('profile', shown_user.username)|urlparams(view_as='anonymous') }}"
                        {% if privacy_mode == 'anonymous' %} selected {% endif %}>
                  {{ _('Public') }}
                </option>
            </select>
          </form>
        </div>
      {% endif %}
      <h1 class="p-name fn">{{ profile.display_name }}</h1>
      {# Placeholder text in <h2> below #}
      <h2>I make tools for Mozillians</h2>
    </header>
    <section id="profile-details">
      {% if profile.bio %}
        <div id="bio" class="p-note note">
            <h3>{{ _('Bio') }}</h3>
            <p>{{ profile.bio }}</p>
            <p>{{ _('Previously: Social media and Army of Awesome') }}</p>
        </div>
      {% endif %}
      {% if profile.groups.count() %}
        <div id="groups" class="p-category category">
          <h3>{{ _('Groups') }}</h3>
            {% for group in profile.groups.all() %}
              {% if (user.is_authenticated() and
                     user.get_profile().is_vouched) %}
                <a href="{{ url('group', group.url) }}">
                  {{ group.name }}
                </a>
              {% else %}
                {{ group.name }}
              {% endif %}
              {% if not loop.last %},{% endif %}
            {% endfor %}
        </div>
      {% endif %}
      {% if profile.skills.count() %}
        <div id="skills" class="p-category category">
          <h3>{{ _('Skills') }}</h3>
            {% for skill in profile.skills.all() %}
                <a href="{{ url('search') }}?q={{ skill.name }}">{{ skill.name }}</a>{% if not loop.last %},{% endif %}
            {% endfor %}
        </div>
      {% endif %}
      {% if profile.languages.count() %}
        <div id="languages" class="p-category category">
          <h3>{{ _('Languages') }}</h3>
            {% for language in profile.languages.all() %}
                <a href="{{ url('search') }}?q={{ language.name }}">{{ language.name }}</a>
                {# Placeholder for preferred language #}
                {% if language.preferred %}(preferred){% endif %}
                {% if not loop.last %},{% endif %}
            {% endfor %}
        </div>
      {% endif %}
    </section>

    <section id="profile-contact">
      <div class="contact-details">
        <ul>
          {% if profile.email %}
            <li class="u-email email">
              <i class="icon-envelope"></i>
              {% if user != shown_user %}<a href="mailto:{{ profile.email }}">{% endif %}
                {{ profile.email }}
              {% if user != shown_user %}</a>{% endif %}
            </li>
          {% endif %}
          {% if profile.ircname %}
            <li class="p-nickname nickname">
              IRC
              <a href="irc://irc.mozilla.org/">
                  {{ profile.ircname }}
                </a>
            </li>
          {% endif %}
          {# Placeholder forloop, as the sketch outlines
          that users may have > 1 website #}
          {#  {% if profile.websites.count() %}
              {% for website in profile.websites.all %} #}
          {% if profile.website %}
            <li class="u-url url">
              <i class="icon-link"></i>
              <a href="{{ profile.website }}">
                {{ profile.website }}
              </a>
            </li>
          {% endif %}
          {#  {% endif %}
              {% endfor %} #}
        </ul>
      </div>
      {# Placeholder for account lists
      {% if profile.accounts.count() %}
        <div class="u-accounts accounts">
          <h3>{{ _('Accounts') }}</h3>
          <ul class="account-list">
            <li><a href="#">Bugzilla</a></li>
            <li><a href="#">SUMO</a></li>
            <li><a href="#">MDN</a></li>
            <li><a href="#">AMO</a></li>
            <li><a href="#">Github</a></li>
            <li><a href="#">Facebook</a></li>
          </ul>
          <ul class="account-list">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Google+</a></li>
            <li><a href="#">AIM</a></li>
            <li><a href="#">Skype</a></li>
            <li><a href="#">Yahoo!</a></li>
            <li><a href="#">Google Talk</a></li>
          </ul>
        </div>
      {% endif %}
      #}
    </section>
  </article>
{% endblock %}

{% block page_js %}
  {{ js('profile_view') }}
{% endblock %}