-pages = (total.to_f / filters.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

-if authenticated(User).admin?
  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

-if authenticated(User).admin?
  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

-if authenticated(User).admin?

== 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();
    }
  });
}