Add back button

assets/css/app.css

@@ -23,6 +23,12 @@ body {
         }
     }
 
+    .button-row {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        grid-gap: 0.5rem;
+    }
+
     form {
         font-family: sans-serif;
         background: var(--bg-color);

assets/js/app.js

@@ -107,6 +107,13 @@ window.stepper = {
 
         var _self = this;
         this.step = index;
+
+        if (index === 0) {
+            window.setTimeout(function() {
+                _self.value.kind = null;
+            }, 500);
+        }
+
         this.$nextTick(function() {
             _self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
         });

views/daten.twig.htm

@@ -71,7 +71,10 @@
                 <input type="text" x-model="value.einnahme" id="einnahme">
             </label>
 
-            <button type="submit">Absenden</button>
+            <div class="button-row">
+                <button @click="slideTo($event, step-1)" type="button">Zurück</button>
+                <button type="submit">Absenden</button>
+            </div>
 
         </div>
     </div>

views/stepper.twig.htm

@@ -62,7 +62,10 @@
                         <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
                     </div>
                     <div class="separator gray"></div>
-                    <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+                    <div class="button-row">
+                        <button @click="slideTo($event, step-1)" type="button">Zurück</button>
+                        <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+                    </div>
                 </div>
             </div>
 

views/vorhaben.twig.htm

@@ -66,6 +66,9 @@
             <div x-text="units.currency.to(  Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000  )"></div>
         </div>
         <div class="separator gray"></div>
-        <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+        <div class="button-row">
+            <button @click="slideTo($event, step-1)" type="button">Zurück</button>
+            <button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
+        </div>
     </div>
 </div>