{% block extras_js %}
<script type="text/javascript">
// URL cargar permisos
var CARGAR_PERMISOS = "{% url 'users:cargar_permisos' %}"
</script>
{% load staticfiles %}

<link rel="shortcut icon" type="image/png" href="{% static 'icon/favicon.ico' %}"/>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap-3/css/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">

<link rel="stylesheet" href="{% static 'fonts/font-awesome.min.css' %}">
<!-- Ionicons -->
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">

<link rel="stylesheet" href="{% static 'plugins/iCheck/square/blue.css' %}">
<script src="{% static 'DataTables/media/js/jquery.js' %}" type="text/javascript"></script>

<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap-3/js/bootstrap.min.js' %}" type="text/javascript"></script>

<!-- AdminLTE App -->
<script src="{% static 'dist/js/app.min.js' %}" type="text/javascript"></script>

<script src="{% static 'plugins/iCheck/icheck.min.js' %}"></script>
<script type="text/javascript" src="{% static 'users/user_register.js' %}"></script>
{% endblock extras_js %}
<form id="form_perfil" method="post">
    {% csrf_token %}
  <div class="form-group has-feedback">
    {{ form.first_name }}
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback">
    {{ form.last_name }}
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
  <div class="form-group has-feedback">
    {{ form.email }}
    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
  </div>
  {% if 'Administradores' in request.session.grupos %}
  <div class="row">
        <div class="col-xs-8">
        <div class="checkbox icheck">
          <label>
            {{ form.is_staff}}
          </label>
            {{ form.is_staff.label}}
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <div class="checkbox icheck">
          <label>
            {{ form.is_active}}
          </label>
            {{ form.is_active.label}}
          </div>
        </div>
        <!-- /.col -->
      </div>
      <div class="form-group has-feedback">
        <label>
              Grupos de Usuario
        </label>
        {{ form.groups }}
      </div>
      <div class="form-group has-feedback" id="permisos_form">
      <label>
          Permisos para el Usuario
        </label>
        {{ form.user_permissions }}
      </div>
  {% endif %}
<div class="modal-footer">
<input type="submit" value="Actualizar Perfil" class="btn btn-primary"/>
</form>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script type="text/javascript">
  $('#form_perfil').attr("action", (ruta_user+"/"));
  $(function () {
    $('#id_is_active, #id_is_staff').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
  });
</script>