basic tag creation

app/components/tags.hbs

-<div class="tags">
-  <table class="table table-striped">
-    <thead>
-      <tr class="text-uppercase">
-        <th class="border-top-0"><input type="checkbox" /></th>
-        <th class="border-top-0">Tag Name</th>
-        <th class="border-top-0">Pinned?</th>
-        <th class="border-top-0">Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      {{#each @tags as |tag|}}
-        <tr>
-          <th scope="row"><input type="checkbox" /></th>
-          <td>
-            <LinkTo @route="tags.edit" @model={{tag.id}}>
-              {{tag.name}}
-            </LinkTo>
-          </td>
-          <td>{{tag.pinned}}</td>
-          <td>{{tag.description}}</td>
-        </tr>
-      {{/each}}
-    </tbody>
-  </table>
-</div>
\ No newline at end of file

app/controllers/tags/index.js

+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class TagsController extends Controller {
+
+    @action
+    onToggleNew() {
+        this.set('new', !this.new);
+    }
+
+    @action
+    onCreate() {
+        this.store.createRecord('tag', {
+            name: this.new_name,
+            description: this.new_description,
+            pinned: true,
+            bg_color: "#ff0000",
+            fg_color: "#ffffff"
+        }).save();
+
+        this.set('new_name', "");
+        this.set('new_description', "");
+        this.set('new_fg_color', "#ffffff");
+        this.set('new_bg_color', "#ff0000");
+        this.set('new', false);
+    }
+
+    @action
+    onCancel() {
+        this.set('new', false);
+        this.set('new_name', "");
+        this.set('new_description', "");
+        this.set('new_fg_color', "#ffffff");
+        this.set('new_bg_color', "#ff0000");
+    }
+}

app/templates/tags/index.hbs

 <h1>Tags Index</h1>
 
-<LinkTo @route="tags.add" class="btn btn-success">New</LinkTo>
+<button class="btn btn-success" type="button" {{on "click" this.onToggleNew}}>New</button>
+{{#if this.new}}
+<div>
+    <p>
+        <Input type="text" @value={{this.new_name}}/>
+        <Input type="text" @value={{this.new_description}} />
+        <Input @type="color" @value={{this.new_fg_color}} />
+        <Input @type="color" @value={{this.new_bg_color}} />
+    </p>
+    <p>
+        <Input @type="checkbox" @checked={{this.pinned}} />Is Pinned?
+    </p>
+    <button
+        type="button"
+        {{on "click" this.onCreate}}
+        class="btn btn-success">
+        Create Tag
+    </button>
+    <button
+        type="button"
+        {{on "click" this.onCancel}}
+        class="btn btn-secondary">
+        Cancel
+    </button>
+</div>
+{{/if}}
 
-<Tags @tags={{@model}} />
\ No newline at end of file
+<div class="tags">
+
+  <table class="table table-striped">
+    <thead>
+      <tr class="text-uppercase">
+        <th class="border-top-0">Tag Name</th>
+        <th class="border-top-0">Pinned?</th>
+        <th class="border-top-0">Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each @model as |tag|}}
+        <tr>
+          <td>
+            <LinkTo @route="tags.edit" @model={{tag.id}}>
+              {{tag.name}}
+            </LinkTo>
+          </td>
+          <td>{{tag.pinned}}</td>
+          <td>{{tag.description}}</td>
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>