<div class="paper-form__row{% if field.errors %} paper-form__row--invalid{% endif %}{% if is_readonly %} paper-form__row--readonly{% endif %}{% if field.field.required %} paper-form__row--required{% endif %}{% if field.name %} field-{{ field.name }}{% endif %}">
  <div class="row">
    {% block label %}
      <div class="col-md-3 col-xxl-2">
        <label class="paper-form__label{% if field.help_text %} dotted-underline{% endif %}"
               for="{{ field.id_for_label }}"
               {% if field.help_text %}
               data-toggle="popover"
               data-placement="bottom"
               data-trigger="hover"
               data-html="true"
               data-content="{{ field.help_text }}"
               {% endif %}>{{ field.label|capfirst }}</label>
      </div>
    {% endblock %}

    {% block widget %}
      <div class="col-md-9 col-xxl-10">
        {% if is_readonly %}
          <div class="readonly">{{ field.contents }}</div>
        {% else %}
          <div class="paper-widget{% if field.errors %} paper-widget--invalid{% endif %}{% if is_prepopulated %} prepopulated-field{% endif %}"{% if is_prepopulated %} data-prepopulate-field-name="{{ field.name }}"{% endif %}>
            {{ field }}
          </div>

          <ul class="paper-error-list invalid-feedback">{% spaceless %}
            {% for error in field.errors %}
              <li>{{ error }}</li>
            {% endfor %}
          {% endspaceless %}</ul>
        {% endif %}
      </div>
    {% endblock %}

  </div>
</div>
