{% extends "master.html" %}
{% block title %}Users{% endblock %}
{% set tag = "users" %}
{% from "_browseheader.html" import browse_header %}
{% from "_projectstring.html" import projectstring, projecticon %}
{% from "_render_repo.html" import searchbox %}


{% block header %}
<link type="text/css" rel="stylesheet" nonce="{{ g.nonce }}" href="{{
  url_for('static', filename='vendor/selectize/selectize.bootstrap3.css') }}?version={{ g.version}}"/>
{% endblock %}

{% block content %}
<div class="bg-light border border-top-0 pt-2">
  <div class="container">
    {{browse_header(select=select)}}
  </div>
</div>

<div class="container mt-5">
  <div class="row">
  <div class="col">
    <h3 class="mb-3 font-weight-bold">
      Users <span class="badge badge-secondary">{{ users_length }}</span>
      <div class="pull-right">
        {{searchbox(select="users")}}
      </div>
    </h3>
    <div class="row mt-5">
    {% for user in users %}
      <div class="col-lg-4 col-md-6">
        <div class="border mb-4">
          <div class="media p-2">
            <img class="align-self-start mr-3" src="{{user.default_email | avatar_url(60) |safe }}" width=60 height=60>
            <div class="media-body align-self-center">
                <a href="{{url_for('ui_ns.view_user', username=user.user)}}">
                  <div class="nowrap"><strong>{{ user.user }}</strong></div>
                </a>
                <div class="nowrap"><small>{{ user.fullname }}</small></div>
            </div>
          </div>

          <div class="bg-light border-top py-1 px-2 mt-0">
              <small>joined <span title="{{
                user.created | format_datetime }}">{{
                user.created | humanize }}</span></small>
            <div class="float-right text-muted">
              <span title="{{projectstring(plural=True)}}" data-toggle="tooltip">
                <span class="fa {{projecticon()}} pr-1"></span>
                 {{- user.repos_length}} &nbsp;
              </span>
              <span title="Forks" data-toggle="tooltip">
                <i class="fa fa-code-fork pr-1"></i>
                 {{- user.forks_length}} &nbsp;
              </span>
              <span title="Groups" data-toggle="tooltip">
                <span class="fa fa-users pr-1"></span>
                 {{- user.groups|count}}
              </span>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
    </div>
    </div>
  </div>

  {% if total_page and total_page > 1 %}
  <nav class="text-center">
    <ul class="pagination">
      <li {% if page <= 1%} class="disabled" {% endif %}>
      <a href="{{ url_for('ui_ns.view_users', page=page -1) }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Newer</span>
        </a>
      </li>
      <li class="active">page {{ page }} of {{total_page}}</li>
      <li {% if page >= total_page %}class="disabled"{%endif%}>
        <a href="{{ url_for('ui_ns.view_users', page=page + 1) }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Older</span>
        </a>
      </li>
    </ul>
  </nav>
  {% endif %}
</div>

{% endblock %}

{% block jscripts %}
    {{ super() }}
<script type="text/javascript" nonce="{{ g.nonce }}" src="{{
  url_for('static', filename='vendor/selectize/selectize.min.js') }}?version={{ g.version}}"></script>

<script type="text/javascript" nonce="{{ g.nonce }}">
$(document).ready(function() {
  $('#headerSearch').on('keypress keydown keyup', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        return false;
    }
    });
  $('#term').selectize({
    valueField: 'user',
    labelField: 'user',
    searchField: 'user',
    onType: function(value){
      if (value == ""){
      this.close();
      }
    },
    onChange: function(value){
      if (value != ""){
        $('#headerSearch').submit();
      }
    },
    maxItems: 1,
    create: false,
    load: function(query, callback) {
      if (!query.length) return callback();
      $.getJSON(
        "{{ url_for('api_ns.api_users') }}", {
          pattern: query
        },
        function( data ) {
          callback( data.users.map(function(x) { return { user: x }; }) );
        }
      );
    },
    render: {
      option: function(item, escape) {
        return '<div>' +
          '<div class="projecticon-search pull-xs-left"><span class="fa fa-user"></span></div>'+
          '<div class="title">' +
            '<span class="name"><strong>' + escape(item.user) + '</strong></span>' +
          '</div>' +
          '<div class="description"><small>' + escape(item.user) + '</small></div>' +
        '</div>';
      }
    },
  });
});
</script>
{% endblock %}