{% extends "base.html" %}
{% load static %}

<!-- Template Debug: This template is being processed -->

{% block title %}{{ title }}{% endblock %}

{% block extra_css %}
<style>
    .monitor-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .monitor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding: 12px 15px;
        background: #2d2d2d;
        border-radius: 6px;
        color: #e0e0e0;
    }
    
    .monitor-header h1 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .status-card {
        background: #2d2d2d;
        border-radius: 6px;
        padding: 16px 20px;
        color: #e0e0e0;
    }
    .status-card .status-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #3d3d3d;
    }
    .status-card .status-row:last-child { border-bottom: none; }
</style>
{% endblock %}

{% block content %}
<div class="monitor-container">
    <div class="monitor-header">
        <h1>{{ title }}</h1>
    </div>

    {% if mqtt_config %}
    <div class="status-card">
        <div class="status-row">
            <strong>HMAC</strong>
            {% if mqtt_config.use_hmac %}
                <span class="badge badge-success">Enabled (SHA-256)</span>
            {% else %}
                <span class="badge badge-warning">Disabled</span>
            {% endif %}
        </div>
        <div class="status-row">
            <strong>Authentication</strong>
            {% if mqtt_config.username %}
                <span class="badge badge-info">Username/Password</span>
            {% else %}
                <span class="badge badge-secondary">None</span>
            {% endif %}
        </div>
        <div class="status-row">
            <strong>Connection</strong>
            {% if broker_connected == 'connected' %}
                <span class="badge badge-success">Connected</span>
            {% elif broker_connected == 'disconnected' %}
                <span class="badge badge-danger">Disconnected</span>
            {% else %}
                <span class="badge badge-secondary">Unknown</span>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="alert alert-warning mb-3">
        <h5><i class="fas fa-exclamation-triangle"></i> No MQTT Configuration Found</h5>
        <p>Please configure MQTT settings in the NEMO admin interface.</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<!-- extra_js block removed to avoid duplicate function declarations -->
{% endblock %}