<div class="setting-label">
  <label>{{i18n "admin.wizard.field.validations.header"}}</label>
</div>
<div class="setting-value full">
  <ul>
    {{#each-in field.validations as |type props|}}
      <li>
        <span class="setting-title">
          <h4>{{i18n (concat "admin.wizard.field.validations." type)}}</h4>
          <Input @type="checkbox" @checked={{this.props.status}} />
          {{i18n "admin.wizard.field.validations.enabled"}}
        </span>
        <div class="validation-container">
          <div class="validation-section">
            <div class="setting-label">
              <label>{{i18n
                  "admin.wizard.field.validations.categories"
                }}</label>
            </div>
            <div class="setting-value">
              {{category-selector
                categories=(get
                  this (concat "validationBuffer." type ".categories")
                )
                onChange=(action "updateValidationCategories" type props)
                class="wizard"
              }}
            </div>
          </div>
          <div class="validation-section">
            <div class="setting-label">
              <label>{{i18n
                  "admin.wizard.field.validations.max_topic_age"
                }}</label>
            </div>
            <div class="setting-value">
              <Input
                @type="number"
                @value={{this.props.time_n_value}}
                class="time-n-value"
              />
              {{combo-box
                value=(readonly props.time_unit)
                content=timeUnits
                class="time-unit-selector"
                onChange=(action (mut props.time_unit))
              }}
            </div>
          </div>
          <div class="validation-section">
            <div class="setting-label">
              <label>{{i18n "admin.wizard.field.validations.position"}}</label>
            </div>
            <div class="setting-value">
              {{radio-button
                name=(concat type field.id)
                value="above"
                selection=props.position
              }}
              <span>{{i18n "admin.wizard.field.validations.above"}}</span>
              {{radio-button
                name=(concat type field.id)
                value="below"
                selection=props.position
              }}
              <span>{{i18n "admin.wizard.field.validations.below"}}</span>
            </div>
          </div>
        </div>
      </li>
    {{/each-in}}
  </ul>
</div>