{% extends "base.html.j2" %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12 l2">
      <p>&nbsp;</p>
      <img src="{{ url_for('users.user_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img">
    </div>
    <div class="col s12 l10">
      <h1 id="title">{{ title }}</h1>
      <p>
        <span class="chip hoverable tooltipped no-autoinit" id="user-role-chip">{{ user.role.name }}</span>
        {% if user.confirmed %}
        <span class="chip white-text" id="user-confirmed-chip" style="background-color: #4caf50;">confirmed</span>
        {% else %}
        <span class="chip white-text" id="user-confirmed-chip" style="background-color: #f44336;">unconfirmed</span>
        {% endif %}
      </p>
      <p>{{ user.about_me }}</p>
    </div>

    <div class="col s12 hide-on-med-and-down">&nbsp;</div>

    <div class="col s12">
      <ul class="tabs tabs-fixed-width z-depth-1">
        <li class="tab"><a href="#user-info">User info</a></li>
        <li class="tab"><a href="#user-corpora">Corpora</a></li>
        <li class="tab"><a href="#user-jobs">Jobs</a></li>
        <li class="tab"><a href="#user-tesseract-ocr-pipeline-models">Tesseract OCR Pipeline Models</a></li>
        <li class="tab"><a href="#user-spacy-nlp-pipeline-models">SpaCy NLP Pipeline Models</a></li>
      </ul>
    </div>

    <div class="col s12" id="user-info">
      <div class="card">
        <div class="card-content">
          <ul>
            <li>Username: {{ user.username }}</li>
            <li>Email: {{ user.email }}</li>
            <li>Id: {{ user.id }}</li>
            <li>Hashid: {{ user.hashid }}</li>
            <li>Member since: {{ user.member_since.strftime('%Y-%m-%d') }}</li>
            <li>Last seen: {% if user.last_seen %}{{ user.last_seen.strftime('%Y-%m-%d') }}</li>{% endif %}
          </ul>
        </div>
        <div class="card-action right-align">
          <a class="btn waves-effect waves-light" href="{{ url_for('.user_settings', user_id=user.id) }}"><i class="material-icons left">edit</i>Edit</a>
          <a class="btn red modal-trigger waves-effect waves-light" data-target="delete-user-modal"><i class="material-icons left">delete</i>Delete</a>
        </div>
      </div>
    </div>

    <div class="col s12" id="user-corpora">
      <div class="card">
        <div class="card-content">
          <div class="corpus-list" data-user-id="{{ user.hashid }}"></div>
        </div>
      </div>
    </div>

    <div class="col s12" id="user-jobs">
      <div class="card">
        <div class="card-content">
          <div class="job-list" data-user-id="{{ user.hashid }}"></div>
        </div>
      </div>
    </div>

    <div class="col s12" id="user-spacy-nlp-pipeline-models">
      <div class="card">
        <div class="card-content">
          <div class="spacy-nlp-pipeline-model-list" data-user-id="{{ user.hashid }}"></div>
        </div>
      </div>
    </div>

    <div class="col s12" id="user-tesseract-ocr-pipeline-models">
      <div class="card">
        <div class="card-content">
          <div class="tesseract-ocr-pipeline-model-list" data-user-id="{{ user.hashid }}"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}


{% block modals %}
{{ super() }}
<div id="delete-user-modal" class="modal">
  <div class="modal-content">
    <h3>Delete user</h3>
    <p>Do you really want to delete the user {{ user.username }}? All associated data will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn red modal-close waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
  </div>
</div>
{% endblock modals %}


{% block scripts %}
{{ super() }}
<script>
  let userRoleChip = document.querySelector('#user-role-chip');
  let userRoleChipTooltip = M.Tooltip.init(
    userRoleChip,
    {
      html: `
        <p>Permissions</p>
        <p class="left-align">
          {% for permission in ['ADMINISTRATE', 'CONTRIBUTE', 'USE_API'] %}
          <label>
            <input class="filled-in" type="checkbox" {{ 'checked' if user.can(permission) }}>
            <span>{{ permission|capitalize }}</span>
          </label>
          {% if not loop.last %}
          <br>
          {% endif %}
          {% endfor %}
        </p>
      `.trim()
    }
  );
</script>
{% endblock scripts %}