{% extends "master.html" %}
{% from "_render_repo.html" import render_repos_as_card %}

{% block title %}Group {{ group.name }}{% endblock %}
{% set tag = "groups" %}
{% from "_browseheader.html" import browse_header %}

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

{% 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">
    <header>
        <h2 class="repo-name m-b-0">
            <span class="oi" data-glyph="people"></span> &nbsp;{{ group.group_name }}
            {% if authenticated and (member or admin) %}
              <form class="pull-xs-right" method="POST"
                action="{{ url_for('group_delete',
                    group=group.group_name) }}">
                {{ form.csrf_token }}
                <button
                  onclick="return confirm('Are you sure you want to delete the group `{{group.group_name}}`?');"
                  title="Delete group"
                  class="btn btn-danger">
                  <span class="oi" data-glyph="trash"></span> &nbsp;Delete group
                </button>
              </form>
             {% endif %}
        </h2>
        <div class="m-t-0">
          created {{ group.created |humanize }}
          by {{ group.creator.fullname }} ({{ group.creator.user }})
        </div>
        <div class="projectinfo m-t-1">
        </div>
    </header>
    <div class="row">
      <div class="col-md-8">
            {{ render_repos_as_card(
                group.projects, group.projects|count, 'Projects') }}
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-header">
            Group Members <span class="label label-default">{{group.users|count}}</span>
            {% if authenticated and (member or admin) %}
              <div id="add_user_button" class="btn btn-secondary btn-sm pull-xs-right"><span class="oi" data-glyph="plus"></span></div>
            {% endif %}
          </div>
          <div class="list-group list-group-flush">

            {% if authenticated and (member or admin) %}
            <div class="list-group-item" id="add_user_form_wrapper" style="display:none;">
              <form action="{{ url_for('.view_group', group=group.group_name)
                }}" method="post" id="add_user_form">
                  <input placeholder="search for user" class="form-control" id="user" name="user" title="User name"/>
                </div>
                {{ form.csrf_token }}
              </form>
            </div>
            {% endif %}

            {% for user in group.users %}
            <div class="list-group-item">
              <a href="{{ url_for('view_user', username=user.user)}}" title="{{ user.fullname }}" data-toggle="tooltip">
                {{ user.default_email | avatar(28) | safe }}
                {{ user.user }}
              </a>
              {% if authenticated and user != group.creator and (member or admin) %}
               <form class="pull-xs-right" method="POST" style="display: inline-block"
                action="{{ url_for('group_user_delete',
                    group=group.group_name, user=user.user) }}">
                {{ form.csrf_token }}
                <button
                  onclick="return confirm('Are you sure to remove user `{{
                    user.user}}` from the group `{{group.group_name}}`?');"
                  title="Remove user from group"
                  class="btn btn-sm btn-danger">
                  <span class="oi" data-glyph="trash"></span>
                </button>
              </form>
              {% endif %}
            </div>
            {% endfor %}
          </div> <!--list-group-->
        </div> <!--card-->
      </div> <!--col-md-4 -->
    </div> <!--row-->
  </div> <!--container-->
</div>

{% endblock %}

{% block jscripts %}
  {{ super() }}
  <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: 'group',
      labelField: 'group',
      searchField: 'group',
      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_groups') }}", {
            pattern: query
          },
          function( data ) {
            callback( data.groups.map(function(x) { return { group: x }; }) );
          }
        );
      }
    });

    var usersearch = $('#user').selectize({
      valueField: 'user',
      labelField: 'user',
      searchField: 'user',
      onChange: function(value){
        if (value != ""){
          $('#add_user_form').submit();
        }
      },
      maxItems: 1,
      create: false,
      preload: 'focus',
      load: function(query, callback) {
        $.getJSON(
          "{{ url_for('api_ns.api_users') }}",
          function( data ) {
            callback( data.users.map(function(x) { return { user: x }; }) );
          }
        );
      },
      render: {
        option: function(item, escape) {
        return '<div>' +
            '<div>' +
              '<span><strong>' + escape(item.user) + '</strong></span>' +
            '</div>' +
          '</div>';
        }
      },
    });

    $('#add_user_button').click(function(){
      $('#add_user_button').hide();
      $('#add_user_form_wrapper').show();
      usersearch[0].selectize.focus();
    });

  });
</script>
{% endblock %}