{block name='content'}
    <div class="DigitalSignage4_card DigitalSignage4_wp_card playlist">

        <h2>{$t::getTraduction( "Mes_playlists")}</h2>

        <br>

    <p style="margin-left: 0;">{$t::getTraduction( "Tuto_playlist")}</p>

        <div class="wrapper_table" style="margin-left: 0;">

            <div class="table">

                <div class="row header">

                    <div class="cell" style="width: calc(80px + 5em);">
                        {*                        {$t::getTraduction( "Modifier")}*}
                    </div>


                    <div class="cell">
                        {$t::getTraduction( "Shortcode")}
                        <span onmouseenter="this.classList.toggle('is_hover')"
                              onmouseleave="this.classList.toggle('is_hover')" class="DigitalSignage4_material-icons DigitalSignage4_click DigitalSignage4_tool-tips"
                              data-tips="{$t::getTraduction( "Shortcode_tuto_playlist")}">
                            help_outline
                        </span>
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Titre")}
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Active")}
                        <span onmouseenter="this.classList.toggle('is_hover')"
                              onmouseleave="this.classList.toggle('is_hover')" class="DigitalSignage4_material-icons DigitalSignage4_click DigitalSignage4_tool-tips"
                              data-tips="{$t::getTraduction( "Active_tuto")}">
                            help_outline
                        </span>
                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Limite_affichage")}
                        <span onmouseenter="this.classList.toggle('is_hover')"
                              onmouseleave="this.classList.toggle('is_hover')" class="DigitalSignage4_material-icons DigitalSignage4_click DigitalSignage4_tool-tips"
                              data-tips="{$t::getTraduction( "Limit_tuto")}">
                            help_outline
                        </span>

                    </div>

                    <div class="cell">
                        {$t::getTraduction( "Nombre_video_playlist")}
                    </div>

                </div>

                {foreach from=$playlists item=playlist}
                    <div class="row" id="row_{$playlist->get_id()}">

                        <div class="cell" data-title="">

                            <div style="display: flex;">

                            <button style="padding: .55em; border-radius: 2em;background-color: #25b9d7; border: none " class="btn DigitalSignage4_button btn-primary" onclick="location.href=location.href+'&id_playlist={$playlist->get_id()}'">
                                <span class="DigitalSignage4_material-icons">
                                    edit
                                </span>
                            </button>

                            <button style="padding: .55em; border-radius: 2em; background-color: #e07281; border: none; margin-left: 1em !important;" onclick="saveIdDeletePlaylist({$playlist->get_id()})" class="btn DigitalSignage4_button btn-primary" data-toggle="modal" data-target="#Modal">
                                 <span class="DigitalSignage4_material-icons">
                                    delete
                                </span>
                            </button>

                            </div>

                        </div>

                        <div class="cell" data-title="Shortcode">
                            [ProductVideoGenerator_playlist id={$playlist->get_id()}]
                        </div>

                        <div class="cell" data-title="Titre">
                            {$playlist->get_title()}
                        </div>

                        <div class="cell" data-title="Activé">
                            <input id="checkbox_{$playlist->get_id()}" onCLick="updatePlaylist({$playlist->get_id()})"
                                   type="checkbox"
                                   {if $playlist->get_active()}checked{/if}/>
                        </div>

                        <div class="cell" data-title="Limiter l'affichage">
                            <input id="limit_{$playlist->get_id()}" type="number"
                                   onCLick="updatePlaylist({$playlist->get_id()})"
                                   onchange="updatePlaylist({$playlist->get_id()})" min="0"
                                   value="{$playlist->get_limit()}">
                        </div>

                        <div class="cell" data-title="Nombre de video de la playlist">
                            {$playlist->get_videos()|@count }
                        </div>

                        {*                        <div class="cell" data-title="Modifier">*}
                        {*                            <button class="btn DigitalSignage4_button btn-primary"*}
                        {*                                    onclick="location.href=location.href+'&id_playlist={$playlist->get_id()}'">*}
                        {*                                {$t::getTraduction( "Modifier")}*}
                        {*                            </button>*}
                        {*                        </div>*}

                        {*                        <div class="cell" data-title="Supprimer">*}
                        {*                            <button onclick="saveIdDeletePlaylist({$playlist->get_id()})" class="btn DigitalSignage4_button btn-primary" data-toggle="modal" data-target="#Modal">*}
                        {*                                {$t::getTraduction( "Supprimer")}*}
                        {*                            </button>*}
                        {*                        </div>*}

                    </div>
                {/foreach}

            </div>

            <div class="DigitalSignage4_material-icons add_playlist click" onClick="location.href=location.href+'&id_playlist='">
                control_point
            </div>

        </div>

        <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <div class="modal-body">
                        <p style="font-size: 1.3em">{$t::getTraduction( "DEl_playlist")}</p>
                    </div>

                    <div class="modal-footer">
                        <button style="font-size: 1.3em" type="button" class="btn btn-secondary"
                                data-dismiss="modal">{$t::getTraduction( "Non")}</button>

                        <button onclick="deletePlaylist()" style="font-size: 1.3em" type="button" data-dismiss="modal"
                                class="btn btn-primary">{$t::getTraduction( "Oui")}</button>
                    </div>

                </div>
            </div>
        </div>

        <script>


            let id_playlist = null;


            function deletePlaylist() {
                let form = new FormData();

                form.append("id", id_playlist);
                form.append("delete", "true");
                form.append("_wpnonce",ajax_nonce);

                ajaxCall('', '{$t::getTraduction( "Playlist_supprime")}', form, () => {
                    let element = document.getElementById("row_" + id_playlist);
                    element.parentElement.removeChild(element);
                });

            }

            function saveIdDeletePlaylist(id) {
                id_playlist = id;
                deletePlaylist();
            }

            function updatePlaylist(id) {

                let checkbox = document.getElementById("checkbox_" + id);

                let limit = document.getElementById("limit_" + id);

                let form = new FormData();

                form.append("id", id);
                form.append("etat", (checkbox.checked) ? "true" : "false");
                form.append("limit", limit.value);
                form.append("_wpnonce",ajax_nonce);

                ajaxCall('', '{$t::getTraduction( "Playlist_modifir")}', form);

            }

            function ajaxCall(url, succesMessage = "", form = "", callBack = null) {

                var xhr = new XMLHttpRequest();
                xhr.open('POST', url, true);
                xhr.onload = function () {


                    let response = stripScripts(this.responseText);

                    // do something to response
                    if (response === "ok") {

                        DigitalSignage4_showSuccessMessage(succesMessage);

                        if (callBack != null) {
                            callBack();
                        }

                    } else {
                        DigitalSignage4_showErrorMessage(this.responseText);
                    }

                };

                xhr.send(form);

            }

            function stripScripts(s) {
                var div = document.createElement('div');
                div.innerHTML = s;
                var scripts = div.getElementsByTagName('script');
                var i = scripts.length;
                while (i--) {
                    scripts[i].parentNode.removeChild(scripts[i]);
                }
                return div.innerHTML;
            }


        </script>


    </div>
{/block}