{% extends "base.html" %}

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

  <style>
    .user-profile-img {
      width: 150px;
      height: 150px;
    }
    .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 %}
  {% if request.user.is_authenticated %}
    <script type="text/javascript">
      $(function() {
        $("#message-button").on("click", function() {
          $.get("{{ url('get_or_create_room') }}", {
            "other": "{{ chat_param(request.profile, user) }}"
          }, function(response) {
            window.location.href = response.url;
          }).fail(function(error) {
            console.log("Error: ", error);
          });
        });
      });
    </script>
  {% endif %}
  {% block user_js_media %}{% endblock %}
{% endblock %}

{% block body %}
  <div class="user-info-page">
    <div class="user-sidebar">
      <div class="user-img user-profile-img">
        <img src="{{ gravatar(user, 145) }}">
      </div>
      <br>
      {% if request.user.is_authenticated and request.profile != user %}
        <form method="post" action="{{ url('user_toggle_follow', user.username) }}">
          {% csrf_token %}
          <button class="small {{ 'unfollow' if followed else 'follow' }}" style="width:100%">
            {% if followed %}
              <i class="fa fa-remove"></i>
              {{ _('Unfollow') }}
            {% else %}
              <i class="fa fa-user-plus"></i>
              {{ _('Follow') }}
            {% endif %}
          </button>
        </form>
      {% endif %}
      {% if request.user.is_authenticated and request.profile != user %}
        <br>
        <button class="small btn-midnightblue" style="width:100%" id="message-button">
          <i class="fa fa-envelope"></i> {{ _('Message') }}
        </button>
      {% endif %}

      {% if ratings %}
        <br>
        <div style="border: 3px dashed darkgray; padding: 0.3em; 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 %}