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

{% block panel_content %}

<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon dcr-icon-color--info">
      {% dcr_icon "link" %}
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">{% trans "Dj Urls Panel" %}</h1>
      </div>
      <p class="dcr-page-header__subtitle">
        {% trans "Inspect and search your project's URL patterns." %}
      </p>
    </div>
  </div>
</div>

<div class="dcr-metric-grid">
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "Total URLs" %}</span>
    <span class="dcr-metric__value">{{ stats.total_urls }}</span>
  </div>
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "Named URLs" %}</span>
    <span class="dcr-metric__value dcr-metric__value--success">{{ stats.named_urls }}</span>
  </div>
  <div class="dcr-metric">
    <span class="dcr-metric__label">{% trans "Namespaces" %}</span>
    <span class="dcr-metric__value">{{ stats.namespaces }}</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 "URLs" %}
        <span class="dcr-badge">{{ total_displayed }} {% trans "SHOWN" %}</span>
      </h3>
      <p class="dcr-data-table__subtitle">
        {% trans "Every URL pattern registered across your project's URLconf." %}
      </p>
    </div>
    {% if search_query or namespace_filter %}
    <div class="dcr-data-table__meta">
      <a href="{% url 'dj_urls_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 URLs" %}</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 pattern, name, or view...' %}"
            >
          </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="namespace_filter">&#9663; {% trans "Namespace" %}</label>
          <select name="namespace" id="namespace_filter" class="dcr-select">
            <option value="">{% trans "All" %}</option>
            {% if has_root_urls %}
            <option value="_root" {% if namespace_filter == "_root" %}selected{% endif %}>
              {% trans "Root (no namespace)" %}
            </option>
            {% endif %}
            {% for ns in available_namespaces %}
            <option value="{{ ns }}" {% if namespace_filter == ns %}selected{% endif %}>
              {{ ns }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>
    </form>
  </div>

  {% if urls %}
  <div class="dcr-data-table__scroll">
    <table>
      <thead>
        <tr>
          <th>{% trans "Pattern" %}</th>
          <th>{% trans "Namespace" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for url in urls %}
        <tr>
          <td>
            <a href="{% url 'dj_urls_panel:url_detail' url.pattern|urlencode %}" class="dcr-data-table__link">
              <code class="dcr-code">{{ url.pattern }}</code>
            </a>
            {% if url.name %}
            <span class="dcr-text-xs dcr-text-muted">({{ url.name }})</span>
            {% endif %}
          </td>
          <td>
            {% if url.namespace %}
            <a href="?namespace={{ url.namespace|urlencode }}{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="dcr-panel-card__link">
              <span class="dcr-badge dcr-badge--indigo">{{ url.namespace }}</span>
            </a>
            {% else %}
            <a href="?namespace=_root{% if search_query %}&q={{ search_query|urlencode }}{% endif %}" class="dcr-panel-card__link dcr-panel-card__link--muted">
              <span class="dcr-text-muted">{% trans "root" %}</span>
            </a>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="dcr-empty">
    <h2 class="dcr-empty__title">{% trans "No URLs found" %}</h2>
    <p class="dcr-empty__body">
      {% if search_query or namespace_filter %}
        {% trans "No URLs match your search criteria." %}
      {% else %}
        {% trans "No URLs were discovered in this project." %}
      {% endif %}
    </p>
  </div>
  {% endif %}
</div>

{% endblock %}