{% extends "layouts/base.html" %}

{% load static %}
{% load sizify %}
{% load colorefy %}
{% load jsonify %}
{% load valid_extension %}
{% load has_youtube_upload %}

{% block stylesheet %}
    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
    <style>
        html {
            --plyr-color-main: var(--global-color);
        }
        .plyr {
            border-radius: 6px !important;
            min-width: 100% !important;
        }
        .media_show {
            border-radius: 10px !important;
            max-height: 350px !important;
        }
        .plyr:fullscreen video{
          max-height: initial;
        }
    </style>
{% endblock %}

{% block title %} Dashboard {% endblock title %}

{% block content %}
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
     <!--begin::Container-->
     <div class="container-xxl" id="kt_content_container"> 
        <!-- begin:: Upload Card -->
        <div class="col g-5 g-xl-10 mb-5 mb-xl-5">
            <!-- begin::Engage widget 2 -->
            <div class="card card-xl-stretch bg-body border-0 mb-5 mb-xl-0">
                <!-- begin::Body -->
                <div class="card-body d-flex flex-column flex-lg-row flex-stack justify-content-center p-lg-10">
                    <!-- begin::Info -->
                    <div class="d-flex flex-column justify-content-center align-items-center align-items-lg-center me-10 text-center text-lg-start">
                        <!-- begin::Title -->
                        <div class="d-flex align-items-center text-center unselectable">
                            <h2 class="fs-1hx line-height-lg mb-5">
                                Let’s get going, Creator! 
                            </h2>
                        </div>
                        <!-- end::Title --> 
                        <!-- begin::Button New Project  -->
                        <div class="d-flex ms-3">
                            {% if user|reached_upload_limit %}
                            <button class="btn btn-flex flex-center btn-primary fw-bold w-40px w-md-auto h-40px px-0 px-md-6" data-bs-toggle="modal" data-bs-target="#kt_modal_upload_media">
                            {% else %}
                            <button class="btn btn-flex flex-center btn-primary fw-bold w-40px w-md-auto h-40px px-0 px-md-6" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="left" data-bs-dismiss="click" title="You have Retched Limited Videos For Today.">
                            {% endif %}
                                <!-- begin::Icon -->
                                <span class="svg-icon svg-icon-2 svg-icon-primary me-0 me-md-2">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor" />
                                        <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
                                    </svg>
                                </span>
                                <!-- end::Icon -->
                                <span class="d-none d-md-inline">New project</span>
                            </button>
                        </div>
                        <!-- end::Button New Project -->
                    </div>
                    <!-- end::Info -->
                </div>
                <!--end::Body-->
            </div>
            <!--end::Engage widget 2-->
        </div>
        <!--end:: Upload Card -->
        <!-- begin:: Info Card -->
        {% comment %} <div class="col g-5 g-xl-10 mb-5 mb-xl-5">
            <!-- begin::Engage widget 2 -->
            <div class="card card-xl-stretch bg-body border-0 mb-5 mb-xl-0">
                <!-- begin::Body -->
                <div class="card-body d-flex flex-column flex-lg-row flex-stack justify-content-center p-lg-15">
                    <!-- begin::Info -->
                    <div class="d-flex flex-column justify-content-center align-items-center align-items-lg-center me-10 text-center text-lg-start">
                        <!-- begin::Title -->
                        <div class="d-flex align-items-center text-center unselectable">
                            <h2 class="fs-1hx line-height-lg mb-5">
                                How to use video and a video where the background noise has been stripped.
                            </h2>
                        </div>
                        <!-- end::Title -->
                    </div>
                    <!-- end::Info -->
                </div>
                <!--end::Body-->
            </div>
            <!--end::Engage widget 2-->
        </div> {% endcomment %}
        <!--end:: Info Card -->
        <!--begin::Row Last Traited Video -->
        <div class="row g-5 g-xl-10 mb-5 mb-xl-5">
            <div class="col-xl-6">
                <div class="card card-flush h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header bg-black" style="min-height: 35px;">
                        <!--begin::Title-->
                        <h3 class="card-title fw-bold text-white"> Content: UseVoice generated </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Card body-->
                    <div class="media_show card-body bg-black p-0 ">
                        <video id="generated" class="media_show" playsinline controls data-poster="{{ last_video.media.thumbnail.url }}" preload="metadata" height="255px" width="470px">
                            <source src="{{ last_video.url_video }}" />
                        </video>
                    </div>
                    <!--end::Card body-->
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card card-flush h-xl-100">
                    <!--begin::Header-->
                    <div class="card-header bg-black" style="min-height: 35px;">
                        <!--begin::Title-->
                        <h3 class="card-title fw-bold text-white"> Content: original </h3>
                        <!--end::Title-->
                    </div>
                    <!--end::Header-->
                    <!--begin::Card body-->
                    <div class="card-body bg-black p-0 media_show">
                        <video id="original" class="media_show" playsinline controls data-poster="{{ last_video.media.thumbnail.url }}" preload="metadata" height="255px" width="470px">
                            <source src="{{ last_video.media.original_file.url_video }}" />
                        </video>
                    </div>
                    <!--endend::Card body-->
                </div>
            </div>
        </div>
        <!--end:: Row Last Traited Video -->
        <!-- begin:: Last Uploaded Card -->
        <div class="col g-5 g-xl-10 mb-5 mb-xl-5">
            <!-- begin::Engage List of Uploaded Video -->
            <div class="card card-flush">
                <!-- begin::Header -->
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column unselectable">
                        <span class="card-label fw-bolder fs-3 mb-1"> Latest uploaded video </span>
                        <span class="text-muted mt-1 fw-bold fs-7"> Latest 5 videos </span>
                    </h3>
                </div>
                <!-- end::Header -->
                <!-- begin::Table -->
                <div id="kt_file_manager_list_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer m-2 p-2">
                    <div class="table-responsive">
                        <table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4" id="kt_media_table">

                            <!-- begin::Table head -->
                            <thead>
                                <tr class="fw-bolder text-muted">
                                    <th class="min-w-125px"> New Video </th>
                                    <th class="min-w-5px"> Status </th>
                                    <th class="min-w-60px"> Upload date </th>
                                    <th class="min-w-30px max-w-45px text-end"> Actions </th>
                                </tr>
                            </thead>
                            <!-- end::Table head -->
                            <!-- begin::Table body -->
                            <tbody>
                                <!-- begin::For Loop ON lATEST Files Uploaded -->  
                                {% for video in Videos %}
                                <tr class="odd" id="{{ video.media.id_media }}">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="col-md-5 mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view generated media">
                                                <!--begin::Overlay-->
                                                {% if  video.status != 'Completed' %}
                                                <a class="d-block overlay m-3" data-fslightbox="lightbox-hot-sales unselectable">
                                                {% else %}
                                                <a class="d-block overlay m-3" data-fslightbox="lightbox-hot-sales" href="#"  data-bs-toggle="modal" data-bs-target="#streamModal" onclick='init_video("{{ video.url_video }}")'>
                                                {% endif %}
                                                    <!--begin::Image-->
                                                    <div class="overlay-wrapper bgi-position-center bgi-no-repeat bgi-size-cover h-50px card-rounded mb-3" style="background-image:url('{{ video.media.thumbnail.url }}')"></div>
                                                    <!--end::Image-->
                                                    <!--begin::Action-->
                                                    <div class="overlay-layer card-rounded bg-dark bg-opacity-50">
                                                        <i class="fad fa-eye fa-2x text-white"></i>
                                                    </div>
                                                    <!--end::Action-->
                                                </a>
                                                <!--end::Overlay-->
                                            </div>
                                            <div class="d-flex flex-column flex-grow-1" data-bs-toggle="tooltip" data-bs-trigger="hover" title="{{ video.media.original_file.name }}">
                                                <a class="text-gray-800 fw-bolder text-hover-primary mb-1 fs-6">{{ video.media.title|safe|truncatechars:30 }}</a>
                                                <span class="text-muted font-size-sm text-gray-400 fw-semibold d-block fs-7">
                                                    <span class="text-dark-75 font-weight-bolder"> Size: </span>
                                                    <span class="text-muted font-weight-bolder"> {{ video.media.size|sizify }} </span>
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-success fw-bold  d-block mb-1 fs-6 mt-5" style="color: {{video.status|colorefy}} !important;"> {{ video.status }} </span>
                                    </td>
                                    <td>
                                        <span class="text-muted d-block mb-1 fs-6 mt-5">
                                            <!-- <span class="text-gray-600 font-weight-bolder">Modified:</span> -->
                                            <span class="text-muted font-weight-bolder"> {{ video.converted_time|date:"Y-m-d H:m:s" }} </span>
                                        </span>
                                    </td>
                                    <td class="text-end" data-kt-filemanager-table="action_dropdown">
                                        <div class="d-flex justify-content-end">
                                            <!--begin::Show Parts Time List -->
                                            <div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view parts list ">
                                                <button type="button" class="btn btn-sm btn-light btn-active-light-primary"  data-bs-toggle="modal" data-bs-target="#kt_parts_time_list_media" onclick='load_parts("{{ video.parts }}")' title="Click to load parts">
                                                    <span class="fad fa-clock svg-icon svg-icon-2x m-0"></span>
                                                </button>
                                            </div>
                                            <!--end::Show Parts Time List -->
    
                                            <!--begin::Show New File -->
                                            <div class="ms-2 " data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to view the original media ">
                                                <button type="button" class="btn btn-sm btn-light btn-active-light-primary"  data-bs-toggle="modal" data-bs-target="#streamModal" onclick='init_video("{{ video.media.original_file.url_video }}")' >
                                                    <span class="fs-7" >View Original Video </span>
                                                    <span class="fad fa-eye svg-icon svg-icon-5 m-0"></span>
                                                </button>
                                            </div>
                                            <!--end::Show New File-->
    
                                            {% if user.email|has_youtube_upload %}
                                            <!-- begin :: Upload To Youtube -->
                                            <div class="ms-2" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Click here to upload this media to your channel.">
                                                <a href="{% url 'uploads:authorize' video.id %}" class="{% if  video.status != 'Completed' %} btn btn-sm btn-icon btn-light btn-active-light-danger unselectable {% else %} btn btn-sm btn-icon btn-light btn-active-light-danger {% endif %}" >
                                                    <!-- begin :: Svg Icon | path: assets/media/icons/duotune/social/soc007.svg -->
                                                    <span class="svg-icon svg-icon-muted svg-icon-2x">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                            <path d="M21 6.30005C20.5 5.30005 19.9 5.19998 18.7 5.09998C17.5 4.99998 14.5 5 11.9 5C9.29999 5 6.29998 4.99998 5.09998 5.09998C3.89998 5.19998 3.29999 5.30005 2.79999 6.30005C2.19999 7.30005 2 8.90002 2 11.9C2 14.8 2.29999 16.5 2.79999 17.5C3.29999 18.5 3.89998 18.6001 5.09998 18.7001C6.29998 18.8001 9.29999 18.8 11.9 18.8C14.5 18.8 17.5 18.8001 18.7 18.7001C19.9 18.6001 20.5 18.4 21 17.5C21.6 16.5 21.8 14.9 21.8 11.9C21.8 9.00002 21.5 7.30005 21 6.30005ZM9.89999 15.7001V8.20007L14.5 11C15.3 11.5 15.3 12.5 14.5 13L9.89999 15.7001Z" fill="currentColor"/>
                                                        </svg>
                                                    </span>
                                                    <!-- end :: Svg Icon -->
                                                </a>
                                            </div>
                                            <!-- end :: Upload To Youtube -->
                                            {% endif %}
    
                                            <!--begin::Share link-->
                                            <div class="ms-2" data-kt-filemanger-table="copy_link" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here for the generated media url.">
                                                {% if  video.status != 'Completed' %}
                                                <button type="button" class=" btn btn-sm btn-icon btn-light btn-active-light-primary unselectable"  aria-label="Link">
                                                    <i class="fad fa-link fa-lg"></i>
                                                </button>
                                                {% else %}
                                                <button type="button" class="btn btn-sm btn-icon btn-light btn-active-light-primary " data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" aria-label="Link">
                                                    <i class="fad fa-link fa-lg"></i>
                                                </button>
                                                {% endif %}
                                                    
                                                <!--begin::Menu-->
                                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-300px" data-kt-menu="true">
                                                    <!--begin::Card-->
                                                    <div class="card card-flush">
                                                        <div class="card-body p-5">
                                                            <!--begin::Loader-->
                                                            <div class="d-flex d-none" data-kt-filemanger-table="copy_link_generator">
                                                                <!--begin::Spinner-->
                                                                <div class="me-5" data-kt-indicator="on">
                                                                    <span class="indicator-progress">
                                                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                                                    </span>
                                                                </div>
                                                                <!--end::Spinner-->
                                                                <!--begin::Label-->
                                                                <div class="fs-6 text-dark">Generating Share Link...</div>
                                                                <!--end::Label-->
                                                            </div>
                                                            <!--end::Loader-->
                                                            <!--begin::Link-->
                                                            <div class="d-flex flex-column text-start" data-kt-filemanger-table="copy_link_result">
                                                                <div class="d-flex mb-3">
                                                                    <i class="fad fa-check fa-lg svg-icon svg-icon-2 svg-icon-success me-3"></i>
                                                                    <div class="fs-6 text-dark">Share Link Generated</div>
                                                                </div> 
                                                                <input type="text" class="form-control form-control-sm" value="{{ video.url_video }}" onClick="this.select();"/>
                                                            </div>
                                                            <!--end::Link-->
                                                        </div>
                                                    </div>
                                                    <!--end::Card-->
                                                </div>
                                                <!--end::Menu-->
                                            </div>
                                            <!--end::Share link-->
                                            <!--begin::Download-->
                                            <div class="ms-2" data-bs-toggle="tooltip" data-bs-trigger="hover" title=" Click here to download generated media.">
                                                <button type="button" onclick="download_file('event','{{ video.url_video }}','{{video.media.original_file.existingPath}}')" class="btn btn-sm btn-icon btn-light btn-active-light-primary file-download">
                                                    <span class="fad fa-download svg-icon svg-icon-5 m-0"></span>
                                                </button>
                                            </div>
                                            <!--end::Download-->
                                        </div>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr class="odd unselectable" >
                                    <td colspan="4">
                                        <!-- begin::Body -->
                                        <div class="d-flex flex-column my-5">
                                            <!--begin::Title-->
                                            <h1 class="fw-bold text-muted  text-center fs-2">
                                                There's no <span class="fw-boldest">media file</span> yet
                                            </h1>
                                            <!-- end::Title -->
                                            <!-- begin::Illustration -->
                                            <div class="flex-grow-2 bgi-no-repeat bgi-size-contain bgi-position-x-center h-450px mh-450px" style="background-image:url('{% static 'images/illustrations/dozzy-1-5.png' %}')"></div>
                                            <!-- end::Illustration -->
                                        </div>
                                        <!-- end::Body -->
                                    </th>
                                </tr>
                                {% endfor %}
                                <!-- end:: For Loop ON lATEST Files Uploaded -->
                            </tbody>
                            <!-- end::Table body -->
                        </table>
                    </div>
                    
                </div>
                <!-- end::Table -->      
            </div>
            <!-- end::Engage List of Uploaded Video -->
        </div>
        <!-- end:: Last Uploaded Card -->
    </div>
    <!--end::Container-->
