<div class="bs-example" data-test-fastboot-container>
  <BsForm @formLayout="inline" @model={{this}} as |form|>
    <form.element
      @controlType="power-select"
      @options={{typeChoices}}
      @label="Type"
      @property="type" as |el|>
      <el.control @searchEnabled @class="ml-sm-1"/>
    </form.element>
    <form.element
      @controlType="checkbox"
      @disabled={{bs-eq type tabs}}
      @label="Stacked"
      @property="stacked"
      @onChange={{action "updateStacked"}}
      class="ml-sm-2"
    />
    <form.element
      @controlType="checkbox"
      @disabled={{stacked}}
      @label="Justified"
      @property="justified"
      class="ml-sm-2"
    />
    <form.element
      @controlType="checkbox"
      @disabled={{stacked}}
      @label="Fill"
      @property="fill"
      class="ml-sm-2"
    />
  </BsForm>
  <hr>
  <!-- BEGIN-SNIPPET nav-demo -->
  <BsNav
    @type={{type}}
    @justified={{justified}}
    @stacked={{stacked}}
    @fill={{fill}} as |nav|
  >
    <nav.item>
      <nav.link-to @route="index">Home</nav.link-to>
    </nav.item>
    <nav.item>
      <nav.link-to @route="demo.navs">Nav</nav.link-to>
    </nav.item>
    <nav.dropdown as |dd|>
      <dd.toggle>
        Dropdown
        <span class="caret"></span>
      </dd.toggle>
      <dd.menu as |ddm|>
        <ddm.item>
          <ddm.link-to @route="index">Home</ddm.link-to>
        </ddm.item>
        <ddm.item>
          <ddm.link-to @route="demo.navs">Nav</ddm.link-to>
        </ddm.item>
      </dd.menu>
    </nav.dropdown>
  </BsNav>
  <!-- END-SNIPPET -->
</div>
<div class="highlight">
  <CodeSnippet
    @name="nav-demo.hbs"
    @dynamicProperties={{hash
      type=type
      stacked=stacked
      justified=justified
      fill=fill
    }}
  />
</div>
