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

{% block main_attribs %} style="background-color:#d8c9ba86" {% 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" style="background-color:#D9A36D">
          <i class="left material-icons">group</i>
        </a>
      </div>
    </div>

    <div class="col s12 m9 pull-m3">
      <div class="card" style="border-top: 10px solid #D9A36D;">
        <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">
      <h3>Other Users</h3>
      <p>Find other users and see what corpora they have made public.</p>
      <div class="card">
        <div class="card-content">
          <div class="user-list no-autoinit"></div>
        </div>
      </div>
    </div>

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

{% block scripts %}
{{ super() }}
<script>
  let userList = new UserList(document.querySelector('.user-list'));
  userList.add({{ users|tojson }});
  let publicCorpusList = new PublicCorpusList(document.querySelector('.public-corpus-list'));
  publicCorpusList.add({{ corpora|tojson }});
</script>
{% endblock scripts %}