{% 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"{{ checked_attr | safe }}>
    <label class="form-check-label" for="{{ safe_name }}">{{ name }}</label>
  </div>
  {{ hint | safe }}
</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 | safe }}">
  {{ hint | safe }}
</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 | safe }}" readonly>
  {{ hint | safe }}
</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 | safe }}">
  {{ hint | safe }}
</div>
{% endif %}