{% extends "admin/dj_signals_panel/base.html" %}
{% load i18n admin_urls static dj_signals_panel_tags %}

{% block extrahead %}
{{ block.super }}
{% if dj_cr_show_source %}
<link rel="stylesheet" href="{% static 'dj_signals_panel/vendor/highlight-github-dark.min.css' %}">
<script src="{% static 'dj_signals_panel/vendor/highlight.min.js' %}"></script>
<script src="{% static 'dj_signals_panel/vendor/highlight-python.min.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('details.source-preview-details').forEach(function (details) {
        details.addEventListener('toggle', function () {
            if (details.open) {
                details.querySelectorAll('pre.source-preview code').forEach(function (el) {
                    if (!el.dataset.highlighted) {
                        hljs.highlightElement(el);
                    }
                });
            }
        });
    });
});
</script>
{% endif %}
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; <a href="{% url 'dj_signals_panel:index' %}">{% trans 'Dj Signals Panel' %}</a>
    &rsaquo; {{ signal.name }}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
    <!-- Back to List Link -->
    <div style="margin-bottom: 20px;">
        <a href="{% url 'dj_signals_panel:index' %}" style="color: var(--link-fg, #417690); text-decoration: none;">
            ← {% trans "Back to Signal List" %}
        </a>
    </div>

    <!-- Signal Metadata Card -->
    <div class="module signal-detail-card">
        <h2>{{ signal.name }}</h2>
        <table class="key-value-table">
            <tbody>
                <tr>
                    <th>{% trans "Signal ID" %}</th>
                    <td><code>{{ signal.signal_id }}</code></td>
                </tr>
                <tr>
                    <th>{% trans "Module" %}</th>
                    <td><code>{{ signal.module }}</code></td>
                </tr>
                <tr>
                    <th>{% trans "App" %}</th>
                    <td><span class="{{ signal.app_label|dj_signals_panel_add_badge_class }}">{{ signal.app_label }}</span></td>
                </tr>
                {% if signal.providing_args %}
                <tr>
                    <th>{% trans "Providing Args" %}</th>
                    <td>
                        {% for arg in signal.providing_args %}
                            <code class="providing-arg">{{ arg }}</code>
                        {% endfor %}
                    </td>
                </tr>
                {% endif %}
                <tr>
                    <th>{% trans "Receiver Count" %}</th>
                    <td>
                        <span class="receiver-count">
                            {{ receivers|length }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Receivers Table -->
    <div class="module" style="margin-top: 20px;">
        <h2>{% trans "Connected Receivers" %}</h2>
        {% if receivers %}
        <table id="result_list">
            <thead>
                <tr>
                    <th scope="col">
                        <div class="text">{% trans "Function" %}</div>
                    </th>
                    <th scope="col">
                        <div class="text">{% trans "Module" %}</div>
                    </th>
                    <th scope="col">
                        <div class="text">{% trans "Location" %}</div>
                    </th>
                    <th scope="col">
                        <div class="text">{% trans "Sender" %}</div>
                    </th>
                    <th scope="col">
                        <div class="text">{% trans "Dispatch UID" %}</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                {% for r in receivers %}
                <tr class="{% cycle 'row1' 'row2' %}">
                    <td>
                        <code class="receiver-name">{{ r.qualname|default:r.function_name }}</code>
                    </td>
                    <td>
                        <code class="module-path">{{ r.module }}</code>
                    </td>
                    <td>
                        {% if r.source_file %}
                            <code class="source-location">{{ r.source_file }}:{{ r.source_line|default:"?" }}</code>
                        {% else %}
                            <span class="muted">{% trans "unknown" %}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if r.sender %}
                            <code>{{ r.sender }}</code>
                        {% else %}
                            <span class="muted">{% trans "any" %}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if r.dispatch_uid %}
                            <code>{{ r.dispatch_uid }}</code>
                        {% else %}
                            <span class="muted">—</span>
                        {% endif %}
                    </td>
                </tr>
                {% if r.source_preview %}
                <tr class="source-preview-row">
                    <td colspan="5">
                        <details class="source-preview-details">
                            <summary>{% trans "View Source" %}</summary>
                            <pre class="source-preview"><code class="language-python">{{ r.source_preview }}</code></pre>
                        </details>
                    </td>
                </tr>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="paginator">
            {% trans "No receivers are connected to this signal." %}
        </p>
        {% endif %}
    </div>
</div>
{% endblock %}