Complex form

project/main/templates/main/complex_form.html

@@ -2,7 +2,13 @@
 
 
 {% block content %}
-    <p>
-        This is some complex form content bellow.
-    </p>
+    <form
+        hx-post="{{ url("complex-form-handle") }}"
+        hx-trigger="change"
+        hx-target="#complex-form-content"
+    >
+        <div id="complex-form-content">
+            {% include "main/complex_form_content.html" %}
+        </div>
+    </form>
 {% endblock %}

project/main/templates/main/complex_form_content.html

@@ -0,0 +1,64 @@
+{% from "main/components/inputs.html" import checkbox %}
+
+{% set indent_1 = "ms-4" %}
+{% set indent_2 = "ms-5" %}
+
+{{ checkbox(
+    title="Route module",
+    name="route_module",
+    state=state.route_module
+) }}
+{{ checkbox(
+    title="Smart routing",
+    name="smart_routing",
+    state=state.smart_routing,
+    cls=indent_1
+) }}
+{{ checkbox(
+    title="Geo routing",
+    name="geo_routing",
+    state=state.geo_routing,
+    cls=indent_1
+) }}
+{{ checkbox(
+    title="Use packing model per route",
+    name="use_packing_model_per_route",
+    state=state.use_packing_model_per_route,
+    cls=indent_1
+) }}
+{{ checkbox(
+    title="Prekitting to box",
+    name="prekitting_to_box",
+    state=state.prekitting_to_box,
+    cls=indent_2
+) }}
+{{ checkbox(
+    title="Prekitting to pallet",
+    name="prekitting_to_pallet",
+    state=state.prekitting_to_pallet,
+    cls=indent_2
+) }}
+{{ checkbox(
+    title="Real time stock",
+    name="real_time_stock",
+    state=state.real_time_stock,
+    cls=indent_2
+) }}
+{{ checkbox(
+    title="Use packing model per machine",
+    name="use_packing_model_per_machine",
+    state=state.use_packing_model_per_machine,
+    cls=indent_1
+) }}
+{{ checkbox(
+    title="Warehouse",
+    name="warehouse",
+    state=state.warehouse,
+    cls=indent_1
+) }}
+{{ checkbox(
+    title="Custom forms in routing",
+    name="custom_forms_in_routing",
+    state=state.custom_forms_in_routing,
+    cls=indent_1
+) }}

project/main/templates/main/components/inputs.html

@@ -0,0 +1,19 @@
+{% macro checkbox(title, name, checked, state, cls="") %}
+    {% if state.visible %}
+        {% set id = random_id() %}
+    
+        <div class="form-check {{ cls }}">
+            <input
+                class="form-check-input"
+                type="checkbox"
+                id="{{ id }}"
+                name="{{ name }}"
+                {% if state.checked %}checked{% endif %}
+                {% if not state.enabled %}disabled{% endif %}
+            >
+            <label class="form-check-label" for="{{ id }}">
+                {{ title }}
+            </label>
+        </div>
+    {% endif %}
+{% endmacro %}