{% set input_id = "inp-" ~ widget.path | replace('.','_') | replace('(','_') | replace(')','_') | replace(':','_') %}
{% set uq_eligible = tool.uq_enabled and widget.attrs.get('uq_enabled', true) %}
<div class="rp-widget rp-integer{% if uq_eligible %} rp-uq-widget{% endif %}" data-path="{{ widget.path }}" data-type="integer"
     {% if widget.enable %}data-enable='{{ widget.enable }}'{% endif %}
     {% if widget.color %}data-color="{{ widget.color }}"{% elif widget.attrs.color %}data-color="{{ widget.attrs.color }}"{% endif %}
     {% if uq_eligible %}data-uq-eligible="true"{% endif %}
     data-min="{{ widget.attrs.min | strip_units if widget.attrs.min else '' }}"
     data-max="{{ widget.attrs.max | strip_units if widget.attrs.max else '' }}">
    {% set _tt = {'desc': widget.description, 'min': widget.attrs.min | strip_units if widget.attrs.min else '', 'max': widget.attrs.max | strip_units if widget.attrs.max else ''} %}
    <label class="rp-label" for="{{ input_id }}" data-rp-tooltip='{{ _tt | tojson }}' title="{{ widget.description }}">
        {{ widget.label or widget.id }}
    </label>
    <div class="rp-number-controls">
    <input type="number"
           id="{{ input_id }}"
           class="rp-input rp-input-integer"
           name="{{ widget.path }}"
           value="{{ widget.default | strip_units }}"
           {% if widget.attrs.min %}min="{{ widget.attrs.min | strip_units }}"{% endif %}
           {% if widget.attrs.max %}max="{{ widget.attrs.max | strip_units }}"{% endif %}
           step="1"
           {% if widget.description %}aria-describedby="{{ input_id }}-desc"{% endif %}
           {% if widget.color or widget.attrs.color %}oninput="rappture.updateInputColor(this)" onchange="rappture.updateInputColor(this)"{% endif %}>
    {% if uq_eligible %}
    <select class="rp-uq-dist-select" aria-label="Distribution type for {{ widget.label or widget.id }}"
        onchange="rappture.onUqDistChange(this)">
        <option value="exact">exact</option>
        <option value="uniform">uniform</option>
        <option value="gaussian">gaussian</option>
    </select>
    {% endif %}
    </div>
    {% if uq_eligible %}
    <div class="rp-uq-dist-params" style="display:none">
        <div class="rp-uq-uniform" style="display:none">
            <label class="rp-uq-param-label">min <input type="number" class="rp-input rp-uq-input rp-uq-min" step="1"
                value="{{ widget.attrs.min | strip_units if widget.attrs.min else '' }}"></label>
            <label class="rp-uq-param-label">max <input type="number" class="rp-input rp-uq-input rp-uq-max" step="1"
                value="{{ widget.attrs.max | strip_units if widget.attrs.max else '' }}"></label>
        </div>
        <div class="rp-uq-gaussian" style="display:none">
            <label class="rp-uq-param-label">mean <input type="number" class="rp-input rp-uq-input rp-uq-mean" step="1"
                value="{{ widget.default | strip_units }}"></label>
            <label class="rp-uq-param-label">std <input type="number" class="rp-input rp-uq-input rp-uq-std" step="1" min="0"
                value=""></label>
            <label class="rp-uq-param-label">min <input type="number" class="rp-input rp-uq-input rp-uq-g-min" step="1"
                value="{{ widget.attrs.min | strip_units if widget.attrs.min else '' }}" placeholder="auto"></label>
            <label class="rp-uq-param-label">max <input type="number" class="rp-input rp-uq-input rp-uq-g-max" step="1"
                value="{{ widget.attrs.max | strip_units if widget.attrs.max else '' }}" placeholder="auto"></label>
        </div>
    </div>
    {% endif %}
    {% if widget.description %}
    <span id="{{ input_id }}-desc" class="rp-sr-only">{{ widget.description }}</span>
    {% endif %}
    {% if widget.color or widget.attrs.color %}
    <div class="rp-color-bar" aria-hidden="true" style="height:6px;border-radius:3px;margin-top:3px"></div>
    {% endif %}
    {% if widget.hints %}
    <small class="rp-hints">{{ widget.hints }}</small>
    {% endif %}
</div>