<div class="card">
    <div class="card-body">
        <h5 class="card-title">HamQTH</h5>
        <div class="card-text spothole-card-text">
            <div class="form-check mb-2">
                <input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth_enabled"
                       onchange="saveSettings();">
                <label for="hamqth_enabled" class="form-check-label">Use data from HamQTH</label>
            </div>
            <div class="mb-2">
                <input type="text" class="storeable-text form-control" id="hamqth-username"
                       placeholder="Username (Callsign)" onchange="saveSettings();" autocomplete="username">
            </div>
            <div class="mb-2">
                <input type="password" class="password-field form-control" id="hamqth-password" placeholder="Password"
                       data-remember-checkbox="hamqth-remember-password" onchange="saveSettings();"
                       autocomplete="current-password">
            </div>
            <div class="form-check">
                <input type="checkbox" class="storeable-checkbox form-check-input" id="hamqth-remember-password"
                       onchange="saveSettings();">
                <label for="hamqth-remember-password" class="form-check-label">Remember password</label>
            </div>
            <div class="mt-3">
                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload();">Reload with
                    this data
                </button>
            </div>
            <div class="mt-1">
                <small>See <a href="/about#privacy">Privacy</a> for more information.</small>
            </div>
        </div>
    </div>
</div>
