{% extends "master.html" %}

{% block title %}User {{username}}{% endblock %}
{% set tag = "users" %}
{% from "_browseheader.html" import browse_header %}


{% block header %}
  <link href="{{ url_for('static', filename='selectize.bootstrap3.css') }}"
  rel="stylesheet" />
{% endblock %}


{% from "_render_repo.html" import render_repos_as_card, render_contributions_graph %}


{% block content %}
<div class="repo-header p-t-1">
  <div class="container">
    {{browse_header(select=tag)}}
  </div>
</div>
<div class="p-t-2">
  <div class="container">
    <h2>
        {{ user.default_email | avatar(36) | safe }} {{ username }}

    </h2>
    <p title="{{ user.created.strftime('%Y-%m-%d') }}">
      Joined {{ user.created | humanize }}
    </p>
    <div class="row">
      <div class="col-md-8">
        {{ render_repos_as_card(repos, repos_length, 'Projects', 'repopage', repopage, total_page_repos) }}
        {{ render_repos_as_card(forks, forks_length,'Forks', 'forkpage', forkpage, total_page_forks) }}
        {{ render_contributions_graph(username) }}
      </div>
      <div class="col-md-4">
        <div class="card" id="group_list">
            <div class="card-header">
                Groups <span class="label label-default">{{ user.groups | length }}</span>
            </div>
            {% for group in user.groups %}
              <div class="list-group">
                <a class="list-group-item" href="{{ url_for(
                    'view_group', group=group)}}">
                  <div class=""><strong><span class="oi" data-glyph="people">
                    </span> &nbsp;{{ group }}</strong>
                  </div>
                </a>
              </div>
            {% else %}
            <div class="card-block">
              <p>No group found</p>
            </div>
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block jscripts %}
    {{ super() }}
    <script type="text/javascript">
      $(function(){
        $('.show_parts input[type="checkbox"]').change(function(){
          $('#' + $(this).attr('name')).toggle();
        });
      });
    </script>
<script src="{{ url_for('static', filename='selectize.min.js') }}" type="text/javascript"> </script>
<script type="text/javascript">
$(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="oi" data-glyph="person"></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 %}