{% set dimensions = location_dict.dimensions|default({}) %}
{% set location_dimensions_radius_value = dimensions.radius|default("0") %}
{% set location_dimensions_width_value = dimensions.width|default("0") %}
{% set location_dimensions_length_value = dimensions.length|default("0") %}
{% set location_dimensions_height_value = dimensions.height|default("0") %}
<table class="box_input">
    <thead>
        <tr>
            <th>
                Choose the size and dimensions of your location
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>
                    <label><span>
                        <input type="text" name="location_dimensions_radius" value="{{ location_dimensions_radius_value }}"/>
                        Radius (current position is the center)</span>
                    </label>
                </div>
                <div>
                    <label><span>
                        <input type="text" name="location_dimensions_width" value="{{ location_dimensions_width_value }}"/>
                        Width (from the S/E corner going WEST)</span>
                    </label>
                </div>
                <div>
                    <label><span>
                        <input type="text" name="location_dimensions_length" value="{{ location_dimensions_length_value }}"/>
                        Length (from the S/E corner going NORTH)</span>
                    </label>
                </div>
                <div>
                    <label><span>
                        <input type="text" name="location_dimensions_height" value="{{ location_dimensions_height_value }}"/>
                        Height (from the S/E corner going UP)</span>
                    </label>
                </div>
                <script>
                    function set_shape_control_status() {
                        let location_shape = $("input[name='location_shape']:checked").val();
                        if (location_shape === "circle" || location_shape === "spherical") {
                            $("input[name='location_dimensions_radius']").prop("disabled", false);
                            $("input[name='location_dimensions_width']").prop("disabled", true);
                            $("input[name='location_dimensions_length']").prop("disabled", true);
                            $("input[name='location_dimensions_height']").prop("disabled", true);
                        }
                        if (location_shape === "square" || location_shape === "cubical") {
                            $("input[name='location_dimensions_radius']").prop("disabled", true);
                            $("input[name='location_dimensions_width']").prop("disabled", false);
                            $("input[name='location_dimensions_length']").prop("disabled", true);
                            $("input[name='location_dimensions_height']").prop("disabled", true);
                        }
                        if (location_shape === "rectangular") {
                            $("input[name='location_dimensions_radius']").prop("disabled", true);
                            $("input[name='location_dimensions_width']").prop("disabled", false);
                            $("input[name='location_dimensions_length']").prop("disabled", false);
                            $("input[name='location_dimensions_height']").prop("disabled", true);
                        }
                        if (location_shape === "box") {
                            $("input[name='location_dimensions_radius']").prop("disabled", true);
                            $("input[name='location_dimensions_width']").prop("disabled", false);
                            $("input[name='location_dimensions_length']").prop("disabled", false);
                            $("input[name='location_dimensions_height']").prop("disabled", false);
                        }
                    }
                    set_shape_control_status();
                    $("input[name='location_shape']").on('change', function() {
                        set_shape_control_status()
                    });
                </script>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <div>
                    Sets the Dimensions of your location<br />
                    Depending on it's shape, it's either by radius or by defining up to three connecting side-lengths<br />
                    The radius is set from the position the player is standing on, rectangular shapes start from
                    the S/E corner going N/W and UP.<br />
                </div>
            </td>
        </tr>
    </tfoot>
</table>