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

{% block panel_content %}

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon dcr-icon-color--indigo">
      {% dcr_icon "radio" %}
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">{% trans "Dj Signals Panel" %}</h1>
      </div>
      <p class="dcr-page-header__subtitle">
        {% trans "Monitor and debug Django signals and their connected receivers." %}
      </p>
    </div>
  </div>
</div>

<div class="dcr-metric-grid">
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "Total Signals" %}</span>
    <span class="dcr-metric__value">{{ stats.total_signals }}</span>
  </div>
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "Total Receivers" %}</span>
    <span class="dcr-metric__value">{{ stats.total_receivers }}</span>
  </div>
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "No Receivers" %}</span>
    <span class="dcr-metric__value{% if stats.signals_without_receivers %} dcr-metric__value--warning{% endif %}">
      {{ stats.signals_without_receivers }}
    </span>
  </div>
</div>

<div class="dcr-data-table">

  <div class="dcr-data-table__header">
    <div class="dcr-data-table__header-info">
      <h3 class="dcr-data-table__title">
        {% trans "Signals" %}
        <span class="dcr-badge">{{ total_displayed }} {% trans "SHOWN" %}</span>
      </h3>
      <p class="dcr-data-table__subtitle">
        {% trans "Every signal discovered across Django built-ins and installed apps." %}
      </p>
    </div>
    {% if search_query or app_filter %}
    <div class="dcr-data-table__meta">
      <a href="{% url 'dj_signals_panel:index' %}" class="dcr-btn dcr-btn--ghost dcr-btn--sm">
        <svg class="dcr-btn__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        {% trans "CLEAR" %}
      </a>
    </div>
    {% endif %}
  </div>

  <div class="dcr-data-table__controls">
    <form class="dcr-form" method="get">
      <div class="dcr-form__group">
        <label class="dcr-form__label" for="searchbar">{% trans "Search signals" %}</label>
        <div class="dcr-form__row--stretch">
          <div class="dcr-input-group">
            <svg class="dcr-input-group__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <input
              type="text"
              id="searchbar"
              name="q"
              value="{{ search_query }}"
              class="dcr-input-group__input"
              placeholder="{% trans 'Search by name, module, or app...' %}"
            >
          </div>
          <button type="submit" class="dcr-btn dcr-btn--primary">{% trans "Search" %}</button>
        </div>
      </div>
      <div class="dcr-form__row">
        <div class="dcr-field">
          <label class="dcr-field__label" for="app_filter">&#9663; {% trans "App" %}</label>
          <select name="app" id="app_filter" class="dcr-select">
            <option value="">{% trans "All apps" %}</option>
            {% for app in signal_apps %}
            <option value="{{ app }}" {% if app_filter == app %}selected{% endif %}>
              {{ app }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>
    </form>
  </div>

  {% if signals %}
  <div class="dcr-data-table__scroll">
    <table>
      <thead>
        <tr>
          <th>{% trans "Signal" %}</th>
          <th>{% trans "Module" %}</th>
          <th>{% trans "App" %}</th>
          <th class="dcr-col--right">{% trans "Receivers" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for sig in signals %}
        <tr>
          <td>
            <a href="{% url 'dj_signals_panel:signal_detail' sig.signal_id %}" class="dcr-data-table__link">{{ sig.name }}</a>
          </td>
          <td>
            <code class="dcr-code">{{ sig.module }}</code>
          </td>
          <td>
            <a href="?app={{ sig.app_label|urlencode }}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="dcr-panel-card__link">
              <span class="{{ sig.app_label|dj_signals_panel_badge_variant }}">{{ sig.app_label }}</span>
            </a>
          </td>
          <td class="dcr-col--right">
            {% if sig.has_issues %}
            <span class="dcr-text-muted">0</span>
            {% else %}
            <strong>{{ sig.receiver_count }}</strong>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="dcr-empty">
    <h2 class="dcr-empty__title">{% trans "No signals found" %}</h2>
    <p class="dcr-empty__body">
      {% if search_query or app_filter %}
        {% trans "No signals match your search criteria." %}
      {% else %}
        {% trans "No signals were discovered in this project." %}
      {% endif %}
    </p>
  </div>
  {% endif %}
</div>

{% endblock %}