-pages = (total.to_f / filters[:limit].to_f).ceil
.block-header
  h2 
    | Notificaciones
    .pull-right #{total} notificaciones en #{pages} páginas

-if notifications.empty?
  == empty_alert({ :title => "No tienes notificaciones", :message => "Cuando recibas notificaciones podrás verlas en esta pantalla."})
-else
  .row
    .col-xs-3
      == slim "sinatra-hexacta/notifications/form".to_sym, locals: { :notifications => notifications, :total => total, :filters => filters, :query => query }
    .col-xs-9
      .m-b-5
        a.btn.bgm-blue.m-r-5 role="button" onclick="$('input[type=checkbox]').prop('checked', false);$('input[type=checkbox]').click();"Seleccionar todos
        a.btn.btn-default.m-r-5 role="button" onclick="$('input[type=checkbox]').prop('checked', true);$('input[type=checkbox]').click();" Deseleccionar todos
      .card
        .listview
          .lv-body
            -for notification in notifications
              .lv-item style="padding:10px 15px;border-bottom:1px solid #eee;#{notification.pending?? 'background-color: #ECF9FF;' : ''}"
                .media
                  .pull-left.text-center.p-r-15
                    img.lv-img-sm alt="" src="#{Configuration::USER_PHOTO_URL}#{notification.creator.hxt_id}" onError="this.onerror=null;this.src='/sinatra-hexacta/img/noimage.jpg';" title="#{notification.creator.full_name}"
                    input type="checkbox" name="notifications[]" value="#{notification.id}" style="position: absolute;left: 5px;bottom: 5px;" 
                  .media-body
                    small.lv-small
                      -if notification.label == 'error'
                        .btn.btn-link.bgm-red.btn-xs style="font-size:6pt" #{notification.label}
                      -else
                        .btn.btn-link.bgm-blue.btn-xs style="font-size:6pt" #{notification.label}
                      .di-block.m-l-5 #{notification.creation_date.display}
                    .lv-title #{notification.title}
                    small.lv-small style="white-space: normal;" #{notification.message.truncate(300)}
                .pull-right
                  ul.lv-actions.actions
                    li
                      a role="button" title="Borrar" onclick="rm_object('notifications','#{notification.id}')"
                        i.zmdi.zmdi-delete
                    li
                      a role="button" onclick="#{notification.pending?? "read_notify(#{notification.id},'#{notification.link}');this.onclick=''" : ''}" href="#{notification.pending?? '#' : notification.link}"
                        i.zmdi.zmdi-open-in-new


-total_pending = Notification.pending.for(authenticated(User)).exclude_message.count

.footer-btn
  -unless authenticated(User).permissions.empty?
    a.btn.btn-float.bgm-blue.m-btn.waves-effect.waves-circle.waves-float data-toggle="modal" data-target="#new-notification"
      i.zmdi.zmdi-notifications-active
  -if total_pending > 0
    a.btn.btn-float.bgm-green.m-btn.waves-effect.waves-circle.waves-float onclick="read_all_notifications(#{{Notification.pending.for(authenticated(User)).exclude_message.all.collect { |notification| notification.id}}});this.onclick='';"
      i.zmdi.zmdi-check-all
  a.btn.btn-float.bgm-red.m-btn.waves-effect.waves-circle.waves-float.delete-notifications.hidden.animated.bounceIn onclick="delete_all_notifications();this.onclick='';"
    i.zmdi.zmdi-delete

.footer-text
  -unless authenticated(User).permissions.empty?
    a.text.btn.bgm-white.c-gray data-toggle="modal" data-target="#new-notification" Nueva notificación
  -if total_pending > 0
    a.text.btn.bgm-white.c-gray onclick="read_all_notifications(#{{Notification.pending.for(authenticated(User)).exclude_message.all.collect { |notification| notification.id}}});this.onclick='';" Marcar como leidas
  a.text.btn.bgm-white.c-gray.delete-notifications.hidden.animated.bounceIn onclick="delete_all_notifications();this.onclick='';" Borrar notificaciones

-unless authenticated(User).permissions.empty?
  == slim :'sinatra-hexacta/notifications/new'

javascript:
  function read_all_notifications(ids) {
    $.ajax({
      url: '/notifications',
      type: 'POST',
      data: { ids : ids },
      success: function(result) {
        location.reload();
      }
    });
  }

  var selected_ids = [];
  $(document).ready(function(){
    $("input[type=checkbox]").on( "click", function() {
      selected_ids = [];
      if ($( "input:checked" )[0]) {
        $.each($("input[name='notifications[]']:checked"), function(){
          selected_ids.push($(this).val());
        });
        $(".delete-notifications").removeClass("hidden");
      } else {
        $(".delete-notifications").addClass("hidden");
      }
    });
  });

  function delete_all_notifications() {
    $.ajax({
      url: '/notifications',
      type: 'DELETE',
      data: { ids : selected_ids },
      success: function(result) {
        location.reload();
      }
    });
  }