Trigger displayed items with a checkbox and a boolean attribute

The setup:

ember new shop                                                              
cd shop
ember install:addon ember-cli-scaffold
ember generate scaffold product name:string available:boolean
ember generate adapter product

app/adapters/product.js

import DS from "ember-data";

export default DS.FixtureAdapter.extend({});

app/models/product.js

import DS from 'ember-data';

var Product = DS.Model.extend({
  name: DS.attr('string'),
  available: DS.attr('boolean')
});

Product.reopenClass({
  FIXTURES: [
    {
      id: "1",
      name: 'Orange',
      available: true
   }, {
     id: "2",
     name: 'Apple',
     available: false
    }, {
      id: "3",
      name: 'Banana',
      available: true
  }
]});

export default Product;

This will result in the following http://localhost:4200/products page:

Problem/Question

I'd like to add an available checkbox on top of http://localhost:4200/products which triggers the displayed products. If checked only available products are displayed. If unchecked only unavailable products.

How can I do this? What is the best/cleanest way?