{% extends 'layout.html' %}
{% load assets %}
{% block title %}Users{%endblock%}
{% block title_html %}
    <h1>User Accounts</h1>
{% endblock %}
{% block content %}
    <table class="user-list primary-table status-{{product.key}}">
        <thead >
            <tr>
                <th data-property="username" title="Click to sort">
                    User
                    {% if perms.auth.create_user %}
                    <a href="{% url 'user' %}" class="flat-button">New User</a>
                    {% endif %}
                </th>
                <th data-property="email" title="Click to sort">Email</th>
                <th data-property="first_name" title="Click to sort">First Name</th>
                <th data-property="last_name" title="Click to sort">Last Name</th>
                <th>Groups</th>
            </tr>
        </thead>
        <tbody>
            {% for user in user_list %}
            <tr class="user {% if user.username == request.user.username %}current-user{% endif %} {% if user.is_superuser %}superuser{% endif %}">
                <th>
                    <i class="fa fa-user" />
                    {% if perms.auth.create_user or user.username == request.user.username %}
                    <a href="{% url 'user' user=user.id %}" class="flat-button username">{{user.username}}</a>
                    {% else %}
                    {{user.username}}
                    {% endif %}
                </th>
                <td>
                    <a href="mailto:{{user.email}}" class="email">{{user.email}}</a>
                </td>
                <td class="first-name">
                    {{user.first_name}}
                </td>
                <td class="last-name">
                    {{user.last_name}}
                </td>
                <td class="groups">
                    {% if user.groups.count %}
                        <ul class="groups no-bullets compact-list">
                            {% for group in user.groups.all %}
                                <li class="group">{{group}}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr class="no-servers">
                <td colspan="8">No users defined</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    <div class="clear-both"></div>

{% endblock %}

{% block page_styles %}
{% assets "css_encprofile" %}
    <link rel="stylesheet" type="text/css" media="screen" href="{{ASSET_URL}}">
{% endassets %}

<style type="text/css">
    .user.current-user {
        background-color: white;
    }
</style>
{% endblock %}
{% block page_templates %}
<span class="sort-ascending-icon sort-icon fa fa-sort-amount-asc"></span>
<span class="sort-descending-icon sort-icon fa fa-sort-amount-desc"></span>
{% endblock %}
{% block page_scripts %}
<script type="text/javascript" src="{{STATIC_URL}}js/vendor/jquery.tinysort.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('.status-overview').each( function() {
        var status_table = $(this);
        status_table.attr( 'data-sort-order', '' );
        var sort_order = [ 'username' ];
        status_table.find( 'thead th').each( function () {
            var header = $(this);
            var property = header.attr( 'data-property' );
            if (property) {
                header.addClass( 'clickable' );
                header.click( function() {
                    var options = {}
                    status_table.find( 'thead .sort-icon' ).remove();
                    status_table.find( 'thead th').each( function() {
                        $(this).removeClass( 'sorted-by' );
                    });
                    if (status_table.attr( 'data-sort-order' ) == property) {
                        options['order'] = 'desc';
                        status_table.attr( 'data-sort-order', '-' + property );
                        header.addClass( 'sorted-by' );
                        header.addClass( 'descending' );
                        header.find( '.sort-icon' ).remove();
                        header.prepend( $('.templates .sort-descending-icon' ).clone());
                    } else {
                        status_table.attr( 'data-sort-order', property );
                        header.addClass( 'sorted-by' );
                        header.prepend( $('.templates .sort-ascending-icon' ).clone());
                    }
                    status_table.find( 'tbody tr' ).tsort( '.'+property, options );
                });
            }
        });
    });
});
</script>
{% endblock %}