pretty advanced UI

app/components/permission.hbs

@@ -5,5 +5,4 @@
       {{on "change" (fn this.onChange @permission)}}
     />
     <span class="mx-1">{{@permission.name}}</span>
-    <span class="mx-1 text-danger">{{@permission.content_type.model}}</span>
   </div>
\ No newline at end of file

app/components/permissions/index.hbs

-{{#each this.permissions as |perm|}}
-  <Permission @permission={{perm}} @onChange={{@onChange}} />
-{{/each}}
+<div class="d-flex flex-wrap permissions">
+  {{#each this.permission_groups as |perm_group|}}
+    <div class="m-2 permission-group">
+      <Input @type="checkbox" />
+      <label>{{perm_group.model}}</label>
+      {{#each perm_group.perms as |perm|}}
+        <Permission @permission={{perm}} @onChange={{@onChange}} />
+      {{/each}}
+      </div>
+  {{/each}}
+</div>

app/components/permissions/index.js

 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
 
 
 class PermissionsComponent extends Component {
-  @service store;
 
-  get permissions() {
-    return this.args.permissions;
+  get permission_groups() {
+    let groups = this.args.permissions.map(item => item.content_type.get('model')),
+      result = [];
+
+    groups = new Set(groups);
+
+    groups.forEach(model => {
+      let perms = this.args.permissions.filter(item => item.content_type.get('model') === model);
+      result.push({model, perms}); // same as result.push({mode: model, perms: perms})
+    });
+
+
+    return result;
   }
 }