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

{% block panel_content %}
<div class="dcr-content dcr-content--md">

{# Page header — icon, name, status badge, description, open button #}
<div class="dcr-page-header">
  <div class="dcr-page-header__main">
    <div class="dcr-page-header__icon{% if panel.icon_color %} dcr-icon-color--{{ panel.icon_color }}{% endif %}">
      {% dcr_icon panel.icon %}
    </div>
    <div class="dcr-page-header__body">
      <div class="dcr-page-header__title-row">
        <h1 class="dcr-page-header__title">{{ panel.name }}</h1>
        {% if is_configured %}
        <span class="dcr-badge dcr-badge--success">{% trans "INSTALLED" %}</span>
        {% elif is_installed %}
        <span class="dcr-badge dcr-badge--warning">{% trans "SETUP" %}</span>
        {% else %}
        <span class="dcr-badge dcr-badge--muted">{% trans "NOT INSTALLED" %}</span>
        {% endif %}
      </div>
      <p class="dcr-page-header__subtitle">{{ panel.description }}</p>
    </div>
  </div>
  {% if is_configured and panel_url %}
  <div class="dcr-page-header__actions">
    <a href="{{ panel_url }}" class="dcr-btn dcr-btn--primary">{% trans "Open panel" %} →</a>
  </div>
  {% endif %}
</div>

{# Features — only shown when panel metadata includes a features list #}
{% if panel.features %}
<div class="dcr-section-header dcr-mt-lg">
  <h3 class="dcr-section-header__title">{% trans "What's included" %}</h3>
</div>
<div class="dcr-d-flex dcr-flex-col dcr-gap-xs">
  {% for feature in panel.features %}
  <div class="dcr-d-flex dcr-items-baseline dcr-gap-sm dcr-text-md">
    {% include "admin/dj_control_room/partials/icon_check.html" with stroke="var(--dcr-color-success)" stroke_width="2.5" svg_class="dcr-flex-none dcr-feature-icon" %}
    <span>{{ feature }}</span>
  </div>
  {% endfor %}
</div>
{% endif %}

{# Installation steps #}
<div class="dcr-section-header dcr-mt-lg">
  <h3 class="dcr-section-header__title">{% trans "Installation" %}</h3>
</div>

<div class="dcr-card">
<div class="dcr-card__body">
<ol class="dcr-steps">

  {# Step 1 — pip install #}
  <li class="dcr-steps__step{% if is_installed %} dcr-steps__step--done{% endif %}">
    <div class="dcr-steps__indicator">
      {% if is_installed %}{% include "admin/dj_control_room/partials/icon_check.html" %}{% else %}1{% endif %}
    </div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">{% trans "Install the package" %}</h4>
      <div class="dcr-steps__content">
        <span class="dcr-d-block dcr-text-base dcr-text-muted dcr-mb-sm">{% trans "Add the panel to your project via pip." %}</span>
        <code class="dcr-code dcr-code--block dcr-code--copyable">pip install {{ panel.package }}<button class="dcr-btn dcr-btn--ghost dcr-btn--sm dcr-copy-btn dcr-copy-btn--center"
                data-copy="pip install {{ panel.package }}"
                title="{% trans 'Copy' %}">{% include "admin/dj_control_room/partials/icon_copy.html" %}</button></code>
      </div>
    </div>
  </li>

  {# Step 2 — INSTALLED_APPS #}
  <li class="dcr-steps__step{% if is_in_installed_apps %} dcr-steps__step--done{% endif %}">
    <div class="dcr-steps__indicator">
      {% if is_in_installed_apps %}{% include "admin/dj_control_room/partials/icon_check.html" %}{% else %}2{% endif %}
    </div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">{% trans "Add to INSTALLED_APPS" %}</h4>
      <div class="dcr-steps__content">
        <span class="dcr-d-block dcr-text-base dcr-text-muted dcr-mb-sm">{% trans "Register the app in your Django settings." %}</span>
        <code class="dcr-code dcr-code--block dcr-code--copyable">INSTALLED_APPS = [
    # ...
    "{{ panel_app_name }}",
]<button class="dcr-btn dcr-btn--ghost dcr-btn--sm dcr-copy-btn dcr-copy-btn--top"
                data-copy='INSTALLED_APPS = [&#10;    # ...&#10;    "{{ panel_app_name }}",&#10;]'
                title="{% trans 'Copy' %}">{% include "admin/dj_control_room/partials/icon_copy.html" %}</button></code>
      </div>
    </div>
  </li>

  {# Step 3 — URLs #}
  <li class="dcr-steps__step{% if panel_url %} dcr-steps__step--done{% endif %}">
    <div class="dcr-steps__indicator">
      {% if panel_url %}{% include "admin/dj_control_room/partials/icon_check.html" %}{% else %}3{% endif %}
    </div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">{% trans "Add URLs to urls.py" %}</h4>
      <div class="dcr-steps__content">
        <span class="dcr-d-block dcr-text-base dcr-text-muted dcr-mb-sm">{% trans "Wire up the panel's URL routes." %}</span>
        <code class="dcr-code dcr-code--block dcr-code--copyable">urlpatterns = [
    # ...
    path("{{ panel_url_prefix }}/", include("{{ panel_app_name }}.urls")),
]<button class="dcr-btn dcr-btn--ghost dcr-btn--sm dcr-copy-btn dcr-copy-btn--top"
                data-copy='urlpatterns = [&#10;    # ...&#10;    path("{{ panel_url_prefix }}/", include("{{ panel_app_name }}.urls")),&#10;]'
                title="{% trans 'Copy' %}">{% include "admin/dj_control_room/partials/icon_copy.html" %}</button></code>
      </div>
    </div>
  </li>

  {# Step 4 — Restart #}
  <li class="dcr-steps__step{% if is_configured %} dcr-steps__step--done{% endif %}">
    <div class="dcr-steps__indicator">
      {% if is_configured %}{% include "admin/dj_control_room/partials/icon_check.html" %}{% else %}4{% endif %}
    </div>
    <div class="dcr-steps__body">
      <h4 class="dcr-steps__title">{% trans "Restart & visit the admin" %}</h4>
      <div class="dcr-steps__content">
        <p class="dcr-text-base dcr-text-muted">{% blocktrans with name=panel.name %}Restart your Django server and navigate to the Control Room. {{ name }} will appear automatically.{% endblocktrans %}</p>
      </div>
    </div>
  </li>

</ol>
</div>
</div>

{% if panel.docs_url %}
<div class="dcr-mt-lg dcr-d-flex dcr-justify-end">
  <a href="{{ panel.docs_url }}" class="dcr-panel-card__link" target="_blank" rel="noopener noreferrer">
    {% trans "View full documentation" %} ↗
  </a>
</div>
{% endif %}

</div>

{% block panel_scripts %}
<script>
document.querySelectorAll('.dcr-copy-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var text = btn.getAttribute('data-copy')
      .replace(/&#10;/g, '\n')
      .replace(/&quot;/g, '"');
    navigator.clipboard.writeText(text).then(function() {
      var orig = btn.innerHTML;
      btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
      setTimeout(function() { btn.innerHTML = orig; }, 2000);
    });
  });
});
</script>
{% endblock %}
{% endblock panel_content %}