pretty good (basic) automate form

app/components/automates/add.hbs

@@ -6,7 +6,6 @@
     placeholder="Automate's name" />
 </div>
 <div class="mb-3">
-  {{this.the_var}}
   <Label @for="match" @text="Match" />
   <Input @value={{this.match}}
     class="form-control"
@@ -15,15 +14,15 @@
 </div>
 <div class="mb-3">
   <Label @for="matching_algorithm" @text="Matching Algorithm" />
-  <Select class="form-select">
-    <option value="1" selected>Any</option>
-    <option value="2">All</option>
-    <option value="3">Literal</option>
-    <option value="4">Regular Expression</option>
-  </Select>
+  <Select @options={{this.matching_alg_options}}
+    @onChange={{this.onChangeMatchingAlg}}
+    name="matching_algorithm"/>
 </div>
 <div class="mb-3">
-  <input type="checkbox" class="form-control-checkbox" id="is_case_sensitive" />
+  <Input @checked={{this.is_case_sensitive}}
+    @type="checkbox"
+    class="form-control-checkbox"
+    id="is_case_sensitive" />
   <Label @for="is_case_sensitive" @text="Is case sensitive" />
 </div>
 <div class="mb-3">
@@ -37,9 +36,8 @@
 </div>
 <div class="mb-3">
   <Label @for="dst_folder" @text="Destination Folder" />
-  {{this.dst_folder}}
   <Select @options={{this.dst_folder_options}}
-    @value={{this.dst_folder}}
+    @onChange={{this.onChangeDstFolder}}
     name="dst_folder" />
 </div>
 <div class="mb-3">

app/components/automates/add.js

@@ -6,12 +6,18 @@ import { inject as service } from '@ember/service';
 
 class AddAutomateComponent extends Component {
   /*
-  Component/Form to create new automate.
+  Form like component to create new automate.
   */
 
   @service store;
   @service router;
 
+  @tracked dst_folder;
+  @tracked name;
+  @tracked match;
+  @tracked is_case_sensitive = false;
+  @tracked matching_alg;
+
   get dst_folder_options() {
     return [
       {'key': '---', 'value': '---'},
@@ -21,6 +27,16 @@ class AddAutomateComponent extends Component {
     ]
   }
 
+  get matching_alg_options() {
+    return [
+      {'key': '---', 'value': '---'},
+      {'key': '1', 'value': 'Any'},
+      {'key': '2', 'value': 'All'},
+      {'key': '3', 'value': 'Literal'},
+      {'key': '4', 'value': 'Regular Expression'}
+    ]
+  }
+
   @action
   onSubmit() {
     /*
@@ -34,7 +50,7 @@ class AddAutomateComponent extends Component {
       match: this.match,
       dst_folder: this.dst_folder,
       is_case_sensitive: this.is_case_sensitive,
-      matching_algorithm: this.matching_algorithm
+      matching_algorithm: this.matching_alg
     };
 
     this.store.createRecord(
@@ -44,6 +60,16 @@ class AddAutomateComponent extends Component {
 
     this.router.transitionTo('automates');
   }
+
+  @action
+  onChangeDstFolder(event) {
+    this.dst_folder = event.target.value;
+  }
+
+  @action
+  onChangeMatchingAlg(event) {
+    this.matching_alg = event.target.value;
+  }
 }
 
 export default AddAutomateComponent;
\ No newline at end of file

app/components/select/index.hbs

 <select
-  {{on 'change' this.onSelect}}
+  {{on 'change' this.onChange}}
   class="form-select"
   ...attributes>
   {{#each @options as |opt|}}

app/components/select/index.js

@@ -3,12 +3,12 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 class SelectComponent extends Component {
-  @tracked value = null;
+  @tracked value;
 
   @action
-  onSelect(event) {
-    console.log(`value=${event.target.value}`);
-    this.value = event.target.value;
+  onChange(event) {
+    console.log("On change!");
+    this.args.onChange(event);
   }
 }