<DModalBody @title="poll.ui_builder.title" @class="poll-ui-builder">
  <div class="input-group poll-type">
    <a
      href
      {{on "click" (fn this.updatePollType "regular")}}
      class="poll-type-value poll-type-value-regular
        {{if this.isRegular 'active'}}"
    >
      {{i18n "poll.ui_builder.poll_type.regular"}}
    </a>

    <a
      href
      {{on "click" (fn this.updatePollType "multiple")}}
      class="poll-type-value poll-type-value-multiple
        {{if this.isMultiple 'active'}}"
    >
      {{i18n "poll.ui_builder.poll_type.multiple"}}
    </a>

    {{#if this.showNumber}}
      <a
        href
        {{on "click" (fn this.updatePollType "number")}}
        class="poll-type-value poll-type-value-number
          {{if this.isNumber 'active'}}"
      >
        {{i18n "poll.ui_builder.poll_type.number"}}
      </a>
    {{/if}}
  </div>

  {{#if this.showAdvanced}}
    <div class="input-group poll-title">
      <label class="input-group-label">{{i18n
          "poll.ui_builder.poll_title.label"
        }}</label>
      <Input @value={{this.pollTitle}} />
    </div>
  {{/if}}

  {{#unless this.isNumber}}
    <div class="poll-options">
      {{#if this.showAdvanced}}
        <label class="input-group-label">{{i18n
            "poll.ui_builder.poll_options.label"
          }}</label>
        <Textarea
          @value={{this.pollOptionsText}}
          {{on "input" (action "onOptionsTextChange")}}
        />
        {{#if this.showMinNumOfOptionsValidation}}
          {{#unless this.minNumOfOptionsValidation.ok}}
            <InputTip @validation={{this.minNumOfOptionsValidation}} />
          {{/unless}}
        {{/if}}
      {{else}}
        {{#each this.pollOptions as |option|}}
          <div class="input-group poll-option-value">
            <Input
              @value={{option.value}}
              @enter={{action "addOption" option}}
            />
            {{#if this.canRemoveOption}}
              <DButton
                @icon="trash-alt"
                @action={{action "removeOption" option}}
              />
            {{/if}}
          </div>
        {{/each}}

        <div class="poll-option-controls">
          <DButton
            @class="btn-default"
            @icon="plus"
            @label="poll.ui_builder.poll_options.add"
            @action={{action "addOption" this.pollOptions.lastObject}}
          />
          {{#if
            (and
              this.showMinNumOfOptionsValidation
              (not this.minNumOfOptionsValidation.ok)
            )
          }}
            <InputTip @validation={{this.minNumOfOptionsValidation}} />
          {{/if}}
        </div>
      {{/if}}
    </div>
  {{/unless}}

  {{#unless this.isRegular}}
    <div class="options">
      <div class="input-group poll-number">
        <label class="input-group-label">{{i18n
            "poll.ui_builder.poll_config.min"
          }}</label>
        <Input
          @type="number"
          @value={{this.pollMin}}
          class="poll-options-min"
          min="1"
        />
      </div>

      <div class="input-group poll-number">
        <label class="input-group-label">{{i18n
            "poll.ui_builder.poll_config.max"
          }}</label>
        <Input
          @type="number"
          @value={{this.pollMax}}
          class="poll-options-max"
          min="1"
        />
      </div>

      {{#if this.isNumber}}
        <div class="input-group poll-number">
          <label class="input-group-label">{{i18n
              "poll.ui_builder.poll_config.step"
            }}</label>
          <Input
            @type="number"
            @value={{this.pollStep}}
            min="1"
            class="poll-options-step"
          />
        </div>
      {{/if}}
    </div>

    {{#unless this.minMaxValueValidation.ok}}
      <InputTip @validation={{this.minMaxValueValidation}} />
    {{/unless}}
  {{/unless}}

  {{#if this.showAdvanced}}
    <div class="input-group poll-allowed-groups">
      <label class="input-group-label">{{i18n
          "poll.ui_builder.poll_groups.label"
        }}</label>
      <GroupChooser
        @content={{this.siteGroups}}
        @value={{this.pollGroups}}
        @onChange={{action (mut this.pollGroups)}}
        @labelProperty="name"
        @valueProperty="name"
      />
    </div>

    <div class="input-group poll-date">
      <label class="input-group-label">{{i18n
          "poll.ui_builder.automatic_close.label"
        }}</label>
      <DateTimeInput
        @date={{this.pollAutoClose}}
        @onChange={{action (mut this.pollAutoClose)}}
        @clearable={{true}}
        @useGlobalPickerContainer={{true}}
      />
    </div>

    <div class="input-group poll-select">
      <label class="input-group-label">{{i18n
          "poll.ui_builder.poll_result.label"
        }}</label>
      <ComboBox
        @content={{this.pollResults}}
        @value={{this.pollResult}}
        @class="poll-result"
        @valueProperty="value"
        @onChange={{action (mut this.pollResult)}}
      />
    </div>

    {{#unless this.isNumber}}
      <div class="input-group poll-select column">
        <label class="input-group-label">{{i18n
            "poll.ui_builder.poll_chart_type.label"
          }}</label>

        <div class="radio-group">
          <RadioButton
            @id="poll-chart-type-bar"
            @name="poll-chart-type"
            @value="bar"
            @selection={{this.chartType}}
          />
          <label for="poll-chart-type-bar">{{d-icon "chart-bar"}}
            {{i18n "poll.ui_builder.poll_chart_type.bar"}}</label>
        </div>

        <div class="radio-group">
          <RadioButton
            @id="poll-chart-type-pie"
            @name="poll-chart-type"
            @value="pie"
            @selection={{this.chartType}}
          />
          <label for="poll-chart-type-pie">{{d-icon "chart-pie"}}
            {{i18n "poll.ui_builder.poll_chart_type.pie"}}</label>
        </div>
      </div>
    {{/unless}}

    {{#unless this.isPie}}
      <div class="input-group poll-checkbox column">
        <label>
          <Input @type="checkbox" @checked={{this.publicPoll}} />
          {{i18n "poll.ui_builder.poll_public.label"}}
        </label>
      </div>
    {{/unless}}
  {{/if}}
</DModalBody>

<div class="modal-footer">
  <DButton
    @action={{action "insertPoll"}}
    @icon="chart-bar"
    @class="btn-primary"
    @label="poll.ui_builder.insert"
    @disabled={{this.disableInsert}}
  />

  <DButton
    @label="cancel"
    @class="btn-flat"
    @action={{route-action "closeModal"}}
  />

  <DButton
    @action={{action "toggleAdvanced"}}
    @class="btn-default show-advanced"
    @icon="cog"
    @title={{if
      this.showAdvanced
      "poll.ui_builder.hide_advanced"
      "poll.ui_builder.show_advanced"
    }}
  />
</div>