{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "customercare/base.html" %}
{% from 'includes/common_macros.html' import search_box with context %}
{% set title = _('Join our Army of Awesome') %}
{% set hide_plugin_check = True %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
<article class="main">
  <div class="feature-contents">
    <h1>{{ _('Join our <mark>Army of Awesome</mark>')|safe }}</h1>
    <h2>
      {% trans %}
        Love Firefox and have a few moments to help?<br />
        Help other Firefox users on Twitter.
        Good things will come to those who tweet!
      {% endtrans %}
    </h2>
  </div>

  <div id="speech-bubbles">
    <ol>
      <li class="choose">{{ _('Choose a <mark>tweet below</mark>')|safe }}</li>
      <li class="signin">{{ _('Sign in with <mark>Twitter</mark>')|safe }}</li>
      <li class="respond">{{ _('Respond to <mark>the tweet!</mark>')|safe }}</li>
    </ol>
  </div>

  <div id="tweetcontainer">
    <div class="tweets-header">
      <select id="show">
        {% for value, content in filters.iteritems() %}
          <option value="{{ value }}">{{ content }}</option>
        {% endfor %}
      </select>
      <img id="twitter-icon" src="{{ MEDIA_URL }}img/customercare/twitter-icon.png" /><h2 class="showhide_heading" id="Where_to_ask_your_question">{{ _('Choose a tweet to help') }}</h2>
      <a id="refresh-tweets" href="{{ url('customercare.more_tweets') }}" class="header-button">{{ _('Refresh') }}</a>
      {% if authed %}
        <form id="twitter-logout" action="" method="post">
          {{ csrf() }}
          <input type="hidden" name="twitter_delete_auth" value="1">
          <input type="submit" class="header-button" value="{{ _('Sign out') }}">
        </form>
      {% else %}
        <a id="signin-button" href="#" class="header-button">{{ _('Sign in') }}</a>
      {% endif %}
      <img id="refresh-busy" src="{{ MEDIA_URL }}img/customercare/spinner.gif"/>
    </div>

    <br style="clear:both; height: 1px" />

    <div id="tweets-wrap">
      {{ csrf() }}{# CSRF token for AJAX actions. #}
      {% if not tweets %}
        <div class="warning-box">
          {% trans language=settings.LOCALES[request.locale].native %}
            We couldn't find any matching tweets for {{ language }} at this time.
            Please check again later, choose a different tweet type from the
            menu above, or view tweets for other languages by using the
            language selector at the bottom of the page.
          {% endtrans %}
        </div>
      {% endif %}
      <ul id="tweets">
        {% include 'customercare/tweets.html' %}
      </ul>
    </div>

    <div id="infinite-scroll">
      <img id="scroll-busy" src="{{ MEDIA_URL }}img/customercare/spinner.gif"/>
    </div>
  </div>

  {% include 'customercare/reply_modal.html' %}

  {% include 'customercare/twitter_modal.html' %}
</article>
{% endblock %}

{% block side_promos %}
  {% if activity_stats %}
    <section id="side-stats">
      <h1>{{ _('Our army has responded to:') }}</h1>
      <div class="bubble">
        <div class="perc">
          {{ _('<mark>{percent}%</mark> of tweets')|fe(percent=activity_stats[0][1]['perc']|round_percent) }}
        </div>
        <div class="numbers">
          <div class="replies">
            {{ _('<mark>{num_replies}</mark> replies')|fe(num_replies=activity_stats[0][1]['replies']) }}
          </div>
          <div class="separator">/</div>
          <div class="tweets">
            {{ _('<mark>{num_requests}</mark> tweets')|fe(num_requests=activity_stats[0][1]['requests']) }}
          </div>
        </div>

        <select>
          {% for act in activity_stats %}
            <option value="{{ loop.index0 }}"
                    data-perc ="{{ act[1]['perc']|round_percent }}"
                    data-replies="{{ act[1]['replies'] }}"
                    data-requests="{{ act[1]['requests'] }}">
              {% if act[0] == 'Yesterday' %}
                {{ _('Yesterday', 'army_stats') }}
              {% elif act[0] == 'Last Week'%}
                {{ _('Last Week', 'army_stats') }}
              {% elif act[0] == 'Last Month'%}
                {{ _('Last Month', 'army_stats') }}
              {% elif act[0] == 'Overall'%}
                {{ _('Overall', 'army_stats') }}
              {% else %}
                {{ act[0] }}
              {% endif %}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="speech"></div>

      {% if contributor_stats %}
        <div class="contribs">
          {% for act in activity_stats %}
            {% set period = act[0] %}
            <div class="contributors period{{ loop.index0 }}"
                 data-period="{{ period }}">
              {% for contrib in contributor_stats.get(period, []) %}
                <a href="https://twitter.com/{{ contrib['username'] }}" target="_blank">
                  <img src="{{ contrib['avatar'] }}" alt="{{ contrib['username'] }}"
                       title="{{ contrib['name']}}: {{ contrib['count'] }} replies"
                       class="avatar" />
                </a>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
      {% endif %}
    </section>
  {% endif %}
  <section id="next-level">
    <h1>{{ _('Take it to the <mark>next level!</mark>')|safe }}</h1>
    <div class="img">
      <img src="{{ settings.MEDIA_URL }}img/promo.sumo.png" alt="" />
    </div>
    <p>
      {% trans join_url=url('wiki.document', 'superheroes-wanted') %}
        Want to go beyond 140 characters?
        <a href="{{ join_url }}">Join the support community</a>
        and help many more Firefox users.
      {% endtrans %}
    </p>
  </section>
{% endblock %}