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

{% block main_attribs %} class="social-area-color-lighten" {% endblock main_attribs %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>

    <div class="col s12 m3 push-m9">
      <div class="center-align">
        <p class="hide-on-small-only">&nbsp;</p>
        <p class="hide-on-small-only">&nbsp;</p>
        <a class="btn-floating btn-large btn-scale-x2 waves-effect waves-light social-area-color-darken">
          <i class="left material-icons">group</i>
        </a>
      </div>
    </div>

    <div class="col s12 m9 pull-m3">
      <div class="card social-area-color-border-darken" style="border-top: 10px solid">
        <div class="card-content">
          <div class="row">
            <div class="col s12">
              <div class="card-panel z-depth-0">
                <span class="card-title"><i class="left material-icons">layers</i>Your social area</span>
                <p>Here you can network with your team and other users. You can find corpora that are public and request them or just see what other users are working on.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12" id="public-users">
      <h3>Public Users</h3>
      <p>Find other users and see what corpora they have made public.</p>
      <div class="card">
        <div class="card-content">
          <div id="public-user-list"></div>
        </div>
      </div>
    </div>

    <div class="col s12" id="public-corpora">
      <h3>Public Corpora</h3>
      <p>Find public corpora.</p>
      <div class="card">
        <div class="card-content">
          <div id="public-corpus-list"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
  let publicUserListElement = document.querySelector('#public-user-list');
  let publicUserList = new nopaque.resource_lists.PublicUserList(publicUserListElement);
  publicUserList.add(
    [
      {% for user in users %}
      {{ user.to_json_serializeable(relationships=True, filter_by_privacy_settings=True)|tojson }},
      {% endfor %}
    ]
  );

  let publicCorpusListElement = document.querySelector('#public-corpus-list');
  let publicCorpusList = new nopaque.resource_lists.PublicCorpusList(publicCorpusListElement);
  publicCorpusList.add(
    [
      {% for corpus in corpora %}
      {{ corpus.to_json_serializeable(backrefs=True, relationships=True)|tojson }},
      {% endfor %}
    ]
  );
</script>
{% endblock scripts %}