<div class="text-content">
  <div class='content-header'>
    <h4>{{i18n 'Video Information'}}</h4>
  </div>
  {{#if errorMessage}}
    <div data-test-error-message class="subwindow_notice">
      {{i18n errorMessage}}
    </div>
  {{/if}}

  <div class="tower tower--xs-1-1 card-vod-edit form">
    <div class="col-md-3 form__group">
      <div class='item'>
        {{#if thumbnailFileToUpload}}
          {{video/thumbnail-cropper
            onCropCoordinatesChange=(action (mut cropCoordinates))
            imageToCrop=thumbnailFileToUpload
          }}
        {{else}}
          {{#if video.thumbnailPreviewUrl}}
            <div class='thumb'>
              <img src={{video.thumbnailPreviewUrl}}>
            </div>
          {{else}}
            <div class="modal__thumbnail--none">
              <h4>{{i18n 'No Thumbnail Available' }}</h4>
              <p class="sub-text">{{i18n 'Please wait until your video has been processed or upload a custom thumbnail'}}</p>
            </div>
          {{/if}}
        {{/if}}
      </div>

      <div class="item form__input-group">
        <h6 class="mg-b-0">{{i18n 'Thumbnail'}}</h6>
        <p class="pd-b-2 pd-t-0">{{i18n 'Max size: 1280 x 720px'}}</p>
        {{#each sortedThumbnails as |thumbnail|}}
          <div {{action 'selectThumbnail' thumbnail}} data-test-selectable-thumbnail class="modal__thumbnail modal__thumbnail--small">
            <img src={{thumbnail.url}}>

            {{! These elements will be overlayed on top of the image above}}
            {{#if (eq video.selectedThumbnail thumbnail)}}
              <div class="modal__thumbnail-selected">
              </div>
            {{else}}
              <div class='modal__thumbnail-setthumb'>
                {{i18n 'Set Thumbnail'}}
              </div>
            {{/if}}
          </div>
        {{/each}}

        {{#if video.customThumbnail}}
          <button
            {{action 'removeCustomThumbnail'}}
            data-test-remove-custom-thumbnail-button
            class="button button--hollow modal__thumbnail-remove align-center full-width" >
            {{i18n 'Remove thumbnail'}}
          </button>
        {{/if}}
      </div>
      <div class="clear pd-t-1">
        {{#if thumbnailFileToUpload}}
          <button class="button button--hollow full-width align-center" onclick={{action 'clearThumbnailFileToUpload'}}>
            {{i18n 'Cancel upload'}}
          </button>
        {{else}}
          {{file-picker-button
            text=(i18n 'Upload custom image')
            onChange=(action 'setThumbnailFileToUpload')
            name='thumbnailUpload'
            class='button button--hollow full-width align-center'
            accept=acceptMimeType}}
        {{/if}}
      </div>
    </div>

    <div class="col-md-5">
      <div class='item form__input-group'>
        <label for="vod-title" class="form__label">{{t 'general.forms.title'}}</label>
        {{input name="vod-title" value=video.title class="form__input " type="text" placeholder="Title"}}
      </div>
      <div class='item form__input-group'>
        <label for="vod-game" class="form__label">{{i18n 'Game'}}</label>
        {{game-selector value=video.game name="vod-game" inputClass="form__input" type="text" placeholder="Type to search and add games"}}
      </div>
      <div class='item form__input-group '>
        <label for="vod-description" class="form__label form__label--optional">{{t 'general.forms.description'}}</label>
        {{textarea name="vod-description" value=video.descriptionMarkdown class="form__input " type="text" placeholder="Describe your video..."}}
      </div>
      <div class="item form__group">
        <label for="vod-selectbox-language" class="form__label">{{t 'general.Twitch.language'}}</label>
        {{broadcaster-language-picker languageCode=video.language onChange=(action (mut video.language)) inputClass="form__input" name="vod-selectbox-language"}}
      </div>
      <div class='item form__input-group'>
        <label for="vod-tagsList" class="form__label form__label--optional">{{i18n 'Tags'}}</label>
        {{input name="vod-tagList" value=video.tagList class="form__input" type="text" placeholder="speedrun, 2016, kappa..."}}
      </div>
    </div>
    {{#if showPublishSettings}}
      <div class="col-md-4">
        <div class="item brick pd-t-0 form__input-group">
          {{manager/publish-strategy-selector
            video=video
            modalContainer=modalContainer
            onPublishStrategyChanged=(action 'setPublishable')
          }}

          {{!-- TODO: improve UX for when all notifications have been published --}}
          {{#if isPublishable}}
            {{manager/notification-form
              url=(route-for 'videos' video.id absolute=true)
              video=video
            }}
          {{/if}}
        </div>
        <div class='item form__input-group'>
          <label for="vod-url" class="form__label">{{i18n 'URL'}}</label>
          {{input
            name="vod-url"
            class='text absolute-url form__input'
            click=(action 'highlightText') readonly=true
            value=(route-for 'videos' video.id absolute=true)
          }}
        </div>
      </div>
    {{/if}}
  </div>

  <div class='buttons'>
    <a {{action onComplete}} class='button button--text'>
      <span>{{t 'general.forms.cancel'}}</span>
    </a>
    <button
      onclick={{action 'save'}}
      class='button'
      type='submit'
      name='save'>
      {{t 'general.forms.done'}}
    </button>
  </div>
</div>
