{% extends "hr_base.html" %}

{% block headtitle %}Unassociated Members{% endblock %}


{% block hr_stylesheets %}
<style type="text/css">
#copy-modal {display: none;}
</style>
{% endblock %}

{% block breadcrumbs %}
<li><a href="/">Home</a></li>
<li><a href="/hr/">Human Resources</a></li>
<li><a href="/hr/members/">Members</a></li>
<li class="active"><a href="/hr/members/unassociated/">Unassociated</a></li>
{% endblock %}

{% block main_content %}
<div class="page-header">
  <h1>Unassociated Member List <small>last update {{ scan_date|ecm_datetime }}</small></h1>
</div>

<form id="search_form" class="form-search form-inline">
  <div class="btn-toolbar" >
    <input type="text" id="search_text" class="input-medium search-query" value="" />
    <div class="btn-group">
      <a class="btn btn-small" id="search_button"><i class="icon-search"></i> Search</a>
      <a class="btn btn-small" id="clear_search">Reset</a>
    </div>
    <a class="btn btn-small btn-primary" data-toggle="modal" data-target="#copy-modal" id="copy_to_clip">Copy to clipboard</a>
  </div>
</form>

<table class="table table-bordered table-condensed" id="members_table">
  <thead>
    <tr>
      <th class="top" scope="col" >Name</th>
      <th class="top" scope="col" >Nickname</th>
      <th class="top" scope="col" >Player</th>
      <th class="top" scope="col" >Access Level</th>
      <th class="top" scope="col" >Corp Date</th>
      <th class="top" scope="col" >Last Login</th>
      <th class="top" scope="col" >Location</th>
      <th class="top" scope="col" style="display:none;">Titles</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="8" class="dataTables_empty">Loading data from server...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Nickname</th>
      <th>Player</th>
      <th>Access Level</th>
      <th>Corp Date</th>
      <th>Last Login</th>
      <th>Location</th>
      <th style="display:none;">Titles</th>
    </tr>
  </tfoot>
</table>

<div class="modal" id="copy-modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Copy to clipboard: Ctrl+C, Escape</h3>
  </div>
  <div class="modal-body">
    <textarea id="text-block" style="width:100%;" rows="10"></textarea>
  </div>
</div>
{% endblock %}


{% block javascripts %}
<script type="text/javascript">
DIRECTOR_ACCESS_LVL = {{ directorAccessLvl }};
COLOR_THRESHOLDS = {{ colorThresholds|safe }};
AJAX_URL = '/hr/members/unassociated/data/';
COOKIE_NAME = 'ecm_unassociated_table_';
</script>
{% endblock %}

{% block compressed_javascripts %}
<script type="text/javascript" src="{{ STATIC_URL }}hr/js/members_table.js"></script>
{% endblock %}

{% block post_javascripts %}
<script type="text/javascript">
$(document).ready(function() {
    $('#copy_to_clip').click(function (event) {
        $.get('/hr/members/unassociated/clip/')
         .success(function (data) {
             $('#text-block').val(data);
             $('#text-block').focus();
             $('#text-block').select();
         });
    });
    
    $('#copy-modal').on('hidden', function () {
        $('#text-block').val('');
    });
});
</script>
{% endblock %}