{% load static %}

<style>
    .nitro-debug-panel {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .nitro-debug-section {
        margin-bottom: 20px;
    }
    .nitro-debug-section h3 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #333;
        border-bottom: 2px solid #4CAF50;
        padding-bottom: 5px;
    }
    .nitro-debug-empty {
        color: #999;
        font-style: italic;
        padding: 10px;
    }
    .nitro-component-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 12px;
        margin-bottom: 10px;
    }
    .nitro-component-name {
        font-weight: 600;
        color: #4CAF50;
        margin-bottom: 5px;
    }
    .nitro-component-detail {
        font-size: 12px;
        color: #666;
        margin: 3px 0;
    }
    .nitro-component-detail strong {
        color: #333;
    }
    .nitro-state-code {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 8px;
        margin-top: 5px;
        font-family: 'Courier New', monospace;
        font-size: 11px;
        overflow-x: auto;
        max-height: 200px;
        overflow-y: auto;
    }
    .nitro-action-item {
        background: #fff3cd;
        border-left: 3px solid #ffc107;
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .nitro-action-name {
        font-weight: 600;
        color: #856404;
    }
    .nitro-event-item {
        background: #d1ecf1;
        border-left: 3px solid #17a2b8;
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .nitro-event-name {
        font-weight: 600;
        color: #0c5460;
    }
    .nitro-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 600;
        margin-left: 5px;
    }
    .nitro-badge-success {
        background: #d4edda;
        color: #155724;
    }
    .nitro-badge-info {
        background: #d1ecf1;
        color: #0c5460;
    }
    .nitro-badge-warning {
        background: #fff3cd;
        color: #856404;
    }
</style>

<div class="nitro-debug-panel">
    <!-- Components Section -->
    <div class="nitro-debug-section">
        <h3>
            Components Rendered
            <span class="nitro-badge nitro-badge-success">{{ component_count }}</span>
        </h3>

        {% if components %}
            {% for component in components %}
                <div class="nitro-component-card">
                    <div class="nitro-component-name">{{ component.name }}</div>
                    <div class="nitro-component-detail">
                        <strong>Template:</strong> {{ component.template }}
                    </div>
                    <div class="nitro-component-detail">
                        <strong>Secure Fields:</strong>
                        {% if component.secure_fields %}
                            {{ component.secure_fields|join:", " }}
                        {% else %}
                            <em>None</em>
                        {% endif %}
                    </div>
                    <div class="nitro-component-detail">
                        <strong>Smart Updates:</strong>
                        {% if component.smart_updates %}
                            <span class="nitro-badge nitro-badge-success">Enabled</span>
                        {% else %}
                            <span class="nitro-badge nitro-badge-info">Disabled</span>
                        {% endif %}
                    </div>
                    <div class="nitro-component-detail">
                        <strong>State:</strong>
                        <div class="nitro-state-code">{{ component.state|pprint }}</div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="nitro-debug-empty">No components rendered in this request</div>
        {% endif %}
    </div>

    <!-- Actions Section -->
    <div class="nitro-debug-section">
        <h3>
            Action Calls
            <span class="nitro-badge nitro-badge-warning">{{ action_count }}</span>
        </h3>

        {% if actions %}
            {% for action in actions %}
                <div class="nitro-action-item">
                    <div class="nitro-action-name">
                        {{ action.component }}.{{ action.action }}()
                        {% if action.has_file %}
                            <span class="nitro-badge nitro-badge-info">File Upload</span>
                        {% endif %}
                    </div>
                    {% if action.payload %}
                        <div class="nitro-component-detail">
                            <strong>Payload:</strong>
                            <code>{{ action.payload }}</code>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        {% else %}
            <div class="nitro-debug-empty">No actions called in this request</div>
        {% endif %}
    </div>

    <!-- Events Section -->
    <div class="nitro-debug-section">
        <h3>
            Events Emitted
            <span class="nitro-badge nitro-badge-info">{{ event_count }}</span>
        </h3>

        {% if events %}
            {% for event in events %}
                <div class="nitro-event-item">
                    <div class="nitro-event-name">
                        {{ event.event }}
                        <span style="color: #666; font-weight: normal; font-size: 11px;">
                            from {{ event.component }}
                        </span>
                    </div>
                    {% if event.data %}
                        <div class="nitro-component-detail">
                            <strong>Data:</strong>
                            <code>{{ event.data }}</code>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        {% else %}
            <div class="nitro-debug-empty">No events emitted in this request</div>
        {% endif %}
    </div>

    <!-- Summary -->
    <div class="nitro-debug-section">
        <h3>Summary</h3>
        <div class="nitro-component-card">
            <div class="nitro-component-detail">
                ✓ <strong>{{ component_count }}</strong> component{{ component_count|pluralize }} rendered
            </div>
            <div class="nitro-component-detail">
                ⚡ <strong>{{ action_count }}</strong> action{{ action_count|pluralize }} called
            </div>
            <div class="nitro-component-detail">
                📡 <strong>{{ event_count }}</strong> event{{ event_count|pluralize }} emitted
            </div>
        </div>
    </div>
</div>
