{{#d-modal-body
  title="discourse_local_dates.title"
  class="discourse-local-dates-create-modal"
  style="overflow: auto"}}

  <div class="form">
    {{#unless isValid}}
      <div class="validation-error alert alert-error">
        {{i18n "discourse_local_dates.create.form.invalid_date"}}
      </div>
    {{else}}
      {{#if timezoneIsDifferentFromUserTimezone}}
        <div class="preview alert alert-info">
          <b>{{formatedCurrentUserTimezone}} </b>{{currentPreview}}
        </div>
      {{/if}}
    {{/unless}}

    {{computeDate}}

    <div class="date-time-configuration">
      <div class="inputs-panel">
        <div class="date-time-control from {{if fromSelected 'is-selected'}} {{if fromFilled 'is-filled'}}">
          {{d-icon "calendar-alt"}}
          {{d-button
            action=(action "focusFrom")
            translatedLabel=formattedFrom
            class="date-time"}}
        </div>

        <div class="date-time-control to {{if toSelected 'is-selected'}} {{if toFilled 'is-filled'}}">
          {{d-icon "calendar-alt"}}
          {{d-button
            action=(action "focusTo")
            translatedLabel=formattedTo
            class="date-time"}}
          {{#if toFilled}}
            {{d-button icon="times" action=(action "eraseToDateTime") class="delete-to-date"}}
          {{/if}}
        </div>

        {{#unless site.mobileView}}
          {{timezone-input
            headerIcon="globe"
            value=timezone
            onSelect=(action (mut timezone))}}
        {{/unless}}
      </div>

      <div class="picker-panel">
        {{input class="fake-input"}}
        <div class="date-picker" id="picker-container-{{elementId}}"></div>

        {{#if fromSelected}}
          <div class="time-pickers">
            {{d-icon "far-clock"}}
            {{input maxlength=5 placeholder="hh:mm" input=(action "setTime") type="time" value=(unbound time) class="time-picker"}}
          </div>
        {{/if}}

        {{#if toSelected}}
        {{#if toDate}}
          <div class="time-pickers">
            {{d-icon "far-clock"}}
            {{input maxlength=5 placeholder="hh:mm" input=(action "setToTime") type="time" value=(unbound toTime) class="time-picker"}}
          </div>
        {{/if}}
        {{/if}}
      </div>

      {{#if site.mobileView}}
        {{timezone-input
          headerIcon="globe"
          value=timezone
          onSelect=(action (mut timezone))}}
      {{/if}}
    </div>

    {{#if advancedMode}}
      <div class="advanced-options">
        {{#unless isRange}}
          <div class="control-group recurrence">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.recurring_title"}}
            </label>
            <p>{{{i18n "discourse_local_dates.create.form.recurring_description"}}}</p>
            <div class="controls">
              {{combo-box
                content=recurringOptions
                class="recurrence-input"
                value=recurring
                onSelect=(action (mut recurring))
                none="discourse_local_dates.create.form.recurring_none"}}
            </div>
          </div>
        {{/unless}}

        <div class="control-group format">
          <label>{{i18n "discourse_local_dates.create.form.format_title"}}</label>
          <p>
            {{i18n "discourse_local_dates.create.form.format_description"}}
            <a target="_blank" rel="noopener" href="https://momentjs.com/docs/#/parsing/string-format/">
              {{d-icon "question-circle"}}
            </a>
          </p>
          <div class="controls">
            {{text-field value=format class="format-input"}}
          </div>
        </div>
        <div class="control-group">
          <ul class="formats">
            {{#each previewedFormats as |previewedFormat|}}
              <li class="format">
                <a class="moment-format" href {{action (mut format) previewedFormat.format}}>
                  {{previewedFormat.format}}
                </a>
                <span class="previewed-format">
                  {{previewedFormat.preview}}
                </span>
              </li>
            {{/each}}
          </ul>
        </div>

        <div class="control-group timezones">
          <label>{{i18n "discourse_local_dates.create.form.timezones_title"}}</label>
          <p>{{i18n "discourse_local_dates.create.form.timezones_description"}}</p>
          <div class="controls">
            {{multi-select class="timezones-input" allowAny=false maximum=5 content=allTimezones values=timezones}}
          </div>
        </div>
      </div>
    {{/if}}
  </div>
{{/d-modal-body}}

<div class="modal-footer discourse-local-dates-create-modal-footer">
  {{#if isValid}}
    {{d-button class="btn btn-primary"
      action=(action "save")
      label="discourse_local_dates.create.form.insert"}}
  {{/if}}

  <a class="cancel-action" href {{action "cancel"}}>
    {{i18n "cancel"}}
  </a>

  {{d-button
    class="btn-default advanced-mode-btn"
    action=(action "advancedMode")
    icon="cog"
    label=toggleModeBtnLabel}}
</div>