</div>
{% endblock content %}

{% block javascripts %} 
<script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control
        // to the settings, ALL default controls are removed and you have to add them back in by defining those below.

        // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default.
        // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed,
        // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again.

        const controls = [
            'play-large', // The large play button in the center
            'restart', // Restart playback
            // 'rewind', // Rewind by the seek time (default 10 seconds)
            'play', // Play/pause playback
            // 'fast-forward', // Fast forward by the seek time (default 10 seconds)
            'progress', // The progress bar and scrubber for playback and buffering
            'current-time', // The current time of playback
            'duration', // The full duration of the media
            'mute', // Toggle mute
            'volume', // Volume control
            'captions', // Toggle captions
            'settings', // Settings menu
            'pip', // Picture-in-picture (currently Safari only)
            'airplay', // Airplay (currently Safari only)
            'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
            'fullscreen' // Toggle fullscreen
        ];

        
        const original = Plyr.setup('#original', { controls });
        const generated = Plyr.setup('#generated', { controls });

    });
</script>

<script>
    window.extention = '{{ user|valid_extension }}'.toString();
    const players = Plyr.setup('.js-player');
</script>

<script src="{% static 'js/player.js' %}"></script>

<script>
    // Window load
    window.addEventListener("load", function() {
        KTPlayersWidget2.init();
    });
