{{#bsy-sheet id="forms"}}
  {{#bsy-sheet.header}}
    <h2>Forms</h2>
  {{/bsy-sheet.header}}
  <form>
    {{bsy-input currentEmail
      label="Email address"
      update=(action (mut currentEmail))
      type="email"
      inputId="email"
    }}

    <div class="row">
      <div class="col-xs-6">
        {{bsy-input currentFirstName
          label="First name"
          update=(action (mut currentFirstName))
          inputId="firstname"
        }}
      </div>

      <div class="col-xs-6">
        {{bsy-input currentLastName
          label="Last name"
          update=(action (mut currentLastName))
          inputId="lastname"
        }}
      </div>
    </div>

    {{bsy-input
        currentFirstName
        label="Large first name with icon"
        update=(action (mut currentFirstName))
        inputId="firstNameLarge"
        icon="owner"
        size="lg"}}
    {{bsy-input
        currentFirstName
        label="Default first name with icon"
        update=(action (mut currentFirstName))
        inputId="firstNameDefault"
        icon="owner"}}
    {{bsy-input
        currentFirstName
        label="Small first name with icon"
        update=(action (mut currentFirstName))
        inputId="firstNameSmall"
        icon="owner"
        size="sm"}}

    {{#bsy-input-addon}}
      {{#bsy-input-addon.addon}}${{/bsy-input-addon.addon}}
      {{bsy-input-addon.input currentAmount
        label="Amount"
        update=(action (mut currentAmount))
        type="number"
        inputId="amount"
      }}
      {{#bsy-input-addon.addon}}.00{{/bsy-input-addon.addon}}
    {{/bsy-input-addon}}

    <div class="row">
      <div class="col-xs-4">
        {{#bsy-select currentDestination
          label="Destination"
          options=cities
          onchange=(action (mut currentDestination))
          inputId="destination"
          as |name|
        }}
          {{name}}
        {{/bsy-select}}
      </div>

      <div class="col-xs-4">
        {{#bsy-select currentDestination
          label="Destination"
          options=cities
          searchEnabled=false
          onchange=(action (mut currentDestination))
          inputId="destination2"
          as |name|
        }}
          {{name}}
        {{/bsy-select}}
      </div>

      <div class="col-xs-4">
        {{#bsy-select-multiple currentDestinations
          label="Destinations"
          options=cities
          onchange=(action (mut currentDestinations))
          inputId="destinations"
          as |name|
        }}
          {{name}}
        {{/bsy-select-multiple}}
      </div>
    </div>

    {{bsy-textarea currentComment
      label="Comment"
      update=(action (mut currentComment))
      inputId="comment"
      rows=3
    }}

    {{bsy-checkbox isChecked
      label="Check me out"
      update=(action (mut isChecked))
    }}

    {{bsy-radio selectedRentalType
      label="Apartment"
      option="apartment"
      update=(action (mut selectedRentalType))
    }}
    {{bsy-radio selectedRentalType
      label="House"
      option="house"
      update=(action (mut selectedRentalType))
    }}
    {{bsy-radio selectedRentalType
      label="Villa"
      option="villa"
      update=(action (mut selectedRentalType))
    }}

    <h3>Radio buttons</h3>
    {{#bsy-radio-buttons aria-label="Rental Type"}}
      {{bsy-radio-buttons.button selectedRentalType
        label="Apartment"
        option="apartment"
        update=(action (mut selectedRentalType))
      }}
      {{bsy-radio-buttons.button selectedRentalType
        label="House"
        option="house"
        update=(action (mut selectedRentalType))
      }}
      {{bsy-radio-buttons.button selectedRentalType
        label="Villa"
        option="villa"
        update=(action (mut selectedRentalType))
      }}
    {{/bsy-radio-buttons}}
  </form>

  <h3>Inline form</h3>
  <form class="form-inline">
    {{bsy-input currentName
      label="Name"
      update=(action (mut currentName))
      inputId="name2"
    }}

    {{bsy-input currentEmail
      label="Email address"
      update=(action (mut currentEmail))
      inputId="email2"
    }}

    {{#bsy-button type="submit" loadingLabel="Sending..."}}Send invitation{{/bsy-button}}
  </form>
{{/bsy-sheet}}

{{#bsy-sheet id="buttons"}}
  {{#bsy-sheet.header}}
    <h2>Buttons</h2>
  {{/bsy-sheet.header}}
  {{#bsy-button type="primary"}}Primary{{/bsy-button}}
  {{#bsy-button type="secondary"}}Secondary{{/bsy-button}}
  {{bsy-button.close}}
  {{#bsy-button type="danger"}}Danger{{/bsy-button}}
  {{#bsy-button type="link"}}Link{{/bsy-button}}
{{/bsy-sheet}}

{{#bsy-sheet id="modal"}}
  {{#bsy-sheet.header}}
    <h2>Modal</h2>
  {{/bsy-sheet.header}}
  {{#bsy-button type="primary" click=(action "toggleModal")}}Toggle Modal{{/bsy-button}}

  {{#if isShowingModal}}
    {{#bsy-modal}}
      {{#bsy-modal.header close=(action "toggleModal")}}
        <h3 class="modal-title">Modal Name or Headline</h3>
      {{/bsy-modal.header}}
      {{#bsy-modal.body}}
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec luctus felis. Nulla a lacus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis tortor sodales libero euismod, eget suscipit arcu mollis. Nam nibh libero, tempus eu urna convallis, tempor efficitur ex. Donec molestie nibh ac luctus imperdiet. Nulla vitae vulputate ipsum. Phasellus porta gravida odio, in iaculis quam cursus et. Ut ac vehicula erat. Nulla sapien turpis, dapibus vel pellentesque sed, suscipit sit amet nibh. Pellentesque rhoncus nibh porttitor, posuere nulla quis, auctor nunc. Pellentesque fermentum tempor justo, a interdum nulla. Nullam lacus odio, posuere ut posuere hendrerit, semper non velit.</p>
        <p>Cras sed consequat nunc. Phasellus sed sagittis nibh. Aliquam a vulputate risus. Vestibulum molestie bibendum dolor, vel blandit ipsum malesuada et. Praesent enim nibh, finibus vel luctus id, bibendum vitae eros. Aliquam vel semper diam. Cras elementum molestie eros, ac venenatis quam. Proin fermentum ante eros, mollis vestibulum eros consequat eu. Cras quis lorem vel metus hendrerit porttitor. Nunc hendrerit vitae nunc ut pellentesque. Etiam quis urna ac lorem eleifend ornare. Donec nibh ante, bibendum id pellentesque non, dignissim ut urna. Phasellus congue ultricies ipsum, ut luctus augue pulvinar nec.</p>
      {{/bsy-modal.body}}
      {{#bsy-modal.footer}}
        <div class="row">
          <div class="col-xs-6">
            {{#bsy-button type="secondary" class="btn-block" click=(action "toggleModal")}}Close{{/bsy-button}}
          </div>
          <div class="col-xs-6">
            {{#bsy-button type="primary" class="btn-block"}}Save Changes{{/bsy-button}}
          </div>
        </div>
      {{/bsy-modal.footer}}
    {{/bsy-modal}}
  {{/if}}
{{/bsy-sheet}}

{{#bsy-sheet id="tabs"}}
  {{#bsy-nav class="nav-tabs"}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 1{{/bsy-nav.item}}
    {{#bsy-nav.item active=true click=(action "sampleAction")}}Tab 2{{/bsy-nav.item}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 3{{/bsy-nav.item}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 4{{/bsy-nav.item}}
  {{/bsy-nav}}
  <div>
    <p>Text...</p>
  </div>
{{/bsy-sheet}}

{{#bsy-sheet id="pills" class="row"}}
  {{#bsy-nav class="nav-pills nav-stacked col-sm-3"}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 1{{/bsy-nav.item}}
    {{#bsy-nav.item active=true click=(action "sampleAction")}}Tab 2{{/bsy-nav.item}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 3{{/bsy-nav.item}}
    {{#bsy-nav.item click=(action "sampleAction")}}Tab 4{{/bsy-nav.item}}
  {{/bsy-nav}}
  <div class="col-sm-9">
    <p>Text...</p>
  </div>
{{/bsy-sheet}}

{{#bsy-sheet id="calendar"}}
  {{#bsy-sheet.header}}
    <h2>Calendar</h2>
  {{/bsy-sheet.header}}
  {{#power-calendar as |calendar|}}
    <div class="calendar">
      {{calendar.nav}}
      {{calendar.days}}
    </div>
  {{/power-calendar}}
{{/bsy-sheet}}

{{#bsy-sheet id="alerts"}}
  {{#bsy-sheet.header}}
    <h2>Alerts</h2>
  {{/bsy-sheet.header}}
  {{#bsy-alert type="success"}}
    <strong>Well done!</strong> You successfully read this important alert message.
  {{/bsy-alert}}
  {{#bsy-alert type="info"}}
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
  {{/bsy-alert}}
  {{#bsy-alert type="warning"}}
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  {{/bsy-alert}}
  {{#bsy-alert type="danger"}}
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
  {{/bsy-alert}}
  {{#bsy-alert type="warning" dismissible=true}}
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  {{/bsy-alert}}
{{/bsy-sheet}}