{{#common/modal-dialog size="medium" onClose=cancel showModal=showModal}}
  <div class="card pd-2">
    {{#dashboards/events/create-event-form event=event onDidSave=close as |form|}}
      {{#if form.didReceiveErrorResponse}}
        <div class="mg-b-2 subwindow_notice">
          <h4 class="pd-0">{{i18n 'Whoops, something went wrong.'}}</h4>
          <p>{{i18n 'Please try creating an event later.'}}</p>
        </div>
      {{/if}}

      <label>{{i18n 'Event Title'}}</label>
      <input type="text"
             value={{event.title}}
             oninput={{action (mut event.title) value='target.value'}}
             class="form__input form__input--lg"
             placeholder={{i18n 'Your Awesome Twitch Event'}}
             autocomplete="off"
             data-title>

      <hr class="mg-y-3">

      {{#dashboards/events/time-range
        start=event.startTime
        end=event.endTime
        onStartChange=(action (mut event.startTime))
        onEndChange=(action (mut event.endTime)) as |range|}}

        <label class="mg-t-2">{{i18n 'Start date & time'}}</label>
        <div class="tower tower--bleed mg-b-1">
          <div class="col-xs-6">
            {{!
              Because these date pickers are being rendered in a modal with a
              z-index of 5888999, we're entering a style war that Pikaday is
              not going to win. When we have to render Pikaday inside of
              these modals, we render them with an 'inline' style and pass
              them a container element that is carefully positioned below
              their inputs.
            }}
            {{#yield-element as |element id|}}
              {{range.startDatePicker
                class='mg-b-0 full-width form__input form__input--lg'
                theme='inline'
                options=(hash container=element)
                testSelector='start-date'}}
              <div id={{id}}></div>
            {{/yield-element}}
          </div>

          <div class="col-xs-2">
            {{range.startTimePicker
              testSelector='start-time'
              inputClass="form__input form__input--lg"}}
          </div>

          <div class="col-xs-2">
            <input disabled
                   type="text"
                   class="form__input form__input--lg"
                   value={{current-timezone format='z'}}>
          </div>

          {{#if form.validation.errors.startTime}}
            <div class="col-xs-12 inline-warning">
              {{i18n form.validation.errors.startTime}}
            </div>
          {{/if}}

          {{#if form.validation.warnings.startTime}}
            <div class="col-xs-12 inline-caution">
              {{i18n form.validation.warnings.startTime}}
            </div>
          {{/if}}
        </div>

        <label class="mg-t-2">{{i18n 'End date & time'}}</label>
        <div class="tower tower--bleed mg-b-1">
          <div class="col-xs-6">
            {{#yield-element as |element id|}}
              {{range.endDatePicker
                class='mg-b-0 full-width form__input form__input--lg'
                theme='inline'
                options=(hash container=element)
                testSelector='end-date'}}
              <div id={{id}}></div>
            {{/yield-element}}
          </div>

          <div class="col-xs-2">
            {{range.endTimePicker
              testSelector='end-time'
              inputClass="form__input form__input--lg"}}
          </div>

          {{#if form.validation.errors.endTime}}
            <div class="col-xs-12 inline-warning">
              {{i18n form.validation.errors.endTime}}
            </div>
          {{/if}}
        </div>
      {{/dashboards/events/time-range}}

      <div class="tower tower--bleed mg-b-1">
        <div class="col-xs-8">
          <div class="flex flex--column" style="height: 100%">
            <label class="mg-t-2">{{i18n 'Event Image'}} {{i18n '(optional)'}}</label>
            {{#file-drop-zone
              accept=form.acceptedMimeTypes
              onFileDrop=form.onImagePicked
              class='pos-relative cursor--pointer flex__item flex__item--grow'
            }}
              <div class="drop-zone__border full-width pos-absolute flex flex--verticalCenter" style="height: 100%">
                <div class="full-width">
                  <h4 class="pd-t-0">{{i18n 'Drag & Drop or Select Image File'}}</h4>
                  <p class="mg-b-0">
                    {{i18n "For best results use a .PNG or .JPG that's 1200x600 and less than 3 MB"}}
                  </p>
                </div>
              </div>
              <div class="drop-zone__plus"></div>
            {{/file-drop-zone}}
          </div>
        </div>

        <div class="col-xs-4">
          <label class="mg-t-2">{{i18n 'Current Image'}}</label>
          <div class="pos-relative">
            <div style="height: 0%; padding-bottom: 50%; background: #C5B5E3; border: 5px solid #DAD8DE"></div>
            {{#if form.previewURL}}
              <img src={{form.previewURL}} class="full-width pos-absolute top-0 left-0" style="max-height: 100%">
            {{else}}
              <div style="fill: #8B6CC7;">
                <svg class="pos-absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%);" height="80px" viewBox="0 0 30 30" width="80px" x='0px' y='0px'>
                  <path clip-rule='evenodd' d='M21,9h-2v6h2V9z M5.568,3L4,7v17h5v3h3.886L16,24h5l6-6V3H5.568z M25,16l-4,4h-6l-3,3v-3H8V5h17V16z M16,9h-2v6h2V9z' fill-rule='evenodd'></path>
                </svg>
              </div>
            {{/if}}
          </div>
        </div>

        {{#if form.validation.warnings.imageFile}}
          <div class="inline-warning">
            {{i18n form.validation.warnings.imageFile}}
          </div>
        {{/if}}
      </div>

      <label class="mg-t-2">{{i18n 'Game/Category'}} {{i18n '(optional)'}}</label>
      {{game-select
        didResolveGame=form.onGameSelect
        didBeginSearch=form.onGamePending
        gameName=form.gameName
        inputClass='form__input form__input--lg'
        testSelector='game-select'
      }}
      {{#if form.validation.errors.game}}
        <div class="col-xs-12 inline-warning">
          {{i18n form.validation.errors.game}}
        </div>
      {{/if}}

      <label class="mg-t-2">{{i18n 'Description'}} {{i18n '(optional)'}}</label>
      <textarea
        value={{event.description}}
        oninput={{action (mut event.description) value='target.value'}}
        class="form__input form__input--lg"
        placeholder={{i18n 'Why might your audience want to attend?'}}
        data-description></textarea>

      <button type="submit"
              class="button button--large"
              disabled={{form.isDisabled}}
              data-test-save>
        {{i18n 'Save'}}
      </button>

      <button type="button"
              onclick={{cancel}}
              class="button button--text button--large float-right"
              data-test-cancel>
        {{i18n 'Cancel'}}
      </button>
    {{/dashboards/events/create-event-form}}
  </div>
{{/common/modal-dialog}}
