<div id="settings-modal" class="modal" data-signals:settings.target="{{ selected_output|json }}">
<div class="modal-content">
<button type="button" class="close-button" aria-label="Close settings" data-on:click="document.getElementById('settings-modal').remove()"><icon-x></icon-x></button>
<h2>Settings</h2>
<p><small>Mode: <strong>{{ mode }}</strong></small></p>
<form id="settings-form" data-on:submit__prevent="@post('/api/settings/update', {filterSignals: {include: /^settings(\.|$)/}})">
<div id="settings-form-error"></div>
<input-group>
<label for="target-host" class="form-label">Output Target (Hosts.yml)</label>
<select id="target-host" name="target" class="form-input" data-bind:settings.target {% if !can_update_exporter %}disabled{% endif %}>
{% for option in output_options %}
<option value="{{ option.value }}" {% if option.value == selected_output %}selected{% endif %}>{{ option.label }}</option>
{% endfor %}
</select>
{% if !can_update_exporter %}
<info-text><i>Service mode uses the exporter configured at startup.</i></info-text>
{% endif %}
</input-group>
<input-group>
<label for="kibana-url" class="form-label">Kibana URL</label>
<input type="url" id="kibana-url" name="kibana_url" data-bind:settings.kibana_url class="form-input" value="{{ kibana_url }}" />
</input-group>
<div style="display: flex; gap: var(--size-s); align-items: center;">
<input class="button" type="submit" value="Save Settings" />
</div>
</form>
</div>
</div>