{{ if .Site.IsServer }}
<button id="grid-menu" onclick="changeGridVisibility()"
    class="w-8 h-8 mb-2 block rounded-full text-gray-700 text-sm bg-gray-200 uppercase pointer-events-auto">
    <span>G</span>
</button>

<div id="grid-area" class="container w-screen h-screen mx-auto px-8 grid grid-cols-12 gap-4">
    <div class="bg-blue-200 bg-opacity-25"></div>
</div>

<script>
    const padOptions = ["0", "1", "2", "3", "4", "5", "6", "8", "10", "12", "16", "20", "24", "32", "40", "48", "56", "64"];
    const colOptions = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
    const gapOptions = ["0", "1", "2", "3", "4", "5", "6", "8", "10", "12", "16"];

    /* helper function to remove a class attribute from an element */
    function removeClassWith(e, part) {
        var regx = new RegExp('(^|\\s)\\S*' + part + '\\S*', 'g');
        e.className = e.className.replace(regx, '');
    }

    function setGridVisibility(data) {
        var showGrid = data;
        var e = document.querySelector("#grid-area");
        if (e.classList.contains("hidden") == showGrid) {
            e.classList.toggle("hidden");
        }

        sessionStorage.setItem("showGrid", showGrid);
    }

    function changeGridVisibility() {
        var e = document.querySelector("#grid-area");
        var showGrid = e.classList.contains("hidden") ? true : false;
        setGridVisibility(showGrid);
    }

    function setupGridIndicator() {
        /* load variables from local storage */
        var showGrid = sessionStorage.getItem("showGrid") === "true";

        setGridVisibility(showGrid);
    }

    window.onload = setupGridIndicator();
</script>
{{ end }}