Ember can't iterate over model with array property

I have a model, values.js:

import DS from 'ember-data';

export default DS.Model.extend({
    values: [
        { name: "Quality", isChecked: DS.attr('bool') },
        { name: "Inspiration", isChecked: DS.attr('bool') },
        { name: "Creativity", isChecked: DS.attr('bool') },
        { name: "Commitment", isChecked: DS.attr('bool') },
        { name: "Honour", isChecked: DS.attr('bool') }
    ]
});

And in the route passport-values.js I am creating a values model:

import Ember from 'ember';

export default Ember.Route.extend({
    model () {
        return this.store.createRecord('values');
    }
});

I have a component, passport-basic.hbs:

<h2></h2>
<p></p>
<form>
    <fieldset class="checkboxes">
        
            <label></label>
        
    </fieldset>
</form>

Which I am using from my template, passport-values.hbs, and passing my model with:

In the component I am trying to iterate over all the values within the array in the model to display a label with the name and checkbox that represents whether the isChecked option is true/false for each value. I have experimented with ideas from a lot of other sources, but i can't seem to make this work.

Thanks for the help, I'm still very new to Ember.js and I'm wondering if there's something I'm missing?