Separate field error into a macro and add support for custom error in inline fields

assets/sass/layout.scss

@@ -281,20 +281,6 @@ form {
 				}
 			}
 		}
-
-		.error, .hint {
-			padding: 2px;
-			text-align: left;
-			font-size: 14px;
-
-			.feather {
-				--icon-size: 14px;
-			}
-		}
-
-		.error {
-			color: $error;
-		}
 	}
 
 	.inline-fields {
@@ -308,9 +294,32 @@ form {
 			margin: 0;
 		}
 
-		& > :not(.form-field) {
+		> :not(.form-field) {
 			padding: 32px 8px 8px 8px;
 		}
+
+		+ {
+			.error, .hint {
+				margin-top: -16px;
+				margin-bottom: 16px;
+			}
+		}
+	}
+
+	.form-field, .inline-fields + {
+		.error, .hint {
+			padding: 2px;
+			text-align: left;
+			font-size: 14px;
+
+			.feather {
+				--icon-size: 14px;
+			}
+		}
+
+		.error {
+			color: $error;
+		}
 	}
 }
 

views/macros.njk

@@ -77,9 +77,7 @@
             {% endif %}
 
             <label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
-            {% if validation %}
+            {{ fieldError(_locals, name) }}
-                <div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
-            {% endif %}
             {% if hint %}
                 <div class="hint"><i data-feather="info"></i> {{ hint }}</div>
             {% endif %}
@@ -87,6 +85,14 @@
     {% endif %}
 {% endmacro %}
 
+{% macro fieldError(_locals, name) %}
+    {% set validation = _locals.validation() %}
+    {% set validation = validation[name] if validation[name] or null %}
+    {% if validation %}
+        <div class="error"><i data-feather="x-circle"></i> {{ validation.message }}</div>
+    {% endif %}
+{% endmacro %}
+
 {% macro websocket(websocketUrl, listener, reconnectOnClose = 1, checkFunction = 0) %}
     <script>
         document.addEventListener('DOMContentLoaded', () => {