{% 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">Event Types</h3>
        <p class="help-block light-grey">
            Select which NEMO events should be published to MQTT. Uncheck any you do not want sent to the broker.
        </p>

        <div class="form-group">
            <label class="control-label col-md-3">Enable / Disable</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_usage_event_save"
                               {% if mqtt_event_filters.usage_event_save %}checked{% endif %}
                               value="enabled">
                        Publish tool <strong>enabled</strong> and <strong>disabled</strong> events
                        <span class="help-block light-grey">
                            Sent when a user starts or stops using a tool (<code>nemo/tools/{id}/enabled</code>, <code>.../disabled</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3">Operational / Non-operational</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_operational_group"
                               {% if mqtt_event_filters.tool_operational and mqtt_event_filters.tool_non_operational %}checked{% endif %}
                               value="enabled">
                        Publish <strong>operational</strong> and <strong>non-operational</strong> events
                        <span class="help-block light-grey">
                            Sent when a tool transitions between up/down (<code>nemo/tools/{id}/operational</code>, <code>.../non-operational</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3">Task created / Task resolved</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_task_group"
                               {% if mqtt_event_filters.task_created and mqtt_event_filters.task_resolved %}checked{% endif %}
                               value="enabled">
                        Publish <strong>task created</strong> and <strong>task resolved</strong> events
                        <span class="help-block light-grey">
                            Sent when tasks are created or updated for a tool (<code>nemo/tools/{id}/tasks</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <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>

<!-- Status and Recent Messages -->
<div class="panel-body">
    <h3 class="customization-section-title">Status & Recent Messages</h3>
    
    {% if config.enabled %}
        <div class="alert alert-success">
            <strong>MQTT is enabled</strong> - Events will be published to the broker.
        </div>
    {% else %}
        <div class="alert alert-warning">
            <strong>MQTT is disabled</strong> - No events will be published.
        </div>
    {% endif %}

    <h4>Status</h4>
    <div class="table-responsive">
        <table class="table table-striped table-condensed">
            <tbody>
                <tr>
                    <th style="width: 240px;">Bridge process (consumption loop)</th>
                    <td>
                        <span id="mqtt-bridge-heartbeat-summary"></span>
                        <span id="mqtt-bridge-heartbeat-at" style="margin-left: 8px;"></span>
                        <span id="mqtt-bridge-heartbeat-age" class="text-muted" style="margin-left: 8px;"></span>
                    </td>
                </tr>
                <tr>
                    <th>MQTT broker connection</th>
                    <td>
                        <span id="mqtt-bridge-status-value">
                            {% if bridge_status %}
                                <code>{{ bridge_status }}</code>
                            {% else %}
                                <span class="text-muted">(unknown)</span>
                            {% endif %}
                        </span>
                    </td>
                </tr>
                <tr>
                    <th>Broker connection (DB row) updated</th>
                    <td>
                        <span id="mqtt-bridge-status-updated-at">
                            <span class="text-muted">(unknown)</span>
                        </span>
                        <span id="mqtt-bridge-status-age" class="text-muted" style="margin-left: 8px;"></span>
                    </td>
                </tr>
                <tr>
                    <th>Config last updated</th>
                    <td><code>{{ config.updated_at|date:"M d, Y H:i:s" }}</code></td>
                </tr>
                <tr>
                    <th>Pending queue rows</th>
                    <td><code>{{ pending_queue_count }}</code></td>
                </tr>
            </tbody>
        </table>
    </div>
    {% if not config.enabled %}
    <p class="help-block light-grey" style="margin-top: 8px;">
        When MQTT is disabled, the bridge process may still run and update its heartbeat; the broker line may stay disconnected.
    </p>
    {% endif %}

    <div class="customization-separation" style="margin: 10px 0;"></div>

    <div class="form-group" style="margin-bottom: 0;">
        <label style="font-weight: normal;">
            <input type="checkbox" id="mqtt-debug-toggle">
            Show debug details
        </label>
        <div class="help-block light-grey" style="margin-top: 5px;">
            Shows recent queue rows and message history for troubleshooting.
        </div>
    </div>

    <div id="mqtt-debug-details" style="display: none;">
        <h4>Diagnostics (copy)</h4>
        <pre id="mqtt-diagnostics-snapshot" style="white-space: pre-wrap; word-break: break-word; margin-bottom: 15px;">Bridge process (consumption loop)
  last_heartbeat: <span id="mqtt-diag-heartbeat-at">{% if bridge_last_heartbeat_iso %}{{ bridge_last_heartbeat_iso }}{% else %}(none){% endif %}</span>
  heartbeat_age: <span id="mqtt-diag-heartbeat-age">(unknown)</span>
  process_health: <span id="mqtt-diag-process-health">(unknown)</span>

MQTT broker
  connection: <span id="mqtt-diag-bridge-status">{% if bridge_status %}{{ bridge_status }}{% else %}(unknown){% endif %}</span>
  status_updated_at: <span id="mqtt-diag-bridge-updated-at">(unknown)</span>
  status_age: <span id="mqtt-diag-bridge-age">(unknown)</span>

MQTT target
  broker_host: {{ config.broker_host }}
  broker_port: {{ config.broker_port }}
  client_id: {{ config.client_id }}
  keepalive: {{ config.keepalive }}
  clean_session: {{ config.clean_session }}
  username_set: {% if config.username %}true{% else %}false{% endif %}

Config
  enabled: {{ config.enabled }}
  use_hmac: {{ config.use_hmac }}
  retain_messages: {{ config.retain_messages }}
  auto_reconnect: {{ config.auto_reconnect }}
  reconnect_delay: {{ config.reconnect_delay }}
  max_reconnect_attempts: {{ config.max_reconnect_attempts }}
  log_level: {{ config.log_level }}
  log_messages_to_db: {{ config.log_messages }}

Queue
  pending_count: {{ pending_queue_count }}
  oldest_pending_created_at: {% if pending_queue_oldest %}{{ pending_queue_oldest|date:"c" }}{% else %}(none){% endif %}
  newest_pending_created_at: {% if pending_queue_newest %}{{ pending_queue_newest|date:"c" }}{% else %}(none){% endif %}

Plugin
  version: {% if plugin_version %}{{ plugin_version }}{% else %}(unknown){% endif %}</pre>

        {% if recent_queue_events %}
            <h4>Recent Queue Rows (PostgreSQL)</h4>
            <div class="table-responsive">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Topic</th>
                            <th>Processed</th>
                            <th>QoS</th>
                            <th>Retain</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for ev in recent_queue_events %}
                        <tr>
                            <td>{{ ev.id }}</td>
                            <td><code>{{ ev.topic }}</code></td>
                            <td>
                                {% if ev.processed %}
                                    <span class="label label-success">Yes</span>
                                {% else %}
                                    <span class="label label-warning">No</span>
                                {% endif %}
                            </td>
                            <td>{{ ev.qos }}</td>
                            <td>{{ ev.retain }}</td>
                            <td>{{ ev.created_at|date:"M d, Y H:i:s" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted">No recent MQTT queue rows found.</p>
        {% endif %}
        
        {% if recent_messages %}
            <h4>Recent MQTT Messages</h4>
            <div class="table-responsive">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>Topic</th>
                            <th>Status</th>
                            <th>QoS</th>
                            <th>Sent At</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for message in recent_messages %}
                        <tr>
                            <td>{{ message.topic }}</td>
                            <td>
                                {% if message.success %}
                                    <span class="label label-success">Success</span>
                                {% else %}
                                    <span class="label label-danger">Failed</span>
                                {% endif %}
                            </td>
                            <td>{{ message.qos }}</td>
                            <td>{{ message.sent_at|date:"M d, Y H:i:s" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
</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';
    }
}

(function() {
    function setDebugVisible(visible) {
        var details = document.getElementById('mqtt-debug-details');
        if (!details) return;
        details.style.display = visible ? 'block' : 'none';
    }

    function initDebugToggle() {
        var cb = document.getElementById('mqtt-debug-toggle');
        if (!cb) return;

        var saved = null;
        try { saved = localStorage.getItem('nemo_mqtt_debug_details'); } catch (e) { saved = null; }
        var initial = saved === '1';
        cb.checked = initial;
        setDebugVisible(initial);

        cb.addEventListener('change', function() {
            var on = !!cb.checked;
            setDebugVisible(on);
            try { localStorage.setItem('nemo_mqtt_debug_details', on ? '1' : '0'); } catch (e) { /* ignore */ }
        });
    }

    function formatAge(seconds) {
        if (seconds < 60) return Math.round(seconds) + 's ago';
        if (seconds < 3600) return Math.round(seconds / 60) + 'm ago';
        if (seconds < 86400) return Math.round(seconds / 3600) + 'h ago';
        return Math.round(seconds / 86400) + 'd ago';
    }

    /** Heartbeat fresher than this (seconds) => bridge consumption loop considered healthy (interval is 15s server-side). */
    var HEARTBEAT_OK_MAX_AGE_SEC = 60;

    function renderBridgeHeartbeat(iso) {
        var summaryEl = document.getElementById('mqtt-bridge-heartbeat-summary');
        var atEl = document.getElementById('mqtt-bridge-heartbeat-at');
        var ageEl = document.getElementById('mqtt-bridge-heartbeat-age');
        var diagAt = document.getElementById('mqtt-diag-heartbeat-at');
        var diagAge = document.getElementById('mqtt-diag-heartbeat-age');
        var diagHealth = document.getElementById('mqtt-diag-process-health');
        if (!summaryEl || !atEl || !ageEl) return;

        if (!iso) {
            summaryEl.innerHTML = '<span class="label label-default">No reports yet</span>';
            atEl.innerHTML = '';
            ageEl.textContent = '';
            if (diagAt) diagAt.textContent = '(none)';
            if (diagAge) diagAge.textContent = '(n/a)';
            if (diagHealth) diagHealth.textContent = 'no_data';
            return;
        }
        var d = new Date(iso);
        if (isNaN(d.getTime())) {
            summaryEl.innerHTML = '<span class="text-muted">(invalid)</span>';
            atEl.innerHTML = '';
            ageEl.textContent = '';
            if (diagAt) diagAt.textContent = '(invalid)';
            if (diagAge) diagAge.textContent = '(unknown)';
            if (diagHealth) diagHealth.textContent = 'unknown';
            return;
        }
        var ageSeconds = (Date.now() - d.getTime()) / 1000;
        var isStale = ageSeconds > HEARTBEAT_OK_MAX_AGE_SEC;
        summaryEl.innerHTML = isStale
            ? '<span class="label label-warning">Stale</span>'
            : '<span class="label label-success">Running</span>';
        atEl.innerHTML = '<code>' + d.toLocaleString() + '</code>';
        ageEl.textContent = '(' + formatAge(ageSeconds) + (isStale ? ', stale' : '') + ')';
        ageEl.className = isStale ? 'text-warning' : 'text-muted';
        if (diagAt) diagAt.textContent = d.toISOString();
        if (diagAge) diagAge.textContent = formatAge(ageSeconds) + (isStale ? ' (stale)' : '');
        if (diagHealth) diagHealth.textContent = isStale ? 'stale' : 'running_ok';
    }

    function renderBridgeStatus(status) {
        var el = document.getElementById('mqtt-bridge-status-value');
        if (!el) return;
        if (status === 'connected' || status === 'disconnected') {
            el.innerHTML = '<code>' + status + '</code>';
        } else {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
        }

        var diag = document.getElementById('mqtt-diag-bridge-status');
        if (diag) diag.textContent = status || '(unknown)';
    }

    function renderBridgeUpdatedAt(iso) {
        var el = document.getElementById('mqtt-bridge-status-updated-at');
        var ageEl = document.getElementById('mqtt-bridge-status-age');
        if (!el) return;
        if (!iso) {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
            if (ageEl) ageEl.textContent = '';
            var diagUpdated = document.getElementById('mqtt-diag-bridge-updated-at');
            var diagAge = document.getElementById('mqtt-diag-bridge-age');
            if (diagUpdated) diagUpdated.textContent = '(unknown)';
            if (diagAge) diagAge.textContent = '(unknown)';
            return;
        }
        var d = new Date(iso);
        if (isNaN(d.getTime())) {
            el.innerHTML = '<span class="text-muted">(unknown)</span>';
            if (ageEl) ageEl.textContent = '';
            var diagUpdated2 = document.getElementById('mqtt-diag-bridge-updated-at');
            var diagAge2 = document.getElementById('mqtt-diag-bridge-age');
            if (diagUpdated2) diagUpdated2.textContent = '(unknown)';
            if (diagAge2) diagAge2.textContent = '(unknown)';
            return;
        }
        el.innerHTML = '<code>' + d.toLocaleString() + '</code>';
        if (ageEl) {
            var ageSeconds = (Date.now() - d.getTime()) / 1000;
            var isStale = ageSeconds > 60;
            ageEl.textContent = '(' + formatAge(ageSeconds) + (isStale ? ', stale' : '') + ')';
            ageEl.className = isStale ? 'text-warning' : 'text-muted';
        }

        var diagUpdatedOk = document.getElementById('mqtt-diag-bridge-updated-at');
        var diagAgeOk = document.getElementById('mqtt-diag-bridge-age');
        if (diagUpdatedOk) diagUpdatedOk.textContent = d.toISOString();
        if (diagAgeOk) {
            var ageSeconds2 = (Date.now() - d.getTime()) / 1000;
            var isStale2 = ageSeconds2 > 60;
            diagAgeOk.textContent = formatAge(ageSeconds2) + (isStale2 ? ' (stale)' : '');
        }
    }

    function poll() {
        fetch("{% url 'mqtt_plugin:bridge_status' %}", { credentials: 'same-origin', cache: 'no-store' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                renderBridgeHeartbeat(data && data.last_heartbeat);
                renderBridgeStatus(data && data.status);
                renderBridgeUpdatedAt(data && data.updated_at);
            })
            .catch(function() { /* ignore */ });
    }

    initDebugToggle();
    {% if bridge_last_heartbeat_iso %}
    renderBridgeHeartbeat('{{ bridge_last_heartbeat_iso|escapejs }}');
    {% else %}
    renderBridgeHeartbeat(null);
    {% endif %}
    poll();
    setInterval(poll, 2000);
})();
</script>