<span {{on 'click' (action 'toggle')}} class="bbl-lookup-toggle button tiny gray text-orange expanded no-margin" role="button">
  {{#if this.closed}}
    <FaIcon @icon='chevron-down'/>
  {{else}}
    <FaIcon @icon='chevron-up'/>
  {{/if}}
  BBL Lookup
</span>

{{#unless this.closed}}
  <form class="bbl-lookup-form" {{action "handleSubmit" on="submit"}}>
    <div class="bbl-power-select">
      <label>Borough</label>
      {{#power-select
          class="bbl-lookup--boro-select"
          tagName="div"
          renderInPlace=true
          options=this.boroOptions
          searchEnabled=false
          selected=this.boro
          searchField='name'
          onChange=(action 'setBorocode')
          as |boro|}}
        {{boro.name}}
      {{/power-select}}
    </div>
    <div class="grid-x">
      <div class="cell auto block-container">
        <label>
          Block
          <Input class="bbl-lookup--block-input" @type="number" @value={{this.block}} min="1" max="99999" {{on "keyup" (action this.actions.validate)}} />
        </label>
      </div>
      <div class="cell auto lot-container">
        <label>
          Lot
          <Input class="bbl-lookup--lot-input" @type="number" @value={{this.lot}} min="1" max="9999" {{on "keyup" (action this.actions.validate)}} />
        </label>
      </div>
    </div>
    {{#if this.errorMessage}}<p class="lu-red text-center text-small">{{this.errorMessage}}</p>{{/if}}

    <button type="submit" class="button small expanded no-margin {{if (or this.validBlock this.validLot) '' 'disabled'}}">{{this.submitText}}</button>
  </form>
{{/unless}}

{{yield}}
