<form class='highlighter-form js-highlighter-form form'>


  <div class="{{unless firstPage "hidden"}}">

    <h4>1. {{i18n "Set Highlight Range"}}</h4>
    <p class='sub-text mg-b-2'>
      {{i18n "You can manually set the time or set it to the current time of the video playhead"}}
    </p>

    <div class="form__group">
      <label>{{i18n "Start Time"}}</label>
      <div class="tower tower--gutter-none">
        <div class="col-xs-4">
          <input value="{{model.startTime}}" class='time start-time form__input highlighter-form__time' maxlength='10' type='text'>
          <input value="{{startTimeInSeconds}}" name='start_time' type='hidden'>
        </div>
        <div class="col-xs-8">
          <button {{action 'usePlayheadTimeStart'}} class='playhead-time button button--text mg-l-1'>
            {{i18n "Use Current Video Time"}}
          </button>
        </div>
      </div>
    </div>

    <div class="form__group mg-t-1">
      <label>{{i18n "End Time"}}</label>
      <div class="tower tower--gutter-none">
        <div class="col-xs-4">
          <input value="{{model.endTime}}" class='time end-time form__input highlighter-form__time' maxlength='10' type='text'>
          <input value="{{endTimeInSeconds}}" name='end_time' type='hidden'>
        </div>
        <div class="col-xs-8">
          <button {{action 'usePlayheadTimeEnd'}} class='playhead-time button button--text mg-l-1'>
            {{i18n "Use Current Video Time"}}
          </button>
        </div>
      </div>
    </div>

    <div class="form__group mg-t-1">
      <label>{{i18n "Duration"}}</label>
      <h4 class='sub-text pd-t-0'>
        {{highlightLength}}
      </h4>
    </div>

    <div class="form__group mg-t-2">
      <button {{action next}} class='button'>
        {{i18n "Describe Highlight"}}
      </button>
    </div>

  </div>


  <div class="{{if firstPage "hidden"}}">

    <h4>2. {{i18n "Describe Your Highlight"}}</h4>
    <p class='sub-text mg-b-2'>
      {{i18n "Name and describe the moment of the broadcast you are highlighting"}}
    </p>

    <div class="form__group">
      <label>{{t 'general.forms.title'}}</label>
      {{input name="title" value=model.highlight_title class='form__input'}}
    </div>

    <div class="form__group mg-t-1">
      <label>{{t 'general.forms.description'}}</label>
      {{textarea name="description" value=model.highlight_description class='form__input highlighter-form__description mg-b-0'}}
    </div>

    <div class="form__group mg-t-1">
      <label>{{i18n "Game"}}</label>
      {{game-selector isDisabled=model.isGameSelectorDisabled inputClass="form__input" value=model.game}}
    </div>

    <div class="form__group mg-t-1">
      <label>{{t 'general.Twitch.language'}}</label>
      {{highlighter-language-select}}
    </div>

    <div class="form__group mg-t-1">
      <label>{{i18n "Tags"}} <span class='hint inline italic small'>{{i18n "separate with commas"}}</span></label>
      {{input name="tag_list" value=model.tag_list class="form__input"}}
    </div>

    <div class="form__group mg-t-2 js-highlighter-action">
      <button disabled={{isCreatingHighlight}} {{action createHighlight}} class='primary button'>
        <span>
          {{i18n "Create Highlight"}}
        </span>
      </button>
      <button {{action previous}} class="button button--text">
        {{i18n "Previous"}}
      </button>
    </div>

  </div>


  <div class="{{unless model.shareHighlight "hidden"}}"></div>

</form>
