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

{% block page_content %}
<div class="col s12 m6">
  <div class="card large">
    <div class="card-content">
      <span class="card-title">User information</span>
        <ul>
          <li>Username: {{selected_user.username}}</li>
          <li>Email: {{selected_user.email}}</li>
          <li>ID: {{selected_user.id}}</li>
          <li>Registration date: {{registration_date}}</li>
          <li>Confirmed status: {{selected_user.confirmed}}</li>
          <li>Role ID: {{selected_user.role_id}}</li>
          <li>Permissions as Int: {{selected_user.role.permissions}}</li>
          <li>Role name: {{selected_user.role.name}}</li>
        </ul>
        <div class="card-action">
          <a href="{{url_for('admin.edit_profile_admin', user_id=selected_user.id)}}" class="waves-effect waves-light btn"><i class="material-icons left">edit</i>Edit user</a>
        <a href="#modal-confirm-delete" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete User</a>
        <!-- Modal Strucutre -->
        <div id="modal-confirm-delete" class="modal">
          <div class="modal-content">
            <h4>Confirm deletion</h4>
              <p>Do you really want to delete the current selected user ({{selected_user.username}})?
              All associated jobs and job files will be permanently deleted.</p>
          </div>
          <div class="modal-footer">
            <a href="{{url_for('admin.admin_delete_user', user_id=selected_user.id)}}" class="modal-close waves-effect waves-green btn red"><i class="material-icons left">delete</i>Delete User</a></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var selected_user_id = {{selected_user.id|tojson|safe}}
  socket.emit('inspect_user', selected_user_id);
</script>
<div class="col s12 m6">
  <div id="job-foreign-list">
    <div class="card">
      <div class="card-content">
        <div class="row">
          <div class="col s12">
            <div class="input-field">
              <i class="material-icons prefix">search</i>
              <input id="search-job" class="search" type="text"></input>
              <label for="search-job">Search job</label>
            </div>
          </div>
          <div class="col s12">
            <ul class="pagination"></ul>
          </div>
        </div>
      </div>
    </div>
    <div class="collection list"></div>
  </div>
</div>
<script>
  var jobList = new JobList("job-foreign-list", foreignJobsSubscribers, {
    item: '<div><span class="title"></span><span class="description"></span></div>',
    page: 4,
    pagination: true,
    valueNames: ["description", "title", {data: ["id"]}]
  });
  jobList.on("filterComplete", List.updatePagination);
  jobList.on("searchComplete", List.updatePagination);
</script>
<div class="col s12 m6">
  <div id="corpus-foreign-list">
    <div class="card">
      <div class="card-content">
        <div class="row">
          <div class="col s12">
            <div class="input-field">
              <i class="material-icons prefix">search</i>
              <input id="search-job" class="search" type="text"></input>
              <label for="search-job">Search corpus</label>
            </div>
          </div>
          <div class="col s12">
            <ul class="pagination"></ul>
          </div>
        </div>
      </div>
    </div>
    <div class="collection list"></div>
  </div>
</div>
<script>
  var corpusList = new CorpusList("corpus-foreign-list", foreignCorporaSubscribers, {
    item: '<div><span class="title"></span><span class="description"></span></div>',
    page: 4,
    pagination: true,
    valueNames: ["description", "title", {data: ["id"]}]
  });
  corpusList.on("filterComplete", List.updatePagination);
  corpusList.on("searchComplete", List.updatePagination);
</script>
{% endblock %}