<StyleguideExample
  @title="combo-box"
  @initialValue={{this.dummy.options.0.name}}
  as |value|
>
  <ComboBox
    @content={{this.dummy.options}}
    @value={{value}}
    @onChange={{fn (mut value)}}
  />
</StyleguideExample>

<StyleguideExample
  @title="filterable combo-box"
  @initialValue={{this.dummy.categories.0.name}}
  as |value|
>
  <ComboBox
    @content={{this.dummy.categories}}
    @value={{value}}
    @options={{hash filterable=true}}
    @onChange={{fn (mut value)}}
  />
</StyleguideExample>

<StyleguideExample
  @title="combo-box with a default state"
  @initialValue={{this.dummy.options.0.name}}
  as |value|
>
  <ComboBox
    @content={{this.dummy.options}}
    @value={{value}}
    @options={{hash none="category.none"}}
    @onChange={{fn (mut value)}}
  />
</StyleguideExample>

<StyleguideExample
  @title="combo-box clearable"
  @initialValue={{this.dummy.options.0.name}}
  as |value|
>
  <ComboBox
    @content={{this.dummy.options}}
    @clearable={{true}}
    @value={{value}}
    @options={{hash none="category.none"}}
    @onChange={{fn (mut value)}}
  />
</StyleguideExample>

<StyleguideExample
  @title="topic-notifications-options"
  @initialValue={{1}}
  as |value|
>
  <TopicNotificationsOptions
    @topic={{this.dummy.topic}}
    @value={{value}}
    @onChange={{fn (mut value)}}
  />
</StyleguideExample>

<StyleguideExample @title="topic-footer-mobile-dropdown">
  <TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
</StyleguideExample>

<StyleguideExample
  @title="category-chooser"
  @initialValue={{this.categories.0.name}}
  as |value|
>
  <CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
</StyleguideExample>

<StyleguideExample @title="pinned-button">
  <PinnedButton @topic={{this.dummy.pinnedTopic}} />
</StyleguideExample>

<StyleguideExample @title="pinned-options">
  <PinnedOptions @topic={{this.dummy.pinnedTopic}} />
</StyleguideExample>

<StyleguideExample @title="categories-admin-dropdown">
  <CategoriesAdminDropdown @onChange={{action "dummy"}} />
</StyleguideExample>

<StyleguideExample @title="category-notifications-button">
  <CategoryNotificationsButton
    @category={{get this.dummy.categories 0}}
    @value={{1}}
    @onChange={{action "dummy"}}
  />
</StyleguideExample>

<StyleguideExample @title="notifications-button">
  <NotificationsButton
    @options={{hash i18nPrefix="groups.notifications"}}
    @value={{2}}
    @onChange={{action "dummy"}}
  />
</StyleguideExample>

<StyleguideExample @title="dropdown-select-box">
  <DropdownSelectBox
    @content={{this.dummy.options}}
    @onChange={{action "dummy"}}
    @options={{hash translatedNone="Something"}}
  />
</StyleguideExample>

<StyleguideExample @title="future-date-input-selector">
  <FutureDateInputSelector
    @input={{this.dummy.topicTimerUpdateDate}}
    @includeWeekend={{true}}
    @includeForever={{true}}
    @options={{hash none="time_shortcut.select_timeframe"}}
  />
</StyleguideExample>

<StyleguideExample @title="multi-select">
  <MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
</StyleguideExample>

<StyleguideExample @title="admin group-chooser">
  <GroupChooser
    @selected={{this.dummy.selectedGroups}}
    @content={{this.dummy.groups}}
    @onChange={{action "dummy"}}
  />
</StyleguideExample>

<StyleguideExample @title="list-setting">
  <ListSetting
    @settingValue={{this.dummy.settings}}
    @onChange={{action "dummy"}}
  />
</StyleguideExample>

<StyleguideExample @title="list-setting with colors">
  <ListSetting
    @settingValue={{this.dummy.colors}}
    @nameProperty="color"
    @onChange={{action "dummy"}}
  />
</StyleguideExample>

<StyleguideExample @title="user-notifications-dropdown">
  <UserNotificationsDropdown
    @user={{this.currentUser}}
    @value="changeToNormal"
  />
</StyleguideExample>