{% extends "base.html" %}

{% block media %}
  {% block user_media %}{% endblock %}

  <style>
    .user-gravatar {
      display: block;
      padding-right: 15px;
      width: 145px;
    }

    .user-gravatar img {
      width: 145px;
      height: 145px;
      display: block;
      border-radius: 6px;
    }

    .page-title {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .user-info {
      font-size: 1.4em;
      line-height: 1.225;
      font-weight: 500;
    }

    .user-info-container {
      display: grid;
      grid-column-gap: .5rem;
      grid-row-gap: 1rem;
      grid-template-columns: repeat(6, minmax(10rem, 1fr));
    }

    .user-info-card {
      align-items: center;
      text-align: center;
      display: flex;
      flex-direction: column;
      padding: 1rem;
    }

    .user-info-body {
      font-weight: bold;
    }

    @media (max-width: 500px) {
      .user-info-container {
        grid-template-columns: repeat(2, minmax(10rem, 1fr));
      }
    }

    .user-stat {
      text-align: right;
      font-weight: bold;
    }

    .user-stat-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5em;
    }

    #awards img {
      height: 105px;
      margin-right: 1em;
      margin-left: 1em;
    }

    .bookmark-group {
      margin-bottom: 1em;
    }
  </style>
{% endblock %}

{% block js_media %}
  {% block user_js_media %}{% endblock %}
{% endblock %}

{% block body %}
  <div class="user-info-page">
    <div class="user-sidebar">
      <div class="user-gravatar">
        <img src="{{ gravatar(user, 145) }}" width="145px" height="145px">
      </div>
      <br>
      {% if request.user != user.user %}
        <form method="post">
          {% csrf_token %}
          <button class="small {{ 'unfollow' if followed else 'follow' }}" style="width:145px">
            {% if followed %}
              <i class="fa fa-remove"></i>
              {{ _('Unfollow') }}
            {% else %}
              <i class="fa fa-user-plus"></i>
              {{ _('Follow') }}
            {% endif %}
          </button>
        </form>
      {% endif %}
      <br>
      <div>
        <form action="{{ url('all_user_submissions', user.user.username) }}">
          <input type="submit" value="{{ _('View submissions') }}" class="small" style="width:145px; padding-left: 1px; padding-right: 1px">
        </form>
      </div>
      {% if request.user.is_authenticated %}
        <br>
        <div>
          <form action="{{ url('get_or_create_room') }}" method="POST">
            {% csrf_token %}
            <input type="hidden" value="{{ chat_param(request.profile, user) }}" name="other">
            <input type="submit" value="{{ _('Send message') }}" style="width:145px" class="small btn-midnightblue">
          </form>
        </div>
      {% endif %}

      {% if ratings %}
        <br>
        <div style="border: 3px dashed darkgray; padding: 0.3em; margin-right: 15px; border-radius: 6px;">
          <div class="user-stat-container">
            <div class="user-stat-header">{{_('Contests written')}}:</div>
            <div class="user-stat">{{ratings|length}}</div>
          </div>
          <div class="user-stat-container">
            <div class="user-stat-header">{{ _('Min. rating:') }}</div>
            <div class="user-stat">{{ rating_number(min_rating) }}</div>
          </div>
          <div class="user-stat-container">
            <div class="user-stat-header">{{ _('Max rating:') }}</div>
            <div class="user-stat">{{ rating_number(max_rating) }}</div>
          </div>
        </div>
      {% endif %}
    </div>
    <div class="user-content">{% block user_content %}{% endblock %}</div>
  </div>
{% endblock %}