{% 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 s3">
                <br>
                <br>
                {% 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 s1"></div>
              <div class="col s7">
                <div class="row">
                  <div class="col s12">
                    <h3 style="float:left">{{ user.username }}<span class="new badge green" id="public-information-badge" data-badge-caption="custom caption" style="margin-top:20px;"></span></h3>
                  </div>
                  <div class="col 12">
                    {% if user_data['show_last_seen'] %}
                    <div class="chip">Last seen: {{ user.last_seen.strftime('%Y-%m-%d %H:%M') }}</div>
                    {% endif %}
                    {% 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 style="border-left: solid 3px #E91E63; padding-left: 15px;">
                      <h5>About me</h5>
                      <p>{{ user.about_me }}</p>
                    </div>
                    {% endif %}
                  </div>
                </div>
                
                
              </div>
            </div>
            <p></p>
            <br>
            <div class="row">
              <div class="col s1"></div>
              <div class="col s8">
                <table>
                  {% if user.full_name %}
                  <tr>
                    <td><span class="material-icons">person</span></td>
                    <td>{{ user.full_name }} </td>
                  </tr>
                  {% endif %}
                  {% if user_data['show_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>
                {% if user_data['show_member_since'] %}
                <p><i>Member since: {{ user.member_since.strftime('%Y-%m-%d') }}</i></p>
                {% endif %}
                <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 %}

{% block scripts %}
{{ super() }}
<script>
let publicInformationBadge = document.querySelector('#public-information-badge');

if ("{{ user }}" == "{{ current_user }}") {
  if ("{{ user.is_public }}" == "True") {
    publicInformationBadge.dataset.badgeCaption = 'Your profile is public';
    publicInformationBadge.classList.add('green');
    publicInformationBadge.classList.remove('red');
  } else {
    publicInformationBadge.dataset.badgeCaption = 'Your profile is private';
    publicInformationBadge.classList.add('red');
    publicInformationBadge.classList.remove('green');
  }
} else {
  publicInformationBadge.remove();
}
</script>
{% endblock scripts %}