{{ $formId := .Get 0 }}
<form id="{{ $formId }}">
    <ul style="list-style-type: none;padding-left: 0px;">
        {{ .Inner }}
    </ul>
    <label for="gcount">&#9989; = </label>
    <output name="gcount" id="gcount">0</output>/<output name="gtotal"></output>,
    <label for="rcount">&#x274C; = </label>
    <output name="rcount" id="rcount">0</output>/<output name="rtotal"></output>,
    <label for="acount">&#x1F50D; = </label>
    <output name="acount" id="acount">0</output>/<output name="atotal"></output>
    <br/>
    (<label for="xcount">&#x2205; = </label>
    <output name="xcount" id="xcount">0</output>/<output name="xtotal"></output>)
</form>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        let itemString = localStorage.getItem("{{ $formId }}");

        if (itemString) {
            setCLItemsFromString("{{ $formId }}", itemString);
        } else {
            clChange("{{ $formId }}");
        }
    });
   

    function getStringFromCLItems(formId) {
        let result = "";
    
        let form = document.getElementById(formId);

        let listItems = form.getElementsByTagName("li");

        for (let elem of listItems) {
            let menu = elem.getElementsByTagName("select")[0];
            result += menu.value;
        }

        return result;
    }


    function setCLItemsFromString(formId, clString) {
        let counts = {R: 0, G: 0, A: 0, X:0};

        let form = document.getElementById(formId);
        let listItems = form.getElementsByTagName("li");

        if (clString.length < listItems.length) {
            clString = clString.padEnd(listItems.length, "R");
        } else if (clString.length > listItems.length) {
            clString = clString.substring(0, listItems.length);
        }

        for (let i = 0; i < clString.length; i++) {
            let char = clString.charAt(i);
            counts[char]++;
            let menu = listItems[i].getElementsByTagName("select")[0];
            menu.value = char;
        }

        form.elements["rcount"].value = counts["R"];
        form.elements["gcount"].value = counts["G"];
        form.elements["acount"].value = counts["A"];
        form.elements["xcount"].value = counts["X"];

        
        let numClItems = listItems.length - counts["X"];

        form.elements["rtotal"].value = numClItems;
        form.elements["gtotal"].value = numClItems;
        form.elements["atotal"].value = numClItems;
        form.elements["xtotal"].value = counts["X"];

        let itemChoices = getStringFromCLItems("{{ $formId }}");
        localStorage.setItem("{{ $formId }}", itemChoices);
    }


    function clChange(formId) {
        let itemChoices = getStringFromCLItems(formId);
        setCLItemsFromString(formId, itemChoices);
    }
</script>