{% from '_functions.html' import avatar_thumbnail, badge_thumbnail, pluralize with context %}

{% extends '_base.html' %}

{% block body %}

<div class="page">
  <div class="grid-100">
    <div class="shadow">
      <h1 class="section-header">Diff Stats</h1>
      <div class="padded-content">
	  <ul class="pretty-list">
	  	<li>{{user_a.nickname}} has {{user_a_unique_badges|length}}
			{{ pluralize("badge", user_a_unique_badges|length) }}
			that {{user_b.nickname}} does not have.</li>
	  	<li>{{user_b.nickname}} has {{user_b_unique_badges|length}}
			{{ pluralize("badge", user_b_unique_badges|length) }}
			that {{user_a.nickname}} does not have.</li>
	  	<li>{{user_a.nickname}} and {{user_b.nickname}} share
			{{shared_badges|length}}
			{{ pluralize("award", shared_badges|length) }}.
			</li>
		<li>
		{% if user_a_badges|length > user_b_badges|length %}
			{{user_a.nickname}}'s badge count is {{user_a_badges|length - user_b_badges|length}}
			higher than {{user_b.nickname}}'s.
		{% elif user_a_badges|length < user_b_badges|length %}
			{{user_b.nickname}}'s badge count is {{user_b_badges|length - user_a_badges|length}}
			higher than {{user_a.nickname}}'s.
		{% else %}
			{{user_b.nickname}} and {{user_a.nickname}} have the same number of badges.
		{% endif %}
			</li>
		<li>
		{% if user_a_rank < user_b_rank %}
			{{user_a.nickname}} (rank {{user_a_rank}}, top {{"{0:.1f}".format(user_a_percentile)}}%)
			is ranked {{user_b_rank - user_a_rank}} higher than {{user_b.nickname}}
			(rank {{user_b_rank}}, top {{"{0:.1f}".format(user_b_percentile)}}%).
		{% else %}
			{{user_b.nickname}} (rank {{user_b_rank}}, top {{"{0:.1f}".format(user_b_percentile)}}%)
			is ranked {{user_a_rank - user_b_rank}} higher than {{user_a.nickname}}
			(rank {{user_a_rank}}, top {{"{0:.1f}".format(user_a_percentile)}}%).
		{% endif %}
			</li>
	  </ul>
      </div> <!-- End padded content. -->
    </div> <!-- End shadow. -->
  </div>

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

{% macro badge_table(badges, N=3) %}
	<table>
	<tr>
	{% for badge in badges %}
		{% if loop.index0 % N == 0 and not loop.first %}
			</tr><tr>
		{% endif %}
		<td>{{badge_thumbnail(badge, 64, 33) }}</td>
	{% endfor %}
	</tr>
	</table>
{% endmacro %}

  <!-- COLUMN 1 (Left) -->
  <div class="grid-33">
    <div class="shadow">
      <h1 class="section-header">{{user_a.nickname}} only</h1>
      <div class="padded-content">
		{{badge_table(user_a_unique_badges)}}
      </div> <!-- End padded content. -->
    </div> <!-- End shadow. -->
  </div>

  <!-- COLUMN 2 (Center) -->
  <div class="grid-33">
    <div class="shadow">
      <h1 class="section-header">Both</h1>
      <div class="padded-content">
		{{badge_table(shared_badges)}}
      </div> <!-- End padded content. -->
    </div> <!-- End shadow. -->
  </div>

  <!-- COLUMN 3 (Right) -->
  <div class="grid-33">
    <div class="shadow">
      <h1 class="section-header">{{user_b.nickname}} only</h1>
      <div class="padded-content">
		{{badge_table(user_b_unique_badges)}}
      </div> <!-- End padded content. -->
    </div> <!-- End shadow. -->
  </div>

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

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

{% endblock %}
