jQuery(function($) {
  "use strict";
  var TEMPLATES = new LuigiTemplate.Cache({
    user: [
      "<a ",
        "href='#' ",
        "class='list-group-item %{css|h}' ",
        "title='Set user to \"%{name|h}.\"' ",
        "data-user_id='%{id|h}' ",
      ">",
        "<i class='fa fa-fw fa-spinner fa-spin hidden loading'></i>",
        "<i class='fa fa-fw fa-user loading'></i>",

        " ",

        "%{name|h}",
      "</a>",
    ],

    loading: [
      "<span class='list-group-item disabled'>",
        "<i class='fa fa-spinner fa-spin'></i>",
        " ",
        "Loading...",
      "</span>",
    ],

    error: [
      "<span class='list-group-item list-group-item-danger disabled'>",
        "<i class='fa fa-exclamation-triangle'></i>",
        " ",
        "Error: %{responseText|h}",
      "</span>",
    ],
  });

  function reload() {
    var btn = $('#reload'),
        list = $('#users');

    // show loading
    btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
    list.html(TEMPLATES.run('loading'));

    send('test/get_users').always(function() {
      btn.toggleClass('disabled').find('.loading').toggleClass('hidden');
      list.html('');
    }).fail(function(r) {
      console.log('get_users failed: ' + r.responseText);
      list.html(TEMPLATES.run('error', r));
    }).done(function(r) {
      list.html($.map(r.users, function(row) {
        return TEMPLATES.run('user', $.extend({}, row, {
          css: row.active ? 'active' : '',
        }));
      }).join(''));
    });

    // stop event
    return false;
  }

  $('#users').on('click', 'a.list-group-item', function() {
    var me = $(this);

    // update highlight
    var last = $('#users .active').removeClass('active');
    me.addClass('active');

    // show spinner
    me.addClass('disabled').find('.loading').toggleClass('hidden');

    send('test/set_user', {
      user_id: me.data('user_id'),
    }).always(function() {
      // hide spinner
      me.removeClass('disabled').find('.loading').toggleClass('hidden');
    }).fail(function(r) {
      alert('Error ' + r.responseText);
      // restore old highlight
      me.removeClass('active');
      last.addClass('active');
    }).done(function(r) {
      // do nothing
    });

    // stop event
    return false;
  });

  $('#reload').click(reload);

  // load users
  reload();
});