Delete roles

app/components/role/table_row.hbs

+<tr>
+  <td>
+    {{@role.name}}
+  </td>
+  <td>
+    {{@role.created_at}}
+  </td>
+  <td>
+    {{@role.updated_at}}
+  </td>
+  <td>
+    <button class="btn btn-link" type="button"> Edit
+  </button>
+  <Button::Link
+    @text="Remove"
+    @onClick={{(fn this.onRemove @role)}} />
+  </td>
+</tr>
\ No newline at end of file

app/components/role/table_row.js

+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+class TableRowComponent extends Component {
+  @action
+  async onRemove(role) {
+    await role.destroyRecord();
+  }
+}
+
+export default TableRowComponent;
\ No newline at end of file

app/models/role.js

@@ -2,7 +2,7 @@ import Model, { attr, hasMany } from '@ember-data/model';
 
 class RoleModel extends Model {
   @attr name;
-  @hasMany('permissions') permissions;
+  @hasMany('permission') permissions;
   @attr created_at;
   @attr updated_at;
 }

app/templates/roles/index.hbs

@@ -12,22 +12,7 @@
     </thead>
     <tbody>
       {{#each @model as |role|}}
-        <tr>
-          <td>
-            {{role.name}}
-          </td>
-          <td>
-            {{role.created_at}}
-          </td>
-          <td>
-            {{role.updated_at}}
-          </td>
-          <td>
-            <button class="btn btn-link" type="button"> Edit
-          </button>
-          <button class="btn btn-link" type="button">Remove</button>
-          </td>
-        </tr>
+        <Role::TableRow @role={{role}} />
       {{/each}}
     </tbody>
   </table>