</script>

<script src="{% static 'js/upload.media.js' %}"></script>

<script>

    var init_video = function(url){
        var modal = document.querySelector('#streamModal');
        var player = modal.querySelector('#player');
        var video = document.createElement('video');
        video.src =  url; // URL.createObjectURL('http://usevoice.io/' + url)

        video.classList.add("d-flex");
        video.style='border-radius: 6px';

        //video.poster = "";
        video.autoplay = false;
        video.controls = true;
        video.preload="auto";

        video.height = 360; // 👈️ in px
        video.width = 800//"100%"; // 👈️ in px

        player.appendChild(video);


        var toplay =  new Plyr(video);
        // toplay.element.classList.add('media_show');

        modal.addEventListener('hidden.bs.modal', function(){
            //player.stop();
            //player.destroy();
            video.pause();
            video.currentTime = 0;
            toplay.destroy;
            player.innerHTML = "";
        });

    };
</script>

<script>
    var createPart_c = function(index,start,end) {
        var part = document.createElement('div');
        part.className = 'd-flex flex-stack py-2 border-bottom border-gray-300 border-bottom-dashed unselectable';
        part.id = 'part_' + index;
        part.innerHTML = '\
            <!--begin:: Start Part Time--> \
            <div class="d-flex align-items-center"> \
                <div class="ms-5"> \
                    <div class="fs-6 fw-bold text-gray-900 unselectable" id="part_name" > Part '+index+' </div> \
                </div> \
            </div> \
            <div class="d-flex align-items-center"> \
                <div class="ms-5"> \
                    <label class="form-control-label fs-8 fw-bold text-gray-700 unselectable"> From : </label> \
                </div> \
                <div class="ms-5"> \
                    <input class="form-control form-control-solid classpart unselectable" type="text" id="start" name="startpart" value="'+start+'"/> \
                </div> \
            </div> \
            <!--end:: Start Part Time--> \
            <!--begin:: End Part Time--> \
            <div class="d-flex align-items-center"> \
                <div class="ms-5"> \
                    <label class="form-control-label fs-8 fw-bold text-gray-700 unselectable"> To : </label> \
                </div> \
                <div class="ms-5"> \
                    <input class="form-control form-control-solid classpart unselectable" type="text" id="end" name="endpart"  value="'+end+'"/> \
                </div> \
            </div> \
            <!--end:: End Part Time-->';
        return part;
    };

    var load_parts = function(parts){
        var modal = document.querySelector('#kt_parts_time_list_media');
        var part_list = modal.querySelector('#parts_time_list_view');
        var times = JSON.parse(parts);
        if (times.length >= 1 ){
            for (let i = 0; i < times.length; i++){
                part_list.append(createPart_c(i+1, (times[i][0]/1000).ToHHMMSS(), (times[i][1]/1000).ToHHMMSS()));
            }
        }
        else {
            part_list.innerHTML = '<div class="d-flex flex-stack py-2 unselectable"> \
                                        <div class="d-flex align-items-center"> \
                                            <div class="fs-6 fw-bold text-gray-900 unselectable" id="part_name" > Full media scheduled to be processed completely. </div>\
                                        </div> \
                                    </div>';
        }

        modal.addEventListener('hidden.bs.modal', function(){
            part_list.innerHTML = "";
        });
    };
