Top Bar dropdown

HTML


<div class="dropdown notif-ico-cnt">
    <a href="#" data-toggle="dropdown">
        <img src="{% static 'icons/icon_notification.svg' %}" alt="" class="notif-ico">
    </a>
    <div class="dropdown-menu dropdown-menu-right movies-dropdown" style="width: 240px;">
        <div class="list-group" id="booked-movies-list">
            <!-- Will be filled by js -->
        </div>
    </div>
</div>


<script>
$(document).ready(function(){
    if($("#booked-movies-list")) {
        populate_booked_movies()
    }
}

var populate_booked_movies = function() {
    var loc = $("#booked-movies-list")
    var html = '<div class="list-group-item">Booked movies:</div>';
    $.get("/api/notifications")
    .done(data => {
        var els = data.tickets
        if(els.length == 0){
            html += '<div class="list-group-item"><em>No movies booked...</em></div>'
        }

        for(var el of els){
            html += `<a href="/movies/${el.movie_id}" class="list-group-item list-group-item-action">
                <img src="/media/${el.movie_photo}" class="movie_icon_drd">
                <b>${el.movie_name}</b><br>
                <span>${el.show_datetime}</span>
            </a>`
        }
        loc.html(html)
    })
}
</script>



<style>

.movies-dropdown {
    padding: 0!important;
    border: 0!important;
    max-height: 300px;
    overflow-y: auto;
}
.movies-dropdown .movie_icon_drd {
    float: left;
    width: 23px;
    height: auto;
    vertical-align: middle;
    margin-right: 9px;
    margin-top: 8px;
}
</style>