{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}

{% block page_content %}
    <div class="container">
        <div class="row">
          <div class="col s12">
            <div class="card">
              <div class="card-content">
                <div class="row">
                  <div class="col s1"></div>
                  <div class="col s4">
                    {% if user.avatar %}
                    <img src="{{ url_for('profile.avatar_download', user_id=user.id, avatar_id=user.avatar.id) }}" alt="user-image" class="circle responsive-img">
                    {% else %}
                    <img src="{{ url_for('static', filename='images/user_avatar.png') }}" alt="user-image" class="circle responsive-img">
                    {% endif %}
                  </div>
                  <div class="col s7">
                    <h3>{{ user.username }}</h3>
                    <div class="chip">Last seen: {{ user.last_seen.strftime('%Y-%m-%d %H:%M') }}</div>
                    {% if user.location %}
                    <p><span class="material-icons" style="margin-right:20px; margin-top:20px;">location_on</span><i>{{ user.location }}</i></p>
                    {% endif %}
                    <p></p>
                    <br>
                    {% if user.about_me%}
                    <div class="card">
                      <div class="card-content">
                        <span class="card-title">About me</span>
                        <p>{{ user.about_me }}</p>
                      </div>
                    </div>
                    {% endif %}
                  </div>
                </div>
                <div class="row">
                  <div class="col s1"></div>
                  <div class="col s6">
                    <table>
                      {% if user.full_name %}
                      <tr>
                        <td><span class="material-icons">person</span></td>
                        <td>{{ user.full_name }} </td>
                      </tr>
                      {% endif %}
                      {% if user.email %}
                      <tr>
                        <td><span class="material-icons">email</span></td>
                        <td>{{ user.email }}</td>
                      </tr>
                      {% endif %}
                      {% if user.website %}
                      <tr>
                        <td><span class="material-icons">laptop</span></td>
                        <td><a href="{{ user.website }}">{{ user.website }}</a></td>
                      </tr>
                      {% endif %}
                      {% if user.organization %}
                      <tr>
                        <td><span class="material-icons">business</span></td>
                        <td>{{ user.organization }}</td>
                      </tr>
                      {% endif %}
                    </table>
                    <br>
                    <p><i>Member since: {{ user.member_since.strftime('%Y-%m-%d') }}</i></p>
                    <p></p>
                    <br>
                    {% if current_user.is_authenticated and current_user.id == user.id %}
                    <a class="waves-effect waves-light btn-small" href="{{ url_for('profile.edit_profile', user_id=user.id) }}">Edit profile</a>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="card">
              <div class="card-content">
                <h4>Groups</h4>
              </div>
            </div>
          </div>
          <div class="col s6">
            <div class="card">
              <div class="card-content">
                <h4>Public corpora</h4>
                <div class="public-corpora-list" data-user-id="{{ user.hashid }}"></div>
              </div>
            </div>
          </div>
        </div>
    </div>
{% endblock page_content %}