{% extends "base.html" %}

{% block title %}Settings - ECM Control{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <h1>Settings</h1>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                {% for setting in settings %}
                <div class="mb-3">
                    <label for="setting_{{ setting.id }}" class="form-label">
                        <strong>{{ setting.key.replace('_', ' ').title() }}</strong>
                    </label>
                    {% if setting.description %}
                    <div class="form-text">{{ setting.description }}</div>
                    {% endif %}
                    <input type="text" 
                           class="form-control" 
                           id="setting_{{ setting.id }}" 
                           value="{{ setting.value }}"
                           hx-put="/settings/{{ setting.id }}"
                           hx-trigger="change"
                           name="value">
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h6>Setting Descriptions</h6>
            </div>
            <div class="card-body">
                <small>
                    <p><strong>Scale Address:</strong> Bluetooth MAC address of your Acaia scale</p>
                    <p><strong>Shot Completion Threshold:</strong> Weight change rate (g/s) to detect shot completion</p>
                    <p><strong>Weight Stabilize Time:</strong> Seconds to wait for scale stabilization</p>
                    <p><strong>Log Level:</strong> Logging verbosity (DEBUG, INFO, WARNING, ERROR)</p>
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}