osr-discourse-src/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

{{#d-modal-body
  title="discourse_local_dates.create.modal_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}}
      <div class="preview alert alert-info">
        <b>{{currentUserTimezone}}: </b>
        {{currentPreview}}
      </div>
    {{/unless}}

    {{computeDate}}

    <div class="date-time-configuration">
      <div class="range">
        <div class="from">
          <div class="control-group date">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.date_title"}}
            </label>
            <div class="controls">
              {{date-picker
                onSelect=(action (mut date))
                class="date-input"
                value=date
                defaultDate="DD-MM-YYYY"}}
            </div>
          </div>

          <div class="control-group time">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.time_title"}}
            </label>
            <div class="controls">
              {{input input=(mut time) type="time" value=time class="time-input"}}
            </div>
          </div>
        </div>

        <div class="to-indicator">
          {{if site.mobileView "↓" "→"}}
        </div>

        <div class="to">
          <div class="control-group date">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.date_title"}}
            </label>
            <div class="controls">
              {{date-picker
                onSelect=(action (mut toDate))
                class="date-input"
                value=toDate
                defaultDate="DD-MM-YYYY"}}
            </div>
          </div>

          <div class="control-group time">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.time_title"}}
            </label>
            <div class="controls">
              {{input input=(mut toTime) type="time" value=toTime class="time-input"}}
            </div>
          </div>
        </div>
      </div>

      <div class="timezone">
        <div class="control-group time">
          <label class="control-label">
            {{i18n "discourse_local_dates.create.form.timezone"}}
          </label>
          <div class="controls">
            {{combo-box
              class="timezone-input"
              allowAny=false
              content=allTimezones
              value=timezone
              onSelect=(action (mut timezone))}}
          </div>
        </div>
      </div>
    </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-default"
      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>