<script id="temp-template" type="template">
<div class="row mb-3">
    <input type="hidden" name="sensor{{index}}" value="{{address}}"/>
    <div class="col-xl-3 col-lg-4 col-sm-6">
        <div class="input-group input-group-sm">
            <div class="input-group-prepend">
                <span class="input-group-text">Address {{index}}</span>
            </div>
            <input name="sensor{{index}}address" type="text" class="form-control" value="{{address}}" maxlength="16" disabled/>
        </div>
    </div>
    <div class="col-xl-4 col-lg-3 col-sm-6">
        <div class="input-group input-group-sm">
            <div class="input-group-prepend">
                <span class="input-group-text">Name</span>
            </div>
            <input name="sensor{{index}}name" type="text" class="form-control" value="{{name}}" maxlength="16"/>
        </div>
    </div>
    <div class="col-xl-3 col-lg-3 col-sm-6">
        <div class="form-check">
            <input name="sensor{{index}}common" class="form-check-input" type="checkbox" value="true" id="sensor{{index}}common" {{common}}>
            <label class="form-check-label" for="sensor{{index}}common">Include in average</label>
        </div>
    </div>
    <div class="col-xl-2 col-lg-2 col-sm-6">
        <span id="temp-{{index}}">{{value}}</span> &deg;C
    </div>
</div>
</script>

<form method="post">
    <input type="hidden" name="tempConfig" value="true"/>
    <div id="sensors" class="my-3 p-3 bg-white rounded shadow">
        <div id="loading" class="alert alert-info">Loading temperature sensors</div>
        <div id="notemp" class="alert alert-info" style="display: none;">No temperature sensors are configured or found</div>
        <div id="error" class="alert alert-danger" style="display: none;">Error loading data</div>
    </div>
    <hr/>
    <div class="row form-group">
        <div class="col-6">
            <a href="/" class="btn btn-outline-secondary">Back</a>
        </div>
        <div class="col-6 text-right">
            <button class="btn btn-primary">Save</button>
        </div>
    </div>
</form>    
