mixin renderKaleidoscopeEvent (event)
  div(
    data-event-id= event._id,
    data-event-source= event.source.pkg.name,
    data-event-action= event.action,
  ).kaleidoscope-event
    if event.thumbnail
      img(src= event.thumbnail).event-feature-img

    header.event-header
      if event.label
        h4.uk-comment-title.uk-margin-small= event.label

      div(uk-grid).uk-grid-small.uk-flex-middle
        if event.source.emitter
          .uk-width-auto
            a(href= event.source.emitter.href, uk-tooltip= `Visit ${event.source.emitter.displayName || event.source.emitter.username } at ${event.source.site.name}`)
              img(src=`//${event.source.site.domain}/hive/user/${event.source.emitter.emitterId}/picture`).site-profile-picture.sb-xsmall
        .uk-width-expand
          if event.source.emitter
            .uk-text-bold= event.source.emitter.displayName
            .uk-text-small
              a(
                href= event.source.emitter.href,
                title= `Visit ${event.source.emitter.displayName || event.source.emitter.username } at ${event.source.site.name}`,
              ) #{event.source.emitter.username}@#{event.source.site.domainKey}

    .event-content!= marked.parse(event.content)

    .event-footer
      div(uk-grid).uk-grid-small.uk-flex-middle
        .uk-width-auto
          .uk-text-small.uk-text-muted
            a(href= event.href, title= "Open destination")= moment(event.created).fromNow()
        .uk-width-auto
          .uk-text-small.uk-text-muted #[span= event.source.pkg.name]
        .uk-width-expand
          .uk-text-small.uk-text-muted= event.action
        .uk-width-auto
          a(href=`//${event.source.site.domain}`, title= event.source.site.name)
            img(
              src=`//${event.source.site.domain}/img/icon/${event.source.site.domainKey}/icon-16x16.png`,
            ).site-favicon