<div class="mg-b-2 form__group {{if isTitleError 'form__group--error'}}" data-test-selector="title">
  <label class="form__label" for={{concat elementId '-title'}}>{{t 'general.forms.title'}}</label>
  <div class="form__input-group">
    {{input
      id=(concat elementId '-title')
      value=title
      class='form__input form__input--anim-basic'
      placeholder=(i18n 'Title this broadcast')}}
  </div>
  <p class="form__hint {{if isTitleError 'form__hint--error'}}">{{i18n 'Characters remaining:'}} {{titleCharsRemaining}}</p>
</div>

<div class="mg-b-2 form__group" data-test-selector="language">
  <label class="form__label" for={{concat elementId '-language'}}>{{i18n 'Broadcast Language'}}</label>
  <div class="form__input-group">
    <select id={{concat elementId '-language'}} class="form__input" onchange={{action 'languageChange' value='target.value'}}>
      <option selected={{isInvalidLanguage}} disabled>{{i18n 'Pick a Language'}}</option>

      {{#each languageOptions as |languageOption|}}
        <option value={{languageOption.code}} selected={{eq languageOption.code broadcasterLanguage}}>
          {{i18n languageOption.name}}
        </option>
      {{/each}}
    </select>
  </div>

  <div class="form__hint" data-test-selector="chat-language-restriction">
    {{input
      type='checkbox'
      id=(concat elementId '-blc-checkbox')
      class='form__input'
      checked=isChatLanguageRestricted
      disabled=isBlcCheckboxDisabled}}
    <label for={{concat elementId '-blc-checkbox'}}>{{i18n 'Restrict Chat Language'}}</label>
  </div>
</div>

<div class="mg-b-2 form__input-group {{if isInvalidCommunity 'form__group--error'}}">
  <label class="form__label" for="vod-selectbox-community">{{i18n 'Community'}}</label>
  <div class="widget-game-search">
    {{dashboards/live/edit-broadcast/community-search
      community=community
      communityName=communityName
      communityChange=(action 'communityChange')
      channel=channel}}
  </div>

  {{#if isInvalidCommunity}}
    <p class="form__hint form__hint--error">
      {{#if communityError}}
        {{i18n communityError}}
      {{else}}
        {{i18n 'Please choose an existing community'}}
      {{/if}}
    </p>
  {{/if}}
</div>

<div class="mg-b-2 form__group {{if isInvalidGame 'form__group--error'}}" data-test-selector="game">
  <label class="form__label form__label--inline" for="game-selector-input">
    {{~#if isPlaying~}}
      {{i18n 'Playing'}}
    {{~else~}}
      {{i18n 'Not Playing'}}
    {{~/if~}}
  </label>

  <div class="form__input-group form__input-group--icon-left">
    {{game-select
      gameName=game
      inputClass='form__input form__input--anim-basic'
      didBeginSearch=(action (mut isGamePending) true)
      didResolveGame=(action 'onGameResolved')
    }}

    <div class="form__icon-group">
      <label for="game-selector-input">
        {{svg-icon path='svg/nav-search' class='form__icon'}}
      </label>
    </div>
  </div>

  {{#if isInvalidGame}}
    <p class="form__hint form__hint--error">
      {{i18n 'Please choose a supported game'}}
    </p>
  {{/if}}

  <p class="form__hint">
    <a href="https://help.twitch.tv/customer/portal/articles/983016" target="_blank" rel="noopener noreferrer">
      {{~i18n 'All content must adhere to and be categorized according to our guidelines.'~}}
    </a>
  </p>
</div>

<div class="dash-widget__item flex flex--horizontalEnd mg-b-0">
  <div class="flex__item balloon-wrapper">
    <button disabled={{isUpdateDisabled}} {{action 'updateBroadcast'}} class="button {{if isUpdateDisabled 'button--disabled'}}" type="submit">
      {{i18n 'Update Information'}}
    </button>
    <div class="balloon balloon--right balloon--up balloon--fancy balloon--alert {{if isErrored 'show' 'hide'}}" {{action 'removeError'}}>
      {{i18n 'Error! Could not update stream information'}}
    </div>
    <div class="balloon balloon--right balloon--up balloon--fancy balloon--purple {{if isSuccess 'show' 'hide'}}" {{action 'removeSuccess'}}>
      {{i18n 'Updated'}}
    </div>
  </div>
</div>
