{{ if .Site.IsServer }}
<button id="parameter-menu" onclick="changeParameterVisibility()"
    class="w-8 h-8 mb-2 rounded-full text-slate-600 text-sm bg-slate-200 uppercase pointer-events-auto">
    <span>P</span>
</button>

<div id="parameter-area"
    class="fixed w-full z-50 right-0 bottom-0 h-1/3 p-4 overflow-y-auto scroll-auto scroll-py-4 touch-auto text-slate-600 bg-white/[.95] border-y-8 border-white/50 hidden">
    <table class="w-full text-left table-auto table-collapse border-slate-200">
        <caption class="text-left pb-2">Hugo Variables for the current page.</caption>
        <thead>
            <tr class="p-2 font-semibold bg-slate-200 border-t ">
                <th>Variable</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr class="p-2 border-t">
                <td>.Name</td>
                <td>{{ printf "%#v" .Name }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Title</td>
                <td>{{ printf "%#v" .Title }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Kind</td>
                <td>{{ printf "%#v" .Kind }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Type</td>
                <td>{{ printf "%#v" .Type }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.IsPage</td>
                <td>{{ printf "%#v" .IsPage }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.IsHome</td>
                <td>{{ printf "%#v" .IsHome }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Next</td>
                <td>{{ printf "%v" .Next }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Prev</td>
                <td>{{ printf "%v" .Prev }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Params</td>
                <td>
                    <table>
                        {{ range $k,$v := .Params }}
                        <tr>
                            <td class="text-right italic pr-2">{{ printf "%#v:" $k }}</td>
                            <td>{{ printf "%#v" $v }}</td>
                        </tr>
                        {{ end }}
                    </table>
                </td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Section</td>
                <td>{{ printf "%#v" .Section }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.CurrentSection</td>
                <td>{{ printf "%v" .CurrentSection }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Pages</td>
                <td>
                    {{ printf "%v" .Pages }}
                    <table>
                        {{- range $k,$v := .Pages }}
                        <tr>
                            <td class="text-right italic pr-2">{{ printf "%#v:" $k }}</td>
                            <td>{{ printf "%v" $v }}</td>
                        </tr>
                        {{ end -}}
                    </table>
                </td>
            </tr>
            <tr class="p-2 border-t">
                <td>.Resources</td>
                <td>{{ printf "%v" .Resources }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.File</td>
                <td>{{ if .File }}{{ printf "%v" .File }}{{ else}}""{{ end }}</td>
            </tr>
            <tr class="p-2 border-t">
                <td>.File.Dir</td>
                <td>{{ if .File }}{{ printf "%#v" .File.Dir }}{{ else}}""{{ end }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    function setParameterVisibility(data) {
        var showParameter = data;
        var e = document.querySelector("#parameter-area");
        if (e.classList.contains("hidden") == showParameter) {
            e.classList.toggle("hidden");
        }
        sessionStorage.setItem("showParameter", showParameter);
    }

    function changeParameterVisibility() {
        var e = document.querySelector("#parameter-area");
        var showParameter = e.classList.contains("hidden") ? true : false;
        setParameterVisibility(showParameter);
    }

    function setupParameterIndicator() {
        /* load variables from session storage */
        var showParameter = sessionStorage.getItem("showParameter") === "true";

        setParameterVisibility(showParameter);
    }

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