{% extends "master.html" %}
{% from "_formhelper.html" import render_bootstrap_field %}

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

{% set tag = "groups" %}
{% block title %}Edit group: {{ group.group_name }}{% endblock %}

{% block content %}

<div class="container p-t-3">
  <div class="row">
    <div class="col-md-8 mx-auto mt-5">

      <div class="card m-t-3">
        <div class="card-header">
          <strong>Edit group: {{ group.group_name }}</strong>
        </div>
        <div class="card-block">
          <form action="{{ url_for('ui_ns.edit_group', group=group.group_name)
              }}" method="post">
              <table>
                {{ render_bootstrap_field(
                    form.display_name,
                    field_description="Name of the group that will be displayed in the UI") }}
                {{ render_bootstrap_field(
                    form.description,
                    field_description="Short description of the group") }}
              </table>
            <p class="buttons indent">
              <a href="{{ url_for(
                  'ui_ns.view_group', group=group.group_name) }}">
                <input type="button" value="Cancel" class="btn btn-secondary">
              </a>
              <input type="submit" class="btn btn-primary" value="Edit">
              {{ form.csrf_token }}
            </p>
          </form>
        </div>
      </div>
    </div>

    {% if group.creator.user == g.fas_user.username or g.admin %}
    <div class="col-md-8 mx-auto mt-5">
      <div class="col-md-offset-2">
        <div class="card-header">
          <strong>Give group away: {{ group.group_name }}</strong>
        </div>
        <div class="card-block">
          <form action="{{ url_for(
              'ui_ns.give_group', group=group.group_name) }}"
                method="post" class="icon">
            {{ form.csrf_token }}
            <input class="form-control" name="username" id="user"
              placeholder="Start typing to search users" value=""/>
            <button class="btn btn-danger give_group_btn" type="submit"
              title="Give the group to someone">
                <i class="fa fa-share-square-o"></i>&nbsp; Give the {{ group.group_name }} group
            </button>
          </form>
        </div>
      </div>
    </div>
    {% endif %}

  </div>
</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 }}">
$('#user').selectize({
  valueField: 'user',
  labelField: 'user',
  searchField: 'user',
  maxItems: 1,
  create: false,
  load: function(query, callback) {
    if (!query.length) return callback();
    $.getJSON(
      "{{ url_for('api_ns.api_users') }}", {
        pattern: query.term
      },
      function( data ) {
        callback( data.users.map(function(x) { return { user: x }; }) );
      }
    );
  }
});

$('.give_group_btn').click(function() {
  return confirm('Are you sure to give {{ group.group_name }}? \nThis is final and cannot be un-done.');
})
</script>
{% endblock %}