{% extends 'board_base.html' %}
{% load i18n %}
{% load forum_member_tags %}

{% block sub_title %}{% blocktrans with username=profile.user|forum_member_display_name %}{{ username }} profile{% endblocktrans %}{% endblock sub_title %}

{% block content %}
<div class="mb-3 w-full">
  <h1 class="text-4xl">{% blocktrans with username=profile.user|forum_member_display_name %}{{ username }} profile{% endblocktrans %}</h1>
</div>
<div class="py-3 w-full profile">
  <div class="flex mb-6 profile-sidebar">
    <div class="w-1/3 profile-avatar">
      {% include "partials/avatar.html" with profile=profile show_placeholder=True %}
    </div>
    <div class="pb-3 w-2/3 text-right profile-username">
      <h3 class="mb-3 text-lg">{{ profile.user|forum_member_display_name }}</h3>
      {% if profile.user == request.user %}
        <a href="{%url 'forum_member:profile_update' %}" class="py-3 px-4 text-xs uppercase rounded border border-slate text-orange">{% trans "Edit profile" %}</a>
      {% endif %}
    </div>
  </div>


  <div class="w-full">
    <div class="card-header">{% trans "Statistics" %}</div>

    <div class="flex mt-3 space-x-24">
      <div>
        {% blocktrans count counter=profile.posts_count %}
          <h4><strong>{{ counter }}</strong></h4>
          <p><small>Post</small></p>{% plural %}<h4><strong>{{ counter }}</strong></h4>
          <p class="mb-1"><small>Posts</small></p>
        {% endblocktrans %}
      </div>
      <div>
        {% blocktrans count counter=topics_count %}
          <h4><strong>{{ counter }}</strong></h4>
          <p><small>Topic</small></p>{% plural %}<h4><strong>{{ counter }}</strong></h4>
          <p class="mb-1"><small>Topics</small></p>
        {% endblocktrans %}
      </div>
    </div>


    <div class="p-3 w-full rounded border bg-charcoal border-slate">
      <h3 class="py-2 mb-6 border-b border-slate">{% trans "Recent posts" %}
        {% if recent_posts %}&nbsp;
        <span class="float-right py-1 px-3 w-auto text-xs uppercase rounded text-green bg-green/10">
          <a href="{% url 'forum_member:user_posts' profile.user_id %}">{% trans "View all" %}</a>
        </span>
        {% endif %}
      </h3>

      <div class="divide-y divide-slate">
      {% for post in recent_posts %}
        <div class="w-full">
          <div class="text-xl">
            <a href="{% url 'forum_conversation:topic' post.topic.forum.slug post.topic.forum.pk post.topic.slug post.topic.pk %}?post={{ post.pk }}#{{ post.pk }}">{{ post.subject }}</a>
          </div>
          <p class="py-1 text-sm">
            <i class="fa fa-clock-o"></i>&nbsp;{% blocktrans with creation_date=post.created %}On {{ creation_date }}{% endblocktrans %}
          </p>
          <div class="py-2">
            {{ post.content.rendered|truncatechars_html:160 }}
          </div>
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}
