{% 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">
                <p>&nbsp;</p>
                <br>
                <img src="{{ url_for('.user_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img">
              </div>
              <div class="col s1"></div>
              <div class="col s7">
                <div class="row">
                  <div class="col s12">
                    <h1>{{ user.username }}</h1>
                    {% if user.role.name != 'User' %}
                    <span class="chip">{{ user.role.name }}</span>
                    {% endif %}
                    {% if user.is_public %}
                    <span class="chip white-text" style="background-color: #4caf50;">Public Profile</span>
                    {% else %}
                    <span class="chip white-text" style="background-color: #f44336;">Private Profile</span>
                    {% endif %}
                    {% if user.has_profile_privacy_setting('SHOW_MEMBER_SINCE') %}
                    <span class="chip">Member since: {{ user.member_since.strftime('%Y-%m-%d') }}</span>
                    {% endif %}
                    {% if user.has_profile_privacy_setting('SHOW_LAST_SEEN') %}
                    <span class="chip">Last seen: {{ user.last_seen.strftime('%Y-%m-%d') }}</span>
                    {% endif %}
                  </div>
                  <div class="col 12">
                    {% if user.location %}
                    <p>&nbsp;</p>
                    <p><i class="material-icons left">location_on</i>{{ user.location }}</p>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
            <p></p>
            <br>
            <div class="row">
              <div class="col s1"></div>
              <div class="col s8">
                {% if user.about_me %}
                <blockquote>
                  <h5>About me</h5>
                  <p>{{ user.about_me }}</p>
                </blockquote>
                {% endif %}
                <p></p>
                <br>
                <table>
                  {% if user.full_name %}
                  <tr>
                    <td><span class="material-icons">person</span></td>
                    <td>{{ user.full_name }} </td>
                  </tr>
                  {% endif %}
                  {% if user.has_profile_privacy_setting('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>
                <p>&nbsp;</p>
              </div>
            </div>
          </div>
          {% if current_user == user %}
          <div class="card-action">
            <p class="right-align">
              <a class="btn waves-effect waves-light" href="{{ url_for('settings.settings') }}">Edit profile</a>
            </p>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col s6">
        <div class="card">
          <div class="card-content">
            <h4>Followed corpora</h4>
            <div class="followed-corpus-list no-autoinit"></div>
          </div>
        </div>
      </div>
      <div class="col s6">
        <div class="card">
          <div class="card-content">
            <h4>Public corpora</h4>
            <div class="public-corpus-list no-autoinit"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
let followedCorpusList = new PublicCorpusList(document.querySelector('.followed-corpus-list'));
followedCorpusList.add(
  [
    {% for corpus in user.followed_corpora %}
      {% if (corpus.is_public or corpus.user == current_user or user == current_user or current_user.is_following_corpus(corpus)) %}
      {{ corpus.to_json_serializeable(backrefs=True, relationships=True)|tojson }},
      {% endif %}
    {% endfor %}
  ]
);
let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
publicCorpusList.add(
  [
    {% for corpus in user.corpora %}
      {% if corpus.is_public %}
      {{ corpus.to_json_serializeable(backrefs=True, relationships=True)|tojson }},
      {% endif %}
    {% endfor %}
  ]
);
</script>
{% endblock scripts %}