<!-- template-lint triple-curlies=false -->
<div class="form__input-group form__input-group--icon-left balloon-wrapper">
  <input
    type="text"
    id="community-selector-input"
    class="form__input form__input--anim-basic js-communityselector-input"
    placeholder={{placeholder}}
    spellcheck=false
    autocomplete="off"
    name="community"
    value={{communityName}}
    onblur={{action 'focusOut'}}
    oninput={{action 'inputChange' value='target.value'}}
    onfocus={{action 'focusIn'}}
  >
  <div class="form__icon-group">
    <label for="community-selector-input">
      <figure class="form__icon icon">
        {{partial 'svg/nav-search'}}
      </figure>
    </label>
  </div>

  <div class="balloon balloon--down balloon--dropmenu balloon--no-tail balloon--cols full-width cm-search-balloon {{if showResults 'show' 'hide'}}">
    <ul class="balloon__list scroll-y height-100">
      {{#each searchResults as |result index|}}
        {{dashboards/live/edit-broadcast/community-search/search-result
          community=result
          dropIndex=index
          currIndex=selectedIndex
          hoverResult=(action 'hoverResult')
          selectResult=(action 'selectResult')
        }}
      {{/each}}
    </ul>
    <ul class="balloon__list pd-l-1 pd-r-1 scroll-y height-100">
      <div>
        {{#if hoveredResult}}
          <p class="sub-text">{{translatedStreams}}</p>
          <div class="upcase sub-text mg-t-2 pd-t-1 border-t">{{i18n 'Community Description'}}</div>
          <p>{{hoveredDescription}}</p>
          <div class="upcase sub-text mg-t-2 pd-t-1 border-t">{{i18n 'Community Rules'}}</div>
          <p class="cm-info">{{{hoveredRules}}}</p>
        {{else}}
          <p class="empty-grid">{{i18n 'Hover over a Community.'}}</p>
        {{/if}}
      </div>
    </ul>
  </div>
</div>
