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

{% block panel_content %}

<div class="dcr-content dcr-content--xl">

{# ------------------------------------------------------------------ #}
{# Page header                                                         #}
{# ------------------------------------------------------------------ #}
<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon dcr-icon-color--success-solid">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" style="width:28px;height:13px" aria-hidden="true">
        <text x="15" y="11" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="11" font-weight="800" fill="white" letter-spacing="0">DCR</text>
      </svg>
    </div>
    <div class="dcr-page-header__body">
      <h1 class="dcr-page-header__title">{% trans "Django Control Room" %}</h1>
      <p class="dcr-page-header__subtitle">{% trans "Select a panel to view monitoring tools." %}</p>
    </div>
  </div>
</div>

{# ------------------------------------------------------------------ #}
{# Featured panels                                                     #}
{# ------------------------------------------------------------------ #}
<div class="dcr-section-header">
  <h3 class="dcr-section-header__title">{% trans "Featured Panels" %}</h3>
</div>

<div class="dcr-panel-grid">
  {% for panel in featured_panels %}
  <div class="dcr-panel-card{% if panel.coming_soon %} dcr-panel-card--coming-soon{% endif %}">
    <div class="dcr-panel-card__top">

      <div class="dcr-panel-card__icon-wrap{% if panel.icon_color %} dcr-icon-color--{{ panel.icon_color }}{% endif %}">
        {% dcr_icon panel.icon "dcr-panel-card__icon" %}
      </div>

      {% if panel.configured %}
      <span class="dcr-badge dcr-badge--success">{% trans "INSTALLED" %}</span>
      {% elif panel.installed %}
      <span class="dcr-badge dcr-badge--warning">{% trans "SETUP" %}</span>
      {% elif panel.coming_soon %}
      <span class="dcr-badge dcr-badge--warning">{% trans "COMING SOON" %}</span>
      {% else %}
      <span class="dcr-badge dcr-badge--muted">{% trans "NOT INSTALLED" %}</span>
      {% endif %}

    </div>

    <h3 class="dcr-panel-card__title">{{ panel.name }}</h3>
    <p class="dcr-panel-card__desc">{{ panel.description }}</p>

    <div class="dcr-panel-card__footer">
      {% if panel.configured %}
      <a href="{{ panel.url }}" class="dcr-panel-card__link">{% trans "View panel" %}</a>
      {% elif panel.installed %}
      <a href="{{ panel.url }}" class="dcr-panel-card__link">{% trans "Configure" %}</a>
      {% elif panel.coming_soon %}
      <span class="dcr-panel-card__link dcr-panel-card__link--muted">{% trans "Coming soon" %}</span>
      {% else %}
      <a href="{{ panel.url }}" class="dcr-panel-card__link">{% trans "Install panel" %}</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>

{# ------------------------------------------------------------------ #}
{# Community panels                                                    #}
{# ------------------------------------------------------------------ #}
{% if has_community_panels %}
<div class="dcr-section-header dcr-mt-lg">
  <h3 class="dcr-section-header__title">{% trans "Community Panels" %}</h3>
</div>

<div class="dcr-panel-grid">
  {% for panel in community_panels %}
  <div class="dcr-panel-card">
    <div class="dcr-panel-card__top">
      <div class="dcr-panel-card__icon-wrap{% if panel.icon_color %} dcr-icon-color--{{ panel.icon_color }}{% else %} dcr-icon-color--purple{% endif %}">
        {% dcr_icon panel.icon "dcr-panel-card__icon" %}
      </div>
      {% if panel.configured %}
      <span class="dcr-badge dcr-badge--success">{% trans "INSTALLED" %}</span>
      {% else %}
      <span class="dcr-badge dcr-badge--muted">{% trans "NOT INSTALLED" %}</span>
      {% endif %}
    </div>
    <h3 class="dcr-panel-card__title">{{ panel.name }}</h3>
    <p class="dcr-panel-card__desc">{{ panel.description }}</p>
    <div class="dcr-panel-card__footer">
      {% if panel.configured %}
      <a href="{{ panel.url }}" class="dcr-panel-card__link">{% trans "View panel" %}</a>
      {% else %}
      <a href="{{ panel.url }}" class="dcr-panel-card__link">{% trans "Configure" %}</a>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ------------------------------------------------------------------ #}
{# Footer — More panels / Build your own / Framework                   #}
{# ------------------------------------------------------------------ #}
<div class="dcr-split-card dcr-mt-lg">

  <div class="dcr-split-card__section">
    <div class="dcr-panel-card__icon-wrap dcr-panel-card__icon-wrap--info">
      <svg class="dcr-panel-card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
      </svg>
    </div>
    <h3 class="dcr-split-card__title">{% trans "More panels on the way" %}</h3>
    <p class="dcr-split-card__desc">{% trans "We're building more tools to bring full observability to your Django admin. Follow our progress on GitHub." %}</p>
    <div class="dcr-split-card__footer">
      <a href="https://github.com/yassi/dj-control-room" class="dcr-panel-card__link" target="_blank" rel="noopener noreferrer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
        {% trans "GitHub" %}
      </a>
    </div>
  </div>

  <div class="dcr-split-card__section">
    <div class="dcr-panel-card__icon-wrap dcr-panel-card__icon-wrap--indigo">
      <svg class="dcr-panel-card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
        <polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>
      </svg>
    </div>
    <h3 class="dcr-split-card__title">{% trans "Build your own panel" %}</h3>
    <p class="dcr-split-card__desc">{% trans "Django Control Room is built to be extended. Use our cookiecutter template to scaffold a fully structured panel plugin in seconds." %}</p>
    <div class="dcr-split-card__footer">
      <a href="https://github.com/yassi/cookiecutter-django-admin-panel" class="dcr-panel-card__link" target="_blank" rel="noopener noreferrer">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
        {% trans "cookiecutter-django-admin-panel" %}
      </a>
    </div>
  </div>

</div>

{% if core_panel %}
<div class="dcr-split-card dcr-mt-sm">
  <div class="dcr-split-card__section dcr-flex-row dcr-items-center dcr-gap-sm">
    <span class="dcr-text-xs dcr-text-muted dcr-text-uppercase dcr-font-semibold" style="letter-spacing:.05em">{% trans "Framework" %}</span>
    <span class="dcr-text-sm dcr-font-semibold">{{ core_panel.name }}</span>
    <span class="dcr-text-muted">—</span>
    <span class="dcr-text-sm dcr-text-muted">{{ core_panel.description }}</span>
    {% if core_panel.configured %}
    <a href="{{ core_panel.url }}" class="dcr-panel-card__link dcr-ml-auto">{% trans "Design system" %} →</a>
    {% elif core_panel.docs_url %}
    <a href="{{ core_panel.docs_url }}" class="dcr-panel-card__link dcr-ml-auto" target="_blank" rel="noopener noreferrer">{% trans "Docs" %} ↗</a>
    {% endif %}
  </div>
</div>
{% endif %}

{% endblock %}

</div>