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

<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 type="text/javascript" language="javascript" class="init">
  var generic_url = '{% url "admin:cerberus:edit_privileges_ajax" box.context.role_type box.context.resource_type 'ro' 'rs' 'p' 'a' %}';
  function set_privilege(role_id, resource_id, privilege, action) {
    var final_url = generic_url.replace('/ro/rs/p/a', '/' + role_id + '/' + resource_id + '/' + privilege + '/' + action);
    $.ajax({
      url: final_url,
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        var status = data.success? 'success': 'failure';
        $("#notifications").prepend(
          '<div class="notification ' +
          status + '">' + data.message + '</div>');
{#          <span class="dismiss"><a title="Close">&#10799;</a></span>' +#}
{#          data.message + '</div>');#}
        $(".notification:first").delay(5000).fadeOut("slow");
{#        $(".dismiss:first").click(function() {#}
{#          var parent = $(this).parent();#}
{#          parent = parent.get(0);#}
{#          parent = $(parent);#}
{#          parent.fadeOut("slow");#}
{#        });#}
      }
    });
  }
</script>

<style>
  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 */
  }

  #notifications {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 300px;
    min-width: 150px;
    z-index: 105;
    text-align: center
  }
  .notification {
    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    padding: 5px;
  }
  .notification.success {
    background-color: #43c77d
  }
  .notification.failure {
    background-color: #c78182
  }
  .notification span.dismiss {
    border: 1px solid #FFF;
    padding: 0 5px;
    cursor: pointer;
    float: right;
    margin-left: 5px;
    margin-right: 5px;
  }
  .notification a {
    color: white;
    text-decoration: none;
  }
</style>

<div id="notifications"></div>

<div class="table-responsive">
    <table id="editprivtable" class="table table-bordered">
      <thead>
        <tr>
          <th>Role</th>
          {% for resource in box.context.resources %}
            <th style="text-align: center;">{{ resource }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for role in box.context.roles %}
          <tr>
            <td data-toggle="collapse" data-target=".rolerow{{ role.id }}" style="text-align: right" class="span5">
              {{ role }}
            </td>
            {% for resource in box.context.resources %}
              <td class="collapse">
                <div class="row">
                  <div class="collapse rolerow{{ role.id }}" style="text-align: center">
    {#                <div>{% trans "Create" %}#}
    {#                  <div id="update_{{ role.id }}_{{ resource.id }}" class="btn-group" data-toggle="buttons-radio">#}
    {#                    <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'create', 'allow')" class="btn btn-check-success" type="button"></button>#}
    {#                    <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'create', 'forget')" class="btn btn-check-default" type="button"></button>#}
    {#                    <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'create', 'deny')" class="btn btn-check-danger" type="button"></button>#}
    {#                  </div></div>#}
                    <div>{% trans "Read" %}
                      <div id="read_{{ role.id }}_{{ resource.id }}" class="btn-group" data-toggle="buttons-radio">
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'read', 'allow')" class="btn btn-check-success" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'read', 'forget')" class="btn btn-check-default" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'read', 'deny')" class="btn btn-check-danger" type="button"></button>
                      </div></div>
                    <div>{% trans "Update" %}
                      <div id="update_{{ role.id }}_{{ resource.id }}" class="btn-group" data-toggle="buttons-radio">
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'update', 'allow')" class="btn btn-check-success" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'update', 'forget')" class="btn btn-check-default" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'update', 'deny')" class="btn btn-check-danger" type="button"></button>
                      </div></div>
                    <div>{% trans "Delete" %}
                      <div id="delete_{{ role.id }}_{{ resource.id }}" class="btn-group" data-toggle="buttons-radio">
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'delete', 'allow')" class="btn btn-check-success" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'delete', 'forget')" class="btn btn-check-default" type="button"></button>
                        <button onclick="set_privilege({{ role.id }}, {{ resource.id }}, 'delete', 'deny')" class="btn btn-check-danger" type="button"></button>
                      </div></div>
                  </div>
                </div>
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
</div>

<script type="text/javascript" language="javascript" class="init">
$(document).ready( function () {
    $('#editprivtable').DataTable({
        paging: true,
        scrollX: true,
        serverSide: true,
        processing: true,
        autoWidth: true,
        deferRender: true,
        ajax: {
            url: "{% url 'admin:cerberus:edit_privileges_json' role_type=box.context.role_type resource_type=box.context.resource_type %}",
            type: "POST",
            dataFilter: function(data) {
                var json = jQuery.parseJSON(data);
                return JSON.stringify(json)
            }
        }
    });
} );
</script>