{% load static %}
{% load i18n %}

{% if not suit %}
  <script src="{% static "cerberus_ac/js/jquery-2.2.4.min.js" %}"></script>
  <script src="{% static "cerberus_ac/js/bootstrap.min.js" %}"></script>
  <link rel="stylesheet" type="text/css" href="{% static "cerberus_ac/css/bootstrap-combined.min.css" %}" media="screen" />
{% endif %}

<link rel="stylesheet" type="text/css" href="{% static "cerberus_ac/datatables/datatables.min.css" %}"/>
<script type="text/javascript" src="{% static "cerberus_ac/datatables/datatables.min.js" %}"></script>

<script>
$(document).ready( function () {
    $('#editprivtable').DataTable({
        paging: true
    });
} );

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});
</script>

<style>
{#    .hiddenRow {#}
{#        padding: 0 !important;#}
{#    }#}

{#    .table-responsive {#}
{#        min-height: .01%;#}
{#        overflow-x: auto;#}
{#    }#}
{##}
{#    @media screen and (max-width: 767px) {#}
{#    .table-responsive {#}
{#        width: 100%;#}
{#        margin-bottom: 15px;#}
{#        overflow-y: hidden;#}
{#        -ms-overflow-style: -ms-autohiding-scrollbar;#}
{#        border: 1px solid #ddd;#}
{#    }#}
{#    .table-responsive > .table {#}
{#        margin-bottom: 0;#}
{#    }#}
{#    .table-responsive > .table > thead > tr > th,#}
{#    .table-responsive > .table > tbody > tr > th,#}
{#    .table-responsive > .table > tfoot > tr > th,#}
{#    .table-responsive > .table > thead > tr > td,#}
{#    .table-responsive > .table > tbody > tr > td,#}
{#    .table-responsive > .table > tfoot > tr > td {#}
{#        white-space: nowrap;#}
{#    }#}
{#    .table-responsive > .table-bordered {#}
{#        border: 0;#}
{#    }#}
{#    .table-responsive > .table-bordered > thead > tr > th:first-child,#}
{#    .table-responsive > .table-bordered > tbody > tr > th:first-child,#}
{#    .table-responsive > .table-bordered > tfoot > tr > th:first-child,#}
{#    .table-responsive > .table-bordered > thead > tr > td:first-child,#}
{#    .table-responsive > .table-bordered > tbody > tr > td:first-child,#}
{#    .table-responsive > .table-bordered > tfoot > tr > td:first-child {#}
{#        border-left: 0;#}
{#    }#}
{#    .table-responsive > .table-bordered > thead > tr > th:last-child,#}
{#    .table-responsive > .table-bordered > tbody > tr > th:last-child,#}
{#    .table-responsive > .table-bordered > tfoot > tr > th:last-child,#}
{#    .table-responsive > .table-bordered > thead > tr > td:last-child,#}
{#    .table-responsive > .table-bordered > tbody > tr > td:last-child,#}
{#    .table-responsive > .table-bordered > tfoot > tr > td:last-child {#}
{#        border-right: 0;#}
{#    }#}
{#    .table-responsive > .table-bordered > tbody > tr:last-child > th,#}
{#    .table-responsive > .table-bordered > tfoot > tr:last-child > th,#}
{#    .table-responsive > .table-bordered > tbody > tr:last-child > td,#}
{#    .table-responsive > .table-bordered > tfoot > tr:last-child > td {#}
{#        border-bottom: 0;#}
{#    }#}
{#    }#}

    button.btn-check-success {
      background: #95d394; /* Old browsers */
      background: -moz-linear-gradient(top, #b2ecb2, #92cd96); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #b2ecb2, #92cd96); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #b2ecb2, #92cd96); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2ecb2', endColorstr='#92cd96',GradientType=0 ); /* IE6-9 */
    }
    button.btn-check-default {
      background: #faffff; /* Old browsers */
      background: -moz-linear-gradient(top, #faffff, #faffff); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #faffff, #faffff); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #faffff, #faffff); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faffff', endColorstr='#faffff',GradientType=0 ); /* IE6-9 */
    }
    button.btn-check-danger {
      background: #d68489; /* Old browsers */
      background: -moz-linear-gradient(top, #e59998, #e88b7f); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #e59998, #e88b7f); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #e59998, #e88b7f); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e59998', endColorstr='#e88b7f',GradientType=0 ); /* IE6-9 */
    }

    button.active.btn-check-success {
      background: #17e71a; /* Old browsers */
      background: -moz-linear-gradient(top, #2ce42b, #23e927); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #2ce42b, #23e927); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #2ce42b, #23e927); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ce42b', endColorstr='#23e927',GradientType=0 ); /* IE6-9 */
    }
    button.active.btn-check-default {
      background: #ffffff; /* Old browsers */
      background: -moz-linear-gradient(top, #ffffff, #ffffff); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #ffffff, #ffffff); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #ffffff, #ffffff); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    button.active.btn-check-danger {
      background: #e72f26; /* Old browsers */
      background: -moz-linear-gradient(top, #ee1f1e, #de1914); /* FF3.6-15 */
      background: -webkit-linear-gradient(top, #ee1f1e, #de1914); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(top, #ee1f1e, #de1914); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee1f1e', endColorstr='#de1914',GradientType=0 ); /* IE6-9 */
    }
</style>

<div class="table-responsive">
    <table id="editprivtable" class="table table-hover table-condensed table-striped" style="border-collapse:collapse;">
        <thead>
            <tr>
                <th>User</th>
                {% for r in box.context.resources %}
                    <th>{{ r }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
        {% for m in box.context.members %}
            <form action="{% url "admin:cerberus:edit_user_permissions_post" user=m.id %}" method="POST">
                <tr data-toggle="collapse" data-target=".userrow{{ m.id }}">
                    <td style="text-align: right" class="span5">
                        {{ m.username }}
                        <input type="submit" value="Save" name="submit_{{ m.id }}"/>
                        <input type="submit" value="Inherited" name="inherited_{{ m.id }}"/>
                    </td>
                    {% for r in box.context.resources %}
                        <td class="span2"></td>
                    {% endfor %}
                </tr>
                <tr>
                    <td class="hiddenRow">
                        <div id="userrow{{ m.id }}" class="collapse userrow{{ m.id }}">
                            ID : {{ m.id }}<br>
                            Groups: {{ m.get_groups }}<br>
                            Username : {{ m.username }}<br>
                            Mail : {{ m.email }} <br>
                            Active : {{ m.is_active }}<br>
                            Last login: {{ m.last_login }}<br>
                            Register date: {{ m.date_joined }}<br>
                        </div>
                    </td>
                    {% for r in box.context.resources %}
                        <td class="hiddenRow span2" >
                            <div class="row">
                                <div class="collapse userrow{{ m.id }}" style="text-align: right">
                                  <div>Create
                                    <div id="update_{{ m.id }}_{{ r.id }}" class="btn-group" data-toggle="buttons-radio">
                                        <button class="btn btn-check-success" id="allow_create_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-default" id="default_create_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-danger" id="deny_create_{{ m.id }}_{{ r.id }}" type="button"></button>
                                    </div></div>
                                  <div>Read
                                    <div id="read_{{ m.id }}_{{ r.id }}" class="btn-group" data-toggle="buttons-radio">
                                        <button class="btn btn-check-success" id="allow_read_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-default" id="default_read_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-danger" id="deny_read_{{ m.id }}_{{ r.id }}" type="button"></button>
                                    </div></div>
                                  <div>Update
                                    <div id="update_{{ m.id }}_{{ r.id }}" class="btn-group" data-toggle="buttons-radio">
                                        <button class="btn btn-check-success" id="allow_update_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-default" id="default_update_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-danger" id="deny_update_{{ m.id }}_{{ r.id }}" type="button"></button>
                                    </div></div>
                                  <div>Delete
                                    <div id="delete_{{ m.id }}_{{ r.id }}" class="btn-group" data-toggle="buttons-radio">
                                        <button class="btn btn-check-success" id="allow_delete_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-default" id="default_delete_{{ m.id }}_{{ r.id }}" type="button"></button>
                                        <button class="btn btn-check-danger" id="deny_delete_{{ m.id }}_{{ r.id }}" type="button"></button>
                                    </div></div>
                                </div>
                            </div>
                        </td>
                    {% endfor %}
                </tr>
            </form>
        {% endfor %}
        </tbody>
        <tfoot>
        </tfoot>
    </table>
    <div class="pagination">
        <span class="step-links">
            {% if box.context.members.has_previous %}
                <a href="?page_role={{ box.context.members.previous_page_number }}">Previous</a>
            {% endif %}

            <span class="current">
                Page {{ box.context.members.number }} of {{ box.context.members.paginator.num_pages }}.
            </span>

            {% if box.context.members.has_next %}
                <a href="?page_role={{ box.context.members.next_page_number }}">Next</a>
            {% endif %}
        </span>
    </div>
</div>