</script>

<script>
    // function that recall every 8 seconds to refrech table content
    setInterval(function get_table() {
        const table = document.getElementsByClassName('table-responsive');
        $.ajax({
            type: "GET",
            url: "{% url 'landing:get_table' 5 %}",
            cache: true,
            processData: false,
            datatype:'html',
            success: function(response) {
                // hundel tooltip in every load
                $('body>.tooltip').remove();
                $('div[data-bs-toggle="tooltip"]').tooltip({html: true});

                // Show table content
                // table[0].innerHTML = response['table_content']
                $(".table-responsive").html(response['table_content']);

                // hundel tooltip in every load
                $('div[data-bs-toggle="tooltip"]').tooltip({html: true});
                // hundel dropdown-menu in every load
                KTMenu.createInstances();
            },
            error: function(err){
                console.log(err)
            }
        });
    },8000);
</script>

<script  type="text/javascript">
    function download_file(event, fileUrl, filepath) {
        Swal.fire({
            icon: 'info',
            title: 'Loading...',
            html: 'Downloading file...',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading()
            }
        })
    
        fetch(fileUrl)
        .then(response => {
            const totalSize = response.headers.get('content-length');
            let downloadedSize = 0;
    
            const reader = response.body.getReader();
            return new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                return;
                            }
    
                            downloadedSize += value.length;
                            const progress = (downloadedSize / totalSize) * 100; 
                            Swal.getContainer().querySelector('.swal2-html-container').innerHTML = `Downloading file... ${progress.toFixed(2)}%`;
                            controller.enqueue(value);
                            push();
                        });
                    }
    
                    push();
                }
            });
        })
        .then(stream => new Response(stream))
        .then(response => response.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = filepath.replace('original_videos', '');
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            Swal.close();
    
            Swal.fire({
                title: "Success",
                text: "Video download success",
                icon: "success",
                showConfirmButton: false,
                timer: 3500
            });
        });
    }
</script>

<script type="text/javascript">
    {% if messages %}
        {% for message in messages %}
            Swal.fire({
                title: "{{ message.tags|capfirst }}",
                html: "{{ message|safe }}",
                icon: "{{ message.tags }}",
                buttonsStyling: false,
                confirmButtonText: "Ok, got it!",
                customClass: {
                    confirmButton: "btn btn-primary"
                }
            });
        {% endfor %}
    {% endif %} 
</script>
{% endblock javascripts %}