{% extends "cranefly/layout.html" %}
{% import "cranefly/macros.html" as macros with context %}

{% block title %}{{ macros.page_title(profile.username) }}{% endblock %}

{% block container %}
<div class="user-profile{% if profile.get_style() %} user-profile-{{ profile.get_style() }}{% endif %}">
  <div class="page-header header-primary user-profile-header">
    <div class="container">
      {{ messages_list(messages) }}
      <div class="header-row">
        {% if profile.id == user.id and not user.avatar_ban %}
        <a href="{{ url('usercp_avatar') }}"><img src="{{ profile.get_avatar() }}" class="header-avatar tooltip-right" title="{% trans %}Click to jump to your Avatar Settings{% endtrans %}"></a>
        {% else %}
        <img src="{{ profile.get_avatar() }}" class="header-avatar">
        {% endif %}
        <div class="header-side">
          <h1>{{ profile.username }} <small>{% if profile.title or profile.rank.title -%}
            <strong>{% if profile.title %}{{ _(profile.title) }}{% elif profile.rank.title %}{{ _(profile.rank.title) }}{% endif %}</strong>; {% endif %}
            {%- if online and (not hidden or acl.users.can_see_hidden_users()) -%}
            {%- if profile.hide_activity -%}
              {% trans %}Online, hidden{% endtrans %}
            {%- else -%}
              {% trans %}Online{% endtrans %}
            {%- endif %}
            {%- else -%}
              {% trans %}Offline{% endtrans %}
            {%- endif -%}, {% if not hidden or acl.users.can_see_hidden_users() -%}
              {%- if online -%}
                {% trans last_click=online.last|reltimesince|low %}last click {{ last_click }}{% endtrans %}
              {%- elif profile.last_date -%}
                {% trans last_visit=profile.last_date|reltimesince|low %}last seen {{ last_visit }}{% endtrans %}
              {%- else -%}
                {% trans %}never visited{% endtrans %}
              {%- endif -%}
            {%- else -%}
              {% trans %}hiding activity{% endtrans %}
            {%- endif %}</small></h1>
          <ul class="nav nav-tabs header-tabs">
            {% for link in tabs %}
            <li{% if link.active %} class="active"{% endif %}>
              <a href="{{ url(link.route, user=profile.pk, username=profile.username_slug) }}">{{ link.name }}</a>
            </li>
            {% endfor %}
            {% if user.is_authenticated() and user.pk != profile.pk %}
            <li class="pull-right">
              <form class="form-inline" action="{% if ignores %}{{ url('unignore_user', user=profile.id) }}{% else %}{{ url('ignore_user', user=profile.id) }}{% endif %}" method="post">
                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
                <input type="hidden" name="fallback" value="{{ fallback }}">
                <button type="submit" class="btn btn-icon tooltip-top{% if ignores %} btn-inverse{% endif %}" title="{% if ignores %}{% trans user=profile.username %}Remove {{ user }} from ignored{% endtrans %}{% else %}{% trans user=profile.username %}Add {{ user }} to ignored{% endtrans %}{% endif %}">
                  <i class="icon-ban-circle"></i>
                </button>
              </form>
            </li>
            <li class="pull-right">
              <form class="form-inline" action="{% if follows %}{{ url('unfollow_user', user=profile.id) }}{% else %}{{ url('follow_user', user=profile.id) }}{% endif %}" method="post">
                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
                <input type="hidden" name="fallback" value="{{ fallback }}">
                <button type="submit" class="btn btn-icon tooltip-top{% if follows %} btn-success{% endif %}" title="{% if follows %}{% trans user=profile.username %}Stop following {{ user }}{% endtrans %}{% else %}{% trans user=profile.username %}Start following {{ user }}{% endtrans %}{% endif %}">
                  <i class="icon-heart"></i>
                </button>
              </form>
            </li>
            {% if acl.private_threads.can_start() %}
            <li class="pull-right">
              <a href="{{ url('private_thread_start_with', username=profile.username_slug, user=profile.pk) }}" class="btn btn-icon tooltip-top" title="{% trans user=profile.username %}Start private thread with {{ user }}{% endtrans %}"><i class="icon-envelope"></i></a>
            </li>
            {% endif %}
            {% if acl.destroy_users.can_destroy_user(profile) %}
            <li class="pull-right">
              <form class="form-inline form-destroy-user" action="{{ url('destroy_user', username=profile.username_slug, user=profile.pk) }}" method="post">
                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
                <button type="submit" class="btn btn-icon tooltip-top" title="{% trans user=profile.username %}Destroy {{ user }}'s user account, deleting it, its threads and soft-deleting it's replies in other threads.{% endtrans %}">
                  <i class="icon-remove"></i>
                </button>
              </form>
            </li>
            {% endif %}
            {% if acl.warnings.can_warn_members() %}
            <li class="pull-right">
              <form class="form-inline" action="{{ url('warn_user', user=profile.pk, slug=profile.username_slug) }}" method="post">
                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
                <input type="hidden" name="retreat" value="{{ request_path }}">
                <input type="hidden" name="reason" value="{% trans %}Your profile contents were found to violate community guidelines.{% endtrans %}">
                <button type="submit" class="btn btn-icon tooltip-top" title="{% trans user=profile.username %}Increase {{ user }}'s warning level.{% endtrans %}">
                  <i class="icon-warning-sign"></i>
                </button>
              </form>
            </li>
            {% endif %}
            {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="container container-primary">
    {% block tab %}{% endblock %}
  </div>
</div>
{% endblock %}

{% macro draw_graph() %}
    <script src="{{ STATIC_URL }}cranefly/js/d3.min.js"></script>
    <script type="text/javascript">
      var data = [{{ (',').join(graph) }}];
      {% if graph_max %}
      var max = {{ graph_max }};
      {% else %}
      var max = 1;
      {% endif %}

      var barWidth = 8;
      var width = (barWidth + 2) * data.length;
      var height = 40;

      // add the canvas to the DOM
      var barDemo = d3.select("#user-graph")
        .append("svg")
        .attr("width", "100%")
        .attr("height", 40)
        .attr("preserveAspectRatio", 'none')
        .attr("viewBox", "0 0 " + width + " " + height);

      barDemo.selectAll("rect")
        .data(data)
        .enter()
        .append("rect")
        .attr("shape-rendering", 'crispEdges')
        .attr("x", function(datum, index) { return (2 + barWidth) * index; })
        .attr("y", function(datum) { return height - ((datum / max) * height) - 2; })
        .attr("height", function(datum) { return ((datum / max) * (height)) + 2; })
        .attr("width", barWidth)
        .attr("fill", "#DDD");

    </script>
{% endmacro %}

{% block javascripts %}
{{ super() }}
    <script type="text/javascript">
      $('.form-destroy-user').submit(function() {
        var decision = confirm("{% trans %}Are you sure you want to destroy this member's account? This action is not reversible!{% endtrans %}");
        return decision;
      });
    </script>
{% endblock %}