{% if kind == "bool" %}
<div class="mb-3">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="{{ safe_name }}" name="{{ field_name }}" value="on"{% if checked %} checked{% endif %}>
    <label class="form-check-label" for="{{ safe_name }}">{{ name }}</label>
  </div>
  <small class="form-hint text-muted">{{ hint_text }}</small>
</div>
{% elif kind == "number" %}
<div class="mb-3">
  <label class="form-label" for="{{ safe_name }}">{{ name }}</label>
  <input type="number" {% if number_step %}step="{{ number_step }}" {% endif %}class="form-control" id="{{ safe_name }}" name="{{ field_name }}" value="{{ str_val }}">
  <small class="form-hint text-muted">{{ hint_text }}</small>
</div>
{% elif kind == "readonly" %}
<div class="mb-3">
  <label class="form-label" for="{{ safe_name }}">{{ name }}</label>
  <input type="text" class="form-control bg-secondary" id="{{ safe_name }}" name="{{ field_name }}" value="{{ str_val }}" readonly>
  <small class="form-hint text-muted">{{ hint_text }}</small>
</div>
{% else %}
<div class="mb-3">
  <label class="form-label" for="{{ safe_name }}">{{ name }}</label>
  <input type="text" class="form-control" id="{{ safe_name }}" name="{{ field_name }}" value="{{ str_val }}">
  <small class="form-hint text-muted">{{ hint_text }}</small>
</div>
{% endif %}