<form>
    <script>
        /* global CONFIG */
        individual_rolls = null;
        individual_rolls_remaining = null; 
        ring_start = 0;

        function Intitialize() {

            // Apply as Rolled?
            const ability_scores = document.getElementById("ability_scores");
            HideResultsZone(ability_scores.dataset.hideresultszone === "true")
            HideRingMethodZone(ability_scores.dataset.distributionmethod !== "ring-method");
            HideBonusPointColumn(ability_scores.dataset.bonus_points === "0");
            if(ability_scores.dataset.distributionmethod === "apply-as-rolled"){
                ApplyAsRolled();
            }
            
            // Wrap this in Ring Method setting
            if(ability_scores.dataset.distributionmethod === "ring-method"){ // Ring Method
                const individual_rolls_table = document.getElementById("individual_rolls_table");
                individual_rolls = individual_rolls_table.dataset.individualrolls.split(',');
                individual_rolls_remaining = {rolls:[]};
                for(let i = 0; i < individual_rolls.length; i += 1)
                {
                    individual_rolls_remaining.rolls.push({value: individual_rolls[i], index: i})
                }
                FillRingItemAdders();
                GetSelectedRingTotal();      
                HighlightIndividualRolls();      
            }
            // Wrap this in Ring Method setting

            // Game System Specific Configuration
            // If there are no bonus points, and results are applied as rolled, then we can hide the Score column - because the Result col IS the Score.
            let hide_score_col = ability_scores.dataset.bonus_points === "0" && ability_scores.dataset.distributionmethod === "apply-as-rolled"
            switch (game.system.id) {

                case "dnd5e":
                    // Always show Score column because players can select Race during Configuration
                    break;
                case "pf1":
                    HideScoreColumn(hide_score_col);
                    break;
                case "ose":
                    HideRaceOptions();
                    HideScoreColumn(hide_score_col);
                    break;
                case "archmage":
                    HideRaceOptions();
                    HideScoreColumn(hide_score_col);
                    break;
                case "dcc":
                    HideRaceOptions();
                    HideScoreColumn(hide_score_col);
                    let dcc_description = document.getElementById("dcc_description");
                    dcc_description.innerHTML = dcc_description.dataset.dcc_description;
                    break;
                case "osric":
                    HideRaceOptions();
                    HideScoreColumn(hide_score_col);
                    HideAbilityModifierColumn();
                    break;
                default:
                    break;
            }
        }

        function HideResultsZone(hide) {
            if (hide) { document.getElementById("results_table")?.classList.add("rncs-display-none"); }
        }

        function HideRingMethodZone(hide) {
            if (hide) { document.getElementById("individual_rolls_table")?.classList.add("rncs-display-none"); }
        }

        function HideRaceOptions() {
            // Hide Race selector and Race Bonus column            
            document.getElementById("race-selector")?.classList.add("rncs-display-none");
            HideColumn(".rncs-race-mod-header", ".rncs-racial-mod");
        }

        function HideBonusPointColumn(hide) {
            if (hide) { HideColumn(".rncs-bonus-header", ".rncs-bonus-points"); }
        }

        function HideScoreColumn(hide) {
            if (hide) { HideColumn(".rncs-score-header", ".rncs-final-score"); }
        }

        function HideAbilityModifierColumn() {
            HideColumn(".rncs-modifier-header", ".rncs-modifier");
        }

        function HideColumn(table_header_class, table_data_class) {
            ability_scores.querySelector(".rncs-header-row").querySelector(table_header_class)?.classList.add("rncs-display-none");
            const ability_rows = ability_scores.querySelectorAll(".rncs-ability-row")
            for (let row = 0; row < ability_rows.length; row += 1) {
                const ability_row = document.getElementById(ability_rows[row].id);
                ability_row.querySelector(table_data_class)?.classList.add("rncs-display-none");
            }
        }

        function dragstart_handler(ev) {
            ev.dataTransfer.setData("text/plain", ev.target.parentElement);
            ev.dataTransfer.setData("text/plain", ev.target.innerText); // value of element being dragged
            ev.dataTransfer.setData("text/plain", ev.target.id);        // id of element being dragged
            ev.dataTransfer.dropEffect = "copy";
        }

        function dragover_handler(ev) {
            ev.preventDefault();
            ev.dataTransfer.dropEffect = "copy";
        }

        function drop_handler(ev) {

            ev.preventDefault();
            const data = ev.dataTransfer.getData("text/plain");
            const drop_item_id = document.getElementById(data).id
            const drop_item_orig_parent = document.getElementById(data).parentElement;
            const drop_zone = document.getElementById(ev.target.id);

            // Drop result in ability_drop_zone or results_drop_zone or swap results (prevent dropping multiple in one zone)
            if (drop_item_id.includes("div_final_result") || drop_item_id.includes("div_ring_final_result")) {

                if (drop_zone.id === "results_drop_zone" || (drop_zone.id.includes("ability_drop_zone") && !drop_zone.querySelector(".rncs-ability-drop-item") && !drop_zone.querySelector(".rncs-ring-ability-drop-item"))) {
                    let result_item = document.getElementById(data)
                    if(result_item.parentElement.id === "rncs_ring_container_ability_total"){ 
                        UpdateRing(result_item); 
                    }
                    drop_zone.appendChild(result_item);
                }
                else if (drop_zone.id.includes("div_final_result")  || drop_zone.id.includes("div_ring_final_result")) {// Dropping onto existing result in any zone will swap values

                    // Swap Results
                    const ability_item_drop_zone = drop_zone.parentElement;
                    drop_item_orig_parent.appendChild(drop_zone);
                    ability_item_drop_zone.appendChild(document.getElementById(data));
                }
            }// Drop variant ability score increase modifier
            else if(drop_item_id.includes("div_variant_mod")){
                if(drop_zone.id.includes("racial_mod") && !drop_zone.querySelector(".rncs-variant-mod-drop-item"))//(prevent dropping multiple in one zone)
                {
                    let variant_mod = document.getElementById(data)
                    drop_zone.appendChild(variant_mod);
                }
                else if (drop_zone.id.includes("div_variant_mod")) {// Dropping onto existing variant_mod in Racial Bonus Zone will swap values

                    // Swap values
                    const variant_item_drop_zone = drop_zone.parentElement;
                    drop_item_orig_parent.appendChild(drop_zone);
                    variant_item_drop_zone.appendChild(document.getElementById(data));
                }
            }
            RecalcFinalScores();
        }

        // Increment or Decrement ability with Bonus Points
        function BPchange(ev) {
            const bp_button = document.getElementById(ev.target.id);
            const bp_points = bp_button.parentElement.querySelector(".rncs-bp");
            const bp_points_value = parseInt(bp_points.innerText);
            const bp_max = parseInt(span_bp_max.innerText);
            let bp_remaining = parseInt(span_bp_remaining.innerText);

            if (bp_button.id.includes("minus") && bp_points_value > 0) {

                bp_points.innerText = Math.max(0, bp_points_value - 1);
                bp_remaining = (bp_remaining < bp_max ? bp_remaining + 1 : bp_max);
                span_bp_remaining.innerText = bp_remaining;

            } else if (bp_button.id.includes("plus")) {

                bp_points.innerText = (bp_remaining > 0 ? bp_points_value + 1 : bp_points.innerText);
                bp_remaining = (bp_remaining > 0 ? bp_remaining - 1 : 0);
                span_bp_remaining.innerText = bp_remaining;
            }
            RecalcFinalScores();
        }

        function RecalcFinalScores() {

            // Get rows from ability scores table
            const ability_rows = ability_scores.querySelectorAll(".rncs-ability-row");
            let over18NotAllowed = ability_scores.dataset.over18allowed === "false" && (ability_scores.dataset.distributionmethod !== "apply-as-rolled" || ability_scores.dataset.bonus_points > 0);

            let score_over_18 = false;
            for (let row = 0; row < ability_rows.length; row += 1) {

                const ability_row = document.getElementById(ability_rows[row].id);
                let ability_drop_item = ability_row.querySelector(".rncs-ability-drop-zone").querySelector(".rncs-ability-drop-item");
                if(!ability_drop_item){
                    ability_drop_item = ability_row.querySelector(".rncs-ability-drop-zone").querySelector(".rncs-ring-ability-drop-item");
                }
                const bonus_points = ability_row.querySelector(".rncs-bonus-points").querySelector(".rncs-bp");
                const racial_mod = ability_row.querySelector(".rncs-racial-mod");
                const final_score_unmod = ability_row.querySelector(".rncs-final-score-unmod");
                const final_score_display = ability_row.querySelector(".rncs-final-score-display");
                const modifier = ability_row.querySelector(".rncs-modifier");
                const ability_text = ability_row.querySelector(".rncs-ability-text").innerText.toLowerCase()

                // Calculate final score
                final_result = parseInt(ability_drop_item ? ability_drop_item.innerText : 0);
                bonus_result = parseInt(bonus_points.innerText);
                racial_mod_result = parseInt(racial_mod.innerText.length > 0 ? racial_mod.innerText : "0");
                final_score_unmod.value = final_result + bonus_result;// Exclude racial modifiers
                final_score_display.value = final_result + bonus_result + racial_mod_result;

                // Calculate ability modifier
                let ability_mod = 0;
                switch (game.system.id) {
                    case "dnd5e":
                    case "pf1":
                    case "archmage":
                    case "ose":
                    case "osric":
                        ability_mod = Math.floor((final_score_display.value - 10) / 2);
                        break;
                    case "dcc":
                        ability_mod = CONFIG.DCC.abilityModifiers[final_score_display.value];
                        break;
                    default:
                        ability_mod = Math.floor((final_score_display.value - 10) / 2);
                }
                modifier.value = (ability_mod > 0 ? "+" : "") + ability_mod;

                // Set hp modifier
                if (hp_modifier_ability.value === ability_text) { hp_modifier.value = modifier.value; }

                // TODO-LOW: Validation for score over 18 is still kinda sucky                
                score_over_18 = (final_score_display.value > 18 ? true : score_over_18);
                over18NotAllowed = (score_over_18 && over18NotAllowed ? true : over18NotAllowed);
                if (final_score_display.value > 18 && over18NotAllowed) {
                    final_score_display.classList.add("rncs-over18");
                } else {
                    final_score_display.classList.remove("rncs-over18");
                }
            }

            // Enable/Disable submit Button
            // character_name has nothing to do with scores, I am just being lazy with submit.disable 
            const character_name = document.getElementById("character_name");
            const bp_remaining = parseInt(span_bp_remaining.innerText);
            submit.disabled = (character_name.value.length === 0 || GetNextEmptyDropZone(".rncs-ability-drop-zone") || bp_remaining > 0 || (score_over_18 && over18NotAllowed));
        }

        async function MoveResult(ev) {
            const result_item = document.getElementById(ev.target.id);
            const results_drop_zone = document.getElementById("results_drop_zone");
            if (result_item.parentElement.id === "results_drop_zone" || result_item.parentElement.id === "rncs_ring_container_ability_total") {

                const next_ability = GetNextEmptyDropZone(".rncs-ability-drop-zone");
                // Update ring and get new total
                if(next_ability && result_item.parentElement.id === "rncs_ring_container_ability_total")
                {
                    UpdateRing(result_item);
                }
                
                // Move result_item to next empty ability drop zone
                if (next_ability) {
                    await next_ability.appendChild(result_item);
                }
            }
            else if (results_drop_zone && !result_item.id.includes("div_ring_final_result")) {
                await results_drop_zone.appendChild(result_item);
            }
            RecalcFinalScores();
        }

        function GetNextEmptyDropZone(drop_zone_class) {
            const ability_rows = ability_scores.querySelectorAll(".rncs-ability-row")
            for (let row = 0; row < ability_rows.length; row += 1) {
                const ability_row = document.getElementById(ability_rows[row].id);
                const target_drop_zone = ability_row.querySelector(drop_zone_class)
                if (target_drop_zone.innerText === "") {
                    return target_drop_zone;
                }
            }
            return false;
        }

        function ApplyAsRolled() {
            const ability_drop_items = results_drop_zone.querySelectorAll(".rncs-ability-drop-item");
            for (let item = 0; item < ability_drop_items.length; item += 1) {
                const next_ability = GetNextEmptyDropZone(".rncs-ability-drop-zone");
                if (next_ability) {
                    ability_drop_items[item].removeAttribute("ondblclick");
                    ability_drop_items[item].removeAttribute("draggable");
                    next_ability.appendChild(ability_drop_items[item]);
                }
            }
            results_drop_zone.innerHTML = "<small><em>" + game.i18n.localize("RNCS.form-app.form-text.applied-as-rolled") + "</em></small>";
            RecalcFinalScores();
        }

        async function UpdateRaceBonus(ev) {
            // Get racial bonuses
            const select = document.getElementById(ev.target.id);
            const jsonDATA = await getJSONData("./modules/roll-new-character-stats/data/character-properties.json");
            let race_bonuses;
            switch (game.system.id) {
                case "dnd5e":
                    race_bonuses = jsonDATA.game_system[0].dnd5e.races[select.selectedIndex]
                    break;
                case "pf1":
                    race_bonuses = jsonDATA.game_system[0].pf1.races[select.selectedIndex]
                    break;
                // case "ose":
                //     race_bonuses = jsonDATA.game_system[0].ose.races[select.selectedIndex]
                //     break;
                // case "archmage":
                //     race_bonuses = jsonDATA.game_system[0].archmage.races[select.selectedIndex]
                //     break;
                default:// Default to dnd5e for now
                    race_bonuses = jsonDATA.game_system[0].dnd5e.races[select.selectedIndex]
            }

            // Update Race Bonus column
            // TODO-LOW: Allow hybrid - some hard wired ASI and some variant ASI
            const ability_rows = ability_scores.querySelectorAll(".rncs-ability-row")
            for (let row = 0; row < ability_rows.length; row += 1) {
                const ability_row = document.getElementById(ability_rows[row].id);
                const racial_mod = ability_row.querySelector(".rncs-racial-mod");
                if(race_bonuses.asi_any.length === 0){
                    const ability_text = ability_row.querySelector(".rncs-ability-text").innerText.toLowerCase();
                    racial_mod.innerText = race_bonuses[ability_text];
                }
                else{           
                    // Clear current innerText         
                    racial_mod.innerText = ""; 

                    // Add next asi_any bonus drag-n-drop item to Race Bonus column
                    const variant_mod = document.createElement("div");
                    variant_mod.id = "div_variant_mod_" + Math.random().toString(36).slice(2);
                    variant_mod.setAttribute("draggable", "true");
                    variant_mod.classList.add("rncs-variant-mod-drop-item");
                    variant_mod.addEventListener("dragstart", dragstart_handler);
                    if(race_bonuses.asi_any[row]){
                        variant_mod.innerText = (race_bonuses.asi_any[row]);
                        racial_mod.appendChild(variant_mod);
                    }
                }
            }

            RecalcFinalScores();
        }

        // Had trouble importing json-helper.js to template.
        async function getJSONData(filename) {
            const jsonDATA = await fetch(filename)
                .then(response => response.json())
                .then(data => {
                    return data;
                });
            return jsonDATA;
        }

        function FillRingItemAdders(){

            // Clear ring adders
            for(const ring_item_adder of document.getElementsByClassName("rncs-ring-item-adder")) { ring_item_adder.innerText = ""; }  
            
            // Fill ring item adders
            if(individual_rolls_remaining.rolls.length > 0)
            {
                let adder_position = 0;
                for(const ring_item_adder of document.getElementsByClassName("rncs-ring-item-adder")) {
                    let individual_roll_value = individual_rolls_remaining.rolls[(ring_start + adder_position)%individual_rolls_remaining.rolls.length]?.value;
                    ring_item_adder.innerText = individual_roll_value
                    adder_position += 1;
                }
            }           
        }

        function GetSelectedRingTotal(){

            // Total of the three dice in ring item adders
            let total = 0;
            for(const ring_item_adder of document.querySelectorAll(".rncs-ring-item-adder")){ total += parseInt(ring_item_adder.innerText); }

            // Set div_ring_final_result to total (or empty)
            const ring_item_total = document.getElementById("div_ring_final_result");
            ring_item_total.innerText = (total > 0 ? total : "");  

            // Make sure div_ring_final_result is draggable (or not if empty)
            if (total > 0 && GetNextEmptyDropZone(".rncs-ability-drop-zone")) {
                ring_item_total.addEventListener("dragstart", dragstart_handler);
            }else{
                ring_item_total.removeAttribute("ondblclick")
                ring_item_total.removeAttribute("draggable");
            } 
        }

        async function UpdateRing(result_item) {
            // Create result_item_new to take place of moved result_item
            // Not sure if this needs to be done this way, but I don't know of another way to make the 
            // item draggable, and remain in place for the new value when it is dragged and dropped or double clicked for MoveResult().
            const rncs_ring_container_ability_total = document.getElementById(result_item.parentElement.id);
            const result_item_new = result_item.cloneNode(false);
            await rncs_ring_container_ability_total.appendChild(result_item_new);

            // rename result_item to distinguish it from new result_item_new
            result_item.id += "-" + Math.random().toString(36).slice(2);

            // Remove items from ring and update ring_start
            // This looks a little crazy, but if - for example - the last two die
            // and the first die are selected - we want to make sure we get the correct
            // next three die - so we can't just splice the next three items in the array
            if (individual_rolls_remaining.rolls.length - ring_start >= 3) {
                individual_rolls_remaining.rolls.splice(ring_start, 3);
                ring_start = (ring_start)%individual_rolls_remaining.rolls.length;
            }
            else {
                let diff = individual_rolls_remaining.rolls.length - ring_start;
                individual_rolls_remaining.rolls.splice(ring_start, diff);
                individual_rolls_remaining.rolls.splice(0, 3 - diff);
                ring_start = 0;// Since we are splicing from both ends of individual_rolls_remaining, the new ring_start will be 0
            }

            FillRingItemAdders();
            GetSelectedRingTotal();
            HighlightIndividualRolls(true);
        }

        individual_rolls_table.addEventListener("wheel", function (e) {

            ring_reverse = game.settings.get("roll-new-character-stats", "ReverseRingMethodScrolling");
            // TODO: Simplify
            if (e.deltaY > 0) {
                if(!ring_reverse){
                    ring_start = (ring_start + 1 === individual_rolls_remaining.rolls.length ? 0 : ring_start + 1)%individual_rolls_remaining.rolls.length;
                }else{
                    ring_start = (ring_start - 1 === -1 ? individual_rolls_remaining.rolls.length - 1 : ring_start - 1)%individual_rolls_remaining.rolls.length;
                }
            }
            else {
                if(!ring_reverse){
                    ring_start = (ring_start - 1 === -1 ? individual_rolls_remaining.rolls.length - 1 : ring_start - 1)%individual_rolls_remaining.rolls.length;
                }else{
                    ring_start = (ring_start + 1 === individual_rolls_remaining.rolls.length ? 0 : ring_start + 1)%individual_rolls_remaining.rolls.length;
                }
            }           

            FillRingItemAdders();
            GetSelectedRingTotal();
            HighlightIndividualRolls(false);
        });

        function HighlightIndividualRolls(highlight_used){

            // Remove rncs-ring-selection (& highlight used rolls)
            for(const individual_roll_item of document.querySelectorAll(".rncs-individual-roll")){
                if(highlight_used && individual_roll_item.classList.contains("rncs-ring-selection")){
                    individual_roll_item?.classList.add("rncs-individual-roll-used")
                }
                individual_roll_item.classList.remove("rncs-ring-selection");
            }

            // Add rncs-ring-selection
            for(let j = 0; j < 3; j += 1){
                let selected_index = (ring_start + j === individual_rolls_remaining.rolls.length ? 0 : ring_start + j)%individual_rolls_remaining.rolls.length;
                individual_roll_item = document.getElementById("rncs_individual_rolls" + individual_rolls_remaining.rolls[selected_index]?.index)
                individual_roll_item?.classList.add("rncs-ring-selection");
            }
        }

    </script>

    <div style="margin-bottom:5px;">
        <div class="rncs-div-label">Name:</div>
        <!-- Name has nothing to do with scores, I am just being lazy with submit.disable -->
        <div class="rncs-div-user-input">
            <input class="rncs-input" id="character_name" name="character_name" onchange="RecalcFinalScores()" type="String"
                value="{{character_name}}" />
        </div>
    </div>
    <div id="race-selector">
        <div class="rncs-div-label">Race:</div>
        <div class="rncs-div-user-input">
            <select id="select_race" name="select_race" onchange="UpdateRaceBonus(event)" style="width:100%;">
                {{selectOptions races selected=value valueAttr="race" labelAttr="race"}}
            </select>
        </div>
    </div>

    <!-- BEGIN COMMON DATA -->
    <!-- class="rncs-display-none" -->
    <div class="rncs-display-none">                                  
        <table>
            <tr><td>hp_base             </td><td><input id="hp_base"             name="hp_base"              value={{hp_base}}>              </input></td></tr>
            <tr><td>hp_modifier_ability </td><td><input id="hp_modifier_ability" name="hp_modifier_ability"  value={{hp_modifier_ability}}>  </input></td></tr>
            <tr><td>hp_modifier         </td><td><input id="hp_modifier"         name="hp_modifier"          value=0>                        </input></td></tr>
            <tr><td>currency_pp         </td><td><input id="currency_pp"         name="currency_pp"          value={{currency_pp}}>          </input></td></tr>
            <tr><td>currency_ep         </td><td><input id="currency_ep"         name="currency_ep"          value={{currency_ep}}>          </input></td></tr>
            <tr><td>currency_gp         </td><td><input id="currency_gp"         name="currency_gp"          value={{currency_gp}}>          </input></td></tr>
            <tr><td>currency_sp         </td><td><input id="currency_sp"         name="currency_sp"          value={{currency_sp}}>          </input></td></tr>
            <tr><td>currency_cp         </td><td><input id="currency_cp"         name="currency_cp"          value={{currency_cp}}>          </input></td></tr>                                  
        </table>
    </div>
    <!-- END COMMON DATA -->

    <!-- BEGIN GAME SYSTEM UNIQUE DATA -->
    <!-- {{#if is_dnd5e}}
    {{/if}}
    {{#if is_pf1}}
    {{/if}}
    {{#if is_archmage}}
    {{/if}}
    {{#if is_ose}}
    {{/if}} 
    {{#if is_osric}}
    {{/if}}-->

    {{#if is_dcc}}
    <p style="font-size: small;">
        <span id="dcc_description" data-dcc_description="{{description}}"></span>
    </p>
    <div class="rncs-display-none">
        dcc_description:</td><td><input name="dcc_description" value="{{description}}">                                         
        <table>
            <tr><td>dcc_farmer_type:            </td><td><input name="dcc_farmer_type"              value="{{dcc_farmer_type}}">            </input></td></tr>
            <tr><td>dcc_occupation_desc:        </td><td><input name="dcc_occupation_desc"          value="{{dcc_occupation_desc}}">        </input></td></tr>
            <tr><td>dcc_trade_weapon:           </td><td><input name="dcc_trade_weapon"             value="{{dcc_trade_weapon}}">           </input></td></tr>
            <tr><td>dcc_trade_weapon_ammo:      </td><td><input name="dcc_trade_weapon_ammo"        value="{{dcc_trade_weapon_ammo}}">      </input></td></tr>
            <tr><td>dcc_trade_weapon_ammo_qty:  </td><td><input name="dcc_trade_weapon_ammo_qty"    value="{{dcc_trade_weapon_ammo_qty}}">  </input></td></tr>
            <tr><td>dcc_trade_good:             </td><td><input name="dcc_trade_good"               value="{{dcc_trade_good}}">             </input></td></tr>
            <tr><td>dcc_farm_animal:            </td><td><input name="dcc_farm_animal"              value="{{dcc_farm_animal}}">            </input></td></tr>
            <tr><td>dcc_cart_content:           </td><td><input name="dcc_cart_content"             value="{{dcc_cart_content}}">           </input></td></tr>
            <tr><td>dcc_equipment:              </td><td><input name="dcc_equipment"                value="{{dcc_equipment}}">              </input></td></tr>
            <tr><td>dcc_luck:                   </td><td><input name="dcc_luck"                     value="{{dcc_luck}}">                   </input></td></tr>
        </table>
    </div>
    {{/if}}
    <!-- END GAME SYSTEM UNIQUE DATA -->


    <table id="results_table">
        <tr>
            <td class="rncs-results-header">Results:</td>
            <td id="results_drop_zone" class="rncs-results-drop-zone" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">
                {{#each final_results as |final_results id| }}
                <div id="div_final_result{{id}}" class="rncs-ability-drop-item" ondblclick="MoveResult(event)" draggable="true">
                    {{final_results}}
                </div>
                {{/each}}
            </td>
        </tr>
    </table>
    
    <table id="individual_rolls_table" data-individualrolls={{individual_rolls}}>
        <tr>
            <!-- <td class="rncs-results-header" colspan="2">Results:</td> -->
            <td colspan="4">
                <div class="rncs-results-container">
                    {{#each individual_rolls as |individual_rolls id|}}
                    <div id="rncs_individual_rolls{{id}}" class="rncs-individual-roll">
                        {{individual_rolls}}
                    </div>
                    {{/each}}
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="rncs_ring_container_ability_total" class="rncs-ring-container" ondragover="dragover_handler(event)">
                    <div id="div_ring_final_result" class="rncs-ring-ability-drop-item" ondblclick="MoveResult(event)" draggable="true"></div>
                </div>
            </td>
            <td>&nbsp;=&nbsp;</td>
            <td>
                <div id="rncs_ring_container" class="rncs-ring-container">    
                    <div id="div_ring_item0" class="rncs-ring-item-adder">
                    </div>
                    <div id="div_ring_item1" class="rncs-ring-item-adder">
                    </div>
                    <div id="div_ring_item2" class="rncs-ring-item-adder">
                    </div>    
                </div>
            </td>
            <td>
                <div style="font-size:0.7em; padding-left: 8px;">
                    {{localize "RNCS.form-app.form-text.ring-method"}}
                </div>    
            </td>
        </tr>
    </table>

    <table id="ability_scores" 
        data-over18allowed={{Over18Allowed}} 
        data-distributionmethod={{DistributionMethod}}
        data-bonus_points={{bonus_points}} 
        data-hideresultszone={{HideResultsZone}}>

        <tr id="header_row" class="rncs-header-row">
            <th>Ability</th>
            <th>Result</th>
            <th class="rncs-bonus-header">Bonus&nbsp;</span><span id="span_bp_remaining">{{bonus_points}}</span>/<span id="span_bp_max">{{bonus_points}}</span></th>
            <th class="rncs-race-mod-header">Race Bonus</th>
            <th class="rncs-score-header">Score
                {{#if_AorB DistributionMethod bonus_points}}
                {{#unless Over18Allowed}}
                <span style="font-size: small;">
                    *
                </span>
                {{/unless}}
                {{/if_AorB}}
            </th>
            <th class="rncs-modifier-header">Mod</th>
        </tr>
        
        {{#each abilities as |abilities id|}}
        <tr id="{{abilities}}_row" class="rncs-ability-row">
            <td class="rncs-ability-text">{{abilities}}</td>
            <td id="{{abilities}}_ability_drop_zone" class="rncs-ability-drop-zone" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">
            </td>
            <td class="rncs-bonus-points">
                <span id="{{abilities}}_bp_minus" class="rncs-bp-button rncs-bp-button-minus" onclick="BPchange(event)">-</span>
                <span class="rncs-bp">0</span>
                <span id="{{abilities}}_bp_plus"  class="rncs-bp-button rncs-bp-button-plus"  onclick="BPchange(event)">+</span>
            </td>
            <td id="{{abilities}}_racial_mod" class="rncs-racial-mod" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">0</td>
            <td class="rncs-final-score" id="{{abilities}}_final_score">
                <input name="{{abilities}}_final_score_unmod"   class="rncs-final-score-unmod"   value="0" />
                <input name="{{abilities}}_final_score_display" class="rncs-final-score-display" value="0" />
            </td>
            <td id="{{abilities}}_mod">
                <input name="{{abilities}}_modifier" class="rncs-modifier" value="-5" />
            </td>
        </tr>
        {{/each}}
    </table>

    <button type="submit" id="submit" disabled>
        <i class="fa fa-check"></i> {{localize "RNCS.form-app.form-text.accept-new-actor"}}
    </button>

    {{#if_AorB DistributionMethod bonus_points}}
    {{#unless Over18Allowed}}
    <span style="font-size: small;">
        {{localize "RNCS.form-app.form-text.over-18-not-allowed"}}
    </span>
    {{/unless}}
    {{/if_AorB}}

</form>