{{#if this.hasAvailableHostSets}}
  <Rose::Form
    class='full-width'
    @onSubmit={{fn this.submit @submit}}
    @cancel={{@cancel}}
    @disabled={{@model.isSaving}}
    @error={{@model.errors.base}}
    as |form|
  >

    <form.actions
      @submitText={{t 'resources.target.actions.add-host-sources'}}
      @cancelText={{t 'actions.cancel'}}
    />

    <Rose::Table as |table|>
      <table.header as |header|>
        <header.row as |row|>
          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
          <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
          <row.headerCell>{{t 'resources.host-catalog.title'}}</row.headerCell>
        </header.row>
      </table.header>
      <table.body as |body|>
        {{#each this.filteredHostSets as |hostSet|}}
          <body.row as |row|>
            <row.cell>
              <form.checkbox
                @label={{hostSet.id}}
                @description={{hostSet.description}}
                @onChange={{fn this.toggleHostSet hostSet}}
              />
            </row.cell>
            <row.cell>{{hostSet.name}}</row.cell>
            <row.cell>
              <Rose::Badge>{{t
                  (concat 'resources.host-set.types.' hostSet.type)
                }}</Rose::Badge>
            </row.cell>
            <row.cell>
              <code>{{hostSet.host_catalog_id}}</code>
            </row.cell>
          </body.row>
        {{/each}}
      </table.body>
    </Rose::Table>

  </Rose::Form>
{{/if}}

{{#unless this.hasAvailableHostSets}}
  <Rose::Layout::Centered>
    <Rose::Message
      @title={{t 'resources.target.host-source.messages.none.title'}}
      as |message|
    >
      <message.description>
        {{t 'resources.target.host-source.messages.none.description'}}
      </message.description>
      <message.link @route='scopes.scope.targets.target.host-sources'>
        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
        {{t 'actions.back'}}
      </message.link>
    </Rose::Message>
  </Rose::Layout::Centered>
{{/unless}}