<div class="kt-head kt-head--skin-dark kt-head--fit-x kt-head--fit-b" style="background-image: url({{ asset('assets/media/misc/bg-1.jpg') }})"> <h3 class="kt-head__title"> Notifications </h3> <ul class="nav nav-tabs nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-success kt-notification-item-padding-x" role="tablist"> <li class="nav-item"></li> </ul></div><div class="tab-content"> {% if notifications %} <div class="tab-pane active show" id="topbar_notifications_notifications" role="tabpanel"> <div class="kt-notification kt-margin-t-10 kt-margin-b-10 kt-scroll" data-scroll="true" data-height="300" data-mobile-height="200"> {% for notification in notifications %} <a href="{{ path('notification_read', {'id': notification.id}) }}" class="kt-notification__item"> <div class="kt-notification__item-details"> <div class="kt-notification__item-title"> {{ notification.message }} </div> </div> </a> {% endfor %} </div> </div> {% else %} <div class="tab-pane active show" id="topbar_notifications_logs" role="tabpanel"> <div class="kt-grid kt-grid--ver" style="min-height: 200px;"> <div class="kt-grid kt-grid--hor kt-grid__item kt-grid__item--fluid kt-grid__item--middle"> <div class="kt-grid__item kt-grid__item--middle kt-align-center"> All caught up! <br>No unread notifications. </div> </div> </div> </div> {% endif %}</div>