{% load custom_tags_and_filters %}
<div class="panel-body">
    <h3 class="customization-section-title">MQTT Broker Configuration</h3>
    <p>Configure the MQTT broker connection for publishing NEMO events. Only one MQTT configuration is supported.</p>
    
    <form method="POST" action="{% url 'customize' 'mqtt' %}" class="form-horizontal">
        {% csrf_token %}
        
        <!-- Basic Settings -->
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_enabled">Enable MQTT</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               id="mqtt_enabled" 
                               name="mqtt_enabled" 
                               {% if config.enabled %}checked{% endif %} 
                               value="enabled">
                        Enable MQTT event publishing
                    </label>
                </div>
            </div>
        </div>

        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Published events</h3>
        <p class="help-block light-grey">
            When MQTT is enabled, <strong>all</strong> supported NEMO event streams are published (tool usage enable/disable,
            operational / non-operational, tasks, tool/area/reservation saves, area access, etc.). There are no per-category toggles.
        </p>

        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_name">Configuration Name</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_name" 
                       name="mqtt_name" 
                       class="form-control" 
                       value="{{ config.name }}">
            </div>
            <div class="col-md-5 help-block light-grey">A descriptive name for this MQTT configuration.</div>
        </div>
        
        <!-- Broker Connection -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Broker Connection</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_host">Broker Host</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_broker_host" 
                       name="mqtt_broker_host" 
                       class="form-control" 
                       value="{{ config.broker_host }}">
            </div>
            <div class="col-md-5 help-block light-grey">The hostname or IP address of the MQTT broker.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_port">Broker Port</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_broker_port" 
                       name="mqtt_broker_port" 
                       class="form-control" 
                       value="{{ config.broker_port }}">
            </div>
            <div class="col-md-5 help-block light-grey">The port number of the MQTT broker (typically 1883).</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_keepalive">Keep Alive (seconds)</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_keepalive" 
                       name="mqtt_keepalive" 
                       class="form-control" 
                       value="{{ config.keepalive }}">
            </div>
            <div class="col-md-5 help-block light-grey">Keep alive interval in seconds (default: 60).</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_client_id">Client ID</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_client_id" 
                       name="mqtt_client_id" 
                       class="form-control" 
                       value="{{ config.client_id }}">
            </div>
            <div class="col-md-5 help-block light-grey">Unique identifier for this NEMO instance on the MQTT broker.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_username">Broker username</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_broker_username" 
                       name="mqtt_broker_username" 
                       class="form-control" 
                       value="{{ config.username|default:'' }}"
                       placeholder="e.g. nemo">
            </div>
            <div class="col-md-5 help-block light-grey">Username sent in the MQTT CONNECT packet. Set with broker password to disable anonymous access.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_password">Broker password</label>
            <div class="col-md-4">
                <input type="password" 
                       id="mqtt_broker_password" 
                       name="mqtt_broker_password" 
                       class="form-control" 
                       placeholder="Leave blank to keep current password"
                       autocomplete="off">
            </div>
            <div class="col-md-5 help-block light-grey">Password for broker authentication. Leave blank to keep existing password.</div>
        </div>
        
        <!-- HMAC Message Authentication -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">HMAC Message Authentication</h3>
        <p class="help-block light-grey">Sign payloads with HMAC so subscribers can verify authenticity and integrity. Uses a shared secret; transport remains plain TCP.</p>
        
        <div class="form-group">
            <label class="control-label col-md-3">Use HMAC signing</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               id="mqtt_use_hmac" 
                               name="mqtt_use_hmac" 
                               {% if config.use_hmac %}checked{% endif %} 
                               value="enabled"
                               onchange="toggleHmacFields()">
                        Sign MQTT payloads with HMAC
                    </label>
                </div>
            </div>
        </div>
        
        <div id="hmac-fields"{% if not config.use_hmac %} style="display: none;"{% endif %}>
            <div class="form-group">
                <label class="control-label col-md-3" for="mqtt_hmac_secret_key">HMAC secret key</label>
                <div class="col-md-9">
                    <input type="password" 
                           id="mqtt_hmac_secret_key" 
                           name="mqtt_hmac_secret_key" 
                           class="form-control" 
                           placeholder="Shared secret (leave blank to keep current)"
                           autocomplete="off">
                </div>
                <div class="col-md-12 help-block light-grey">Same secret must be configured on subscribers to verify messages. Leave blank when editing to keep existing key.</div>
            </div>
        </div>
        
        <!-- Message Settings -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Message Settings</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Message Options</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_retain_messages" 
                               {% if config.retain_messages %}checked{% endif %} 
                               value="enabled">
                        Retain messages on broker
                    </label>
                    <br />
                    <label>
                        <input type="checkbox" 
                               name="mqtt_clean_session" 
                               {% if config.clean_session %}checked{% endif %} 
                               value="enabled">
                        Clean session on connect
                    </label>
                </div>
            </div>
        </div>
        
        <!-- Connection Management -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Connection Management</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Auto-reconnect</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_auto_reconnect" 
                               {% if config.auto_reconnect %}checked{% endif %} 
                               value="enabled">
                        Automatically reconnect to broker on connection loss
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_reconnect_delay">Reconnect Delay (seconds)</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_reconnect_delay" 
                       name="mqtt_reconnect_delay" 
                       class="form-control" 
                       value="{{ config.reconnect_delay }}">
            </div>
            <div class="col-md-5 help-block light-grey">Delay between reconnection attempts.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_max_reconnect_attempts">Max Reconnect Attempts</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_max_reconnect_attempts" 
                       name="mqtt_max_reconnect_attempts" 
                       class="form-control" 
                       value="{{ config.max_reconnect_attempts }}">
            </div>
            <div class="col-md-5 help-block light-grey">Maximum number of reconnection attempts (0 = unlimited).</div>
        </div>
        
        <!-- Logging -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Logging</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Message Logging</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_log_messages" 
                               {% if config.log_messages %}checked{% endif %} 
                               value="enabled">
                        Log all MQTT messages to database
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_log_level">Log Level</label>
            <div class="col-md-4">
                <select id="mqtt_log_level" name="mqtt_log_level" class="form-control">
                    <option value="DEBUG" {% if config.log_level == 'DEBUG' %}selected{% endif %}>DEBUG</option>
                    <option value="INFO" {% if config.log_level == 'INFO' %}selected{% endif %}>INFO</option>
                    <option value="WARNING" {% if config.log_level == 'WARNING' %}selected{% endif %}>WARNING</option>
                    <option value="ERROR" {% if config.log_level == 'ERROR' %}selected{% endif %}>ERROR</option>
                </select>
            </div>
            <div class="col-md-5 help-block light-grey">Minimum log level for MQTT messages.</div>
        </div>
        
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <div class="text-center">{% button type="save" value="Save MQTT Configuration" %}</div>
    </form>
</div>

<script>
function toggleHmacFields() {
    var hmacCheckbox = document.getElementById('mqtt_use_hmac');
    var hmacFields = document.getElementById('hmac-fields');
    
    if (hmacCheckbox.checked) {
        hmacFields.style.display = 'block';
    } else {
        hmacFields.style.display = 'none';
    }
}
</script>