<form action='' method="POST" enctype="multipart/form-data">
	{$watermark_nonce}

    <input onClick="display_watermarking()" type="checkbox" id="activ_watermark" name="activ_watermark"
           value="{$t::getTraduction( "Ajout_filignane")}" {if $watermark.watermark_active}checked{/if}/>

    <span style="margin-left: 10px;">{$t::getTraduction( "Ajout_filignane")}</span>

    <div id="watermark_is_active" style="display:none">

        <br>

        {if $watermark.watermark_active}
            <a href="" onclick="document.getElementById('new_filignane').classList.toggle('DigitalSignage4_display_none');return false">{$t::getTraduction( "Change_filignane")}</a>
            <br>
        {/if}

        <div id="new_filignane" {if $watermark.watermark_active} class="DigitalSignage4_display_none" {/if} >
            <span>{$t::getTraduction( "Choix_logo_filigrane")} :</span>
            <input onchange="loadFile(event);document.getElementById('submit_filigane_btn').classList.toggle('DigitalSignage4_display_none')" type="file" id="Watermark" name="Watermark" accept="image/png"/>
        </div>

        <br>

{*        <div class="DigitalSignage4_grid_places" id="current_w">*}
{*            <input disabled*}
{*                   class="{if $watermark.watermark_place == "top_left"}DigitalSignage4_watermark_case{/if} DigitalSignage4_watermark_placement DigitalSignage4_SemiInvisible DigitalSignage4_no-selectable"*}
{*                   type="radio" id="1">*}
{*            <input disabled*}
{*                   class="{if $watermark.watermark_place == "top_right"}DigitalSignage4_watermark_case{/if} DigitalSignage4_watermark_placement DigitalSignage4_SemiInvisible DigitalSignage4_no-selectable"*}
{*                   type="radio" id="2"><br>*}
{*            <input disabled*}
{*                   class="{if $watermark.watermark_place == "bottom_left"}DigitalSignage4_watermark_case{/if} DigitalSignage4_watermark_placement DigitalSignage4_SemiInvisible DigitalSignage4_no-selectable"*}
{*                   type="radio" id="3">*}
{*            <input disabled*}
{*                   class="{if $watermark.watermark_place == "bottom_right"}DigitalSignage4_watermark_case{/if} DigitalSignage4_watermark_placement DigitalSignage4_SemiInvisible DigitalSignage4_no-selectable"*}
{*                   type="radio" id="4">*}
{*        </div>*}


        <div id="grid_place" >
            <div class="DigitalSignage4_grid_places">
                <input class="DigitalSignage4_watermark_placement" type="radio" id="1" name="place" value="top_left"  {if $watermark.watermark_place == "top_left"}checked{/if} required><input class="DigitalSignage4_watermark_placement" type="radio" id="2" name="place" value="top_right" {if $watermark.watermark_place == "top_right"}checked{/if}>
                <input class="DigitalSignage4_watermark_placement" type="radio" id="3" name="place" value="bottom_left" {if $watermark.watermark_place == "bottom_left"}checked{/if}><input class="DigitalSignage4_watermark_placement" type="radio" id="4" name="place" value="bottom_right" {if $watermark.watermark_place == "bottom_right"}checked{/if}>
            </div>
        </div>

        <br><br>


        <input class="btn btn-primary  button_compte DigitalSignage4_display_none" name="WaterMark_button" id="submit_filigane_btn" type="submit"
               value="{$t::getTraduction( "Enregistrer")}"/>

    </div>

    <input style="margin-top: 1em" class="btn btn-primary  button_compte" id="hidden_water_mark_button"
           name="WaterMark_button" type="submit" value="{$t::getTraduction( "Enregistrer")}"/>


</form>

<script>

    display_watermarking();

    document.getElementById("hidden_water_mark_button").style.display = "none";

    // rechargement des images avec un attribut get pour ne pas prendre en compte le cache
    let waterReload = document.querySelectorAll('.DigitalSignage4_watermark_case');
    waterReload.forEach(
        function (element) {
            let style = element.currentStyle || window.getComputedStyle(element, false),
                bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");
            element.setAttribute('style', 'background-image: url( "' + bi + '?' + new Date().getTime() + '" ) !important');
        }
    );


    var loadFile = function (event) {
        display_grid();
        var link = URL.createObjectURL(event.target.files[0]);
        var rule = ".DigitalSignage4_watermark_placement:checked {	background-image: url('" + link + "') !important;	background-size: cover !important; background-color: #ffffff !important;} ";
        addCss(rule);
    };

    function display_watermarking() {
        document.getElementById("watermark_is_active").style.display = "none"; //cache le formulaire par defaut
        document.getElementById("hidden_water_mark_button").style.display = "none"; //affiche le formulaire
        if (document.getElementById("activ_watermark").checked) { //affiche le formulaire si besoin
            document.getElementById("watermark_is_active").style.display = "block"; //affiche le formulaire
        } else {
            document.getElementById("hidden_water_mark_button").style.display = "block"; //affiche le formulaire
        }
    }

    function display_grid() {
        document.getElementById("grid_place").style.display = "none"; //cache le formulaire par defaut
        if (document.getElementById("Watermark").files.length > 0) { //affiche le formulaire si besoin
            document.getElementById("grid_place").style.display = "block"; //affiche le formulaire
        }
    }

    function addCss(rule) {
        let css = document.createElement("style");
        css.type = "text/css";
        if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
        else css.appendChild(document.createTextNode(rule)); // Support for the rest
        document.getElementsByTagName("head")[0].appendChild(css);
    }

</script>