<form action="#" method="post" class="DigitalSignage4_form">
	{$watermark_nonce}

    <label for="activeRestriction">
        <input id="allowDiskFreeSpace" type="checkbox" name="activerLaSecurisation"
               {if $espaceDisk.currentLimit != 0 }checked{/if} />
        {$t::getTraduction( "Active_secu_disk")}
    </label>

    <div id="diskTohide">

        <h4>{$t::getTraduction( "Espace_libre" , $espaceDisk.totalFreeSpace , $espaceDisk.totalDiskSpace)} </h4>

        <div style="display: flex">
            <h4> {$t::getTraduction( "Bloque_telechargement_new_video")} : </h4>
            &nbsp;
            <input type="number" name="limitSpace" min="0" max="{$espaceDisk.totalFreeSpace}" id="limitId"
                   value="{$espaceDisk.currentLimit}"/> &nbsp;
            <h4>{$t::getTraduction( "Go")}</h4>
        </div>

        <br>

        <div style="width: 50%" class="display_disk_space">
            <div class="DigitalSignage4_disk_used" id="DigitalSignage4_disk_used"></div>
            <div class="DigitalSignage4_disk_block" id="DigitalSignage4_disk_block"></div>
        </div>

    </div>

    <input type="submit" name="setDiskSpaceSafe" class="btn DigitalSignage4_button btn-primary  " value="{$t::getTraduction( "Enregistrer")}">

</form>

<script>


    document.getElementById("allowDiskFreeSpace").addEventListener("change", () => {
        toggleViewForm();
    })

    toggleViewForm();

    var total = {$espaceDisk.totalDiskSpace};
    var free = {$espaceDisk.totalFreeSpace};
    var limit = {$espaceDisk.currentLimit};


    var usedPourcent = (total - free) * 100 / total;
    var limitPourcent = (limit * 100) / total;

    setLimit(limitPourcent);
    setUsed(usedPourcent);

    document.getElementById("limitId").addEventListener("change", (e) => {
        limitPourcent = (document.getElementById("limitId").value * 100) / total;
        setLimit(limitPourcent);
    });

    function setUsed(value) {
        document.getElementById("DigitalSignage4_disk_used").style.width = value + "%";
    }

    function setLimit(value) {
        document.getElementById("DigitalSignage4_disk_block").style.right = value + "%";
    }

    function toggleViewForm() {

        if (!document.getElementById("allowDiskFreeSpace").checked) {

            document.getElementById("diskTohide").style.display = "none";
        } else {
            document.getElementById("diskTohide").style.display = "";
        }
    }


</script>