<div class="DigitalSignage4_card DigitalSignage4_wp_card ds_auto">

    <div style="display: flex;align-items: center;margin:0">

        <img style="height: 61px; widows: 40" src="{$AutomateUrl}" alt=""/>
        <h2 style="margin: 0 1em;">{$t::getTraduction( "Choix_facilite")}</h2>

    </div>

    <br><br>

    <h3>{$t::getTraduction( "Comment_ca_marche")}</h3>
    <p>{$t::getTraduction( "Auto_tuto")}</p>

    <div class="wrapper_table">

        <div class="table">

            <div class="row header">

                <div class="cell" style="width: calc(80px + 5em);">
                </div>

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

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

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

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

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

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

            </div>

            {foreach from=$automatisations item=automatisation}
                <div class="row" id="row_{$automatisation->getId()}">


                    <div class="cell" data-title="" style="display: flex; width: calc(80px + 5em);">

                        <button style="padding: .55em; border-radius: 2em;background-color: #25b9d7; border: none " class="btn DigitalSignage4_button btn-primary"  onclick="location.href=location.href+'&automatisationVue=add&auto_id={$automatisation->getId()}'">
                                <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="saveIdDelete({$automatisation->getId()})" class="btn DigitalSignage4_button btn-primary" data-toggle="modal" data-target="#Modal">
                                 <span class="DigitalSignage4_material-icons">
                                    delete
                                </span>
                        </button>

                    </div>

{*                    <div class="cell" data-title="{$t::getTraduction( "Id")}">*}
{*                        {$automatisation->getId()}*}
{*                    </div>*}

                    <div class="cell" data-title="{$t::getTraduction( "Nom")}">
                        {$automatisation->getName()}
                    </div>


                    <div class="cell" data-title="{$t::getTraduction( "Video_cree")}">
                        {if $automatisation->getCreated()}
                            {$automatisation->getCreated()}
                        {else}
                            0
                        {/if}

                    </div>

                    <div class="cell" data-title="{$t::getTraduction( "Active")}">


                        <input onchange="toggleActive(this, {$automatisation->getId()})"
                               type="checkbox" {if $automatisation->isActive()} checked {/if} />

                    </div>

                    <div class="cell" data-title="{$t::getTraduction( "Playlist")}">

                        {if $automatisation->getPlaylist()}
                            <a href="{$playlistBaseUrl}&playlistVue=update&id_playlist={$automatisation->getPlaylist()->get_id()}">{$automatisation->getPlaylist()->get_title()} </a>
                        {/if}

                    </div>

                    <div class="cell" data-title="{$t::getTraduction( "Gabarit")}">
                        {$automatisation->getGabarit()->getNom()}
                    </div>



                </div>
            {/foreach}

        </div>

        <div class="DigitalSignage4_material-icons add_playlist DigitalSignage4_click" onClick="location.href=location.href+'&automatisationVue=add'">
            control_point
        </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>{$t::getTraduction( "Question_delete_automatisation")}</p>
                    </div>

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

                        <button onclick="deletee()" type="button" data-dismiss="modal"
                                class="btn btn-primary">{$t::getTraduction( "Oui")}</button>
                    </div>

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

        <script>

            var id_auto = -1;

            function deletee() {

                let form = new FormData();

                form.append("id", id_auto);
                form.append("request", "deleteAuto");

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '', true);
                xhr.onload = function () {
                    // do something to response

                 //   console.log(this.responseText);

                    if (this.responseText === "ok") {
                        DigitalSignage4_showSuccessMessage("{$t::getTraduction( "Auto_delete")}");
                        element = document.getElementById('row_' + id_auto);
                        element.parentElement.removeChild(element);
                    } else {
                        DigitalSignage4_showErrorMessage(this.responseText);
                    }

                };

                xhr.send(form);

            }

            function saveIdDelete(id) {
                id_auto = id;
                deletee();
            }


            function toggleActive(element, id) {

                let form = new FormData();

                form.append("active", element.checked);
                form.append("automatisationId", id);
                form.append("request", 'changeActive');

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '', true);
                xhr.onload = function () {
                    // do something to response

                //    console.log(this.responseText);

                    if (this.responseText === "ok") {
                        DigitalSignage4_showSuccessMessage("{$t::getTraduction( "Auto_save")}");
                    } else {
                        DigitalSignage4_showErrorMessage(this.responseText);
                    }

                };

                xhr.send(form);
            }


        </script>

    </div>

</div>
