{% extends "hr_base.html" %}

{% block headtitle %}Role Details - {{ role }}{% endblock %}



{% block breadcrumbs %}
<li><a href="/">Home</a></li>
<li><a href="/hr/">Human Resources</a></li>
<li><a href="/hr/roles/">Roles</a></li>
<li class="active"><a href="/hr/roles/{{ role.id }}/">{{ role.name }} <em>({{ role.roleType.dispName }})</em></a></li>
{% endblock %}

{% block main_content %}
<div class="page-header">
<h1>{{ role.name }} <small>{{ role.roleType.dispName }}</small></h1>
</div>
<p>{{ role.description }}</p>

<h2>Access Level</h2>
<div class="row-fluid editable bold" id="{{ role.id }}">{{ role.accessLvl }}</div>


<h2>Members having the role <small>{{ role.name }} <em>{{ role.roleType.dispName }}</em></small></h2>
<ul>
  <li>
    <b>Assigned directly:</b>
    {% if direct_member_count %}
    {{ direct_member_count }} member{{ direct_member_count|pluralize }}
    {% else %}
    None
    {% endif %}
  </li>
  <li>
    <b>Assigned through titles:</b>
    {% if total_member_count %}
    {{ total_member_count }} member{{ total_member_count|pluralize }}
    {% else %}
    None
    {% endif %}
  </li>
</ul>

<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>
  </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>

{% endblock %}



{% block javascripts %}
<script type="text/javascript">
DIRECTOR_ACCESS_LVL = {{ directorAccessLvl }};
COLOR_THRESHOLDS = {{ colorThresholds|safe }};
AJAX_URL = "/hr/roles/{{ role.id }}/data/";
COOKIE_NAME = 'ecm_role_members_table_';
</script>
{% endblock %}

{% block post_javascripts %}
<script type="text/javascript" src="{{ STATIC_URL }}hr/js/members_table.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('div#{{role.id}}').editable( '/hr/roles/update/', {
        callback: function( sValue, y ) {
            $('div#{{role.id}}').text(sValue);
            var color = getAccessColor(parseInt(sValue), COLOR_THRESHOLDS);
            $('div#{{role.id}}').attr('class', 'row-fluid editable bold row-' + color);
        },
        tooltip: 'Click to edit...'
    } );

    var color = getAccessColor(parseInt($('div#{{role.id}}').text()), COLOR_THRESHOLDS);
    $('div#{{role.id}}').addClass('row-' + color);
});
</script>
{% endblock %}