nopaque/app/templates/users/profile.html.j2

{% 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>
                <img src="{{ url_for('.profile_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 %}
                  </div>
                  <div class="col 12">
                    {% if user.show_last_seen %}
                    <div class="chip">Last seen: {{ last_seen }}</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 %}
                    <blockquote>
                      <h5>About me</h5>
                      <p>{{ user.about_me }}</p>
                    </blockquote>
                    {% 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.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.show_member_since %}
                <p><i>Member since: {{ member_since }}</i></p>
                {% endif %}
                <p></p>
                <br>
                {% if current_user.hashid == user.id %}
                <a class="waves-effect waves-light btn-small" href="{{ url_for('settings.settings') }}">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>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 FollowedCorpusList(document.querySelector('.followed-corpus-list'));
followedCorpusList.add({{ followed_corpora|tojson }});
let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
publicCorpusList.add({{ own_public_corpora|tojson }});
</script>
{% endblock scripts %}