import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

const Ok = <template>Ok</template>;
const Ko = <template>Ko</template>;

const Flipper = <template>
  {{if @isOk Ok Ko}}

  {{#if @isOk}}
      <Ok />
  {{else}}
      <Ko />
  {{/if}}
</template>;

export default class Demo extends Component {
  @tracked isOk = false;
  flip = () => this.isOk = !this.isOk;

  <template>
    <Flipper @isOk={{this.isOk}} />
    <button onclick={{this.flip}}>Flip</button>
  </template>
}