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

{% block content %}
<div class="control-room-container">
    <div class="install-simple-container">
        {# Icon and Title #}
        <div class="install-simple-header">
            <div class="install-simple-icon">
                {% if panel.icon == "database" %}
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <ellipse cx="12" cy="5" rx="9" ry="3"/>
                    <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
                    <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
                </svg>
                {% elif panel.icon == "layers" %}
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <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>
                {% elif panel.icon == "chart" %}
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="20" x2="18" y2="10"/>
                    <line x1="12" y1="20" x2="12" y2="4"/>
                    <line x1="6" y1="20" x2="6" y2="14"/>
                </svg>
                {% elif panel.icon == "link" %}
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                </svg>
                {% else %}
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                    <line x1="3" y1="9" x2="21" y2="9"/>
                    <line x1="9" y1="21" x2="9" y2="9"/>
                </svg>
                {% endif %}
            </div>
            <h1>{{ panel.name }}</h1>
            {% if is_configured %}
            <span class="install-status-badge install-status-installed">Installed</span>
            {% elif is_installed %}
            <span class="install-status-badge install-status-configuring">
                SETUP
                <span class="panel-config-steps">
                    <span class="panel-config-step {% if is_installed %}done{% endif %}"></span>
                    <span class="panel-config-step {% if is_in_installed_apps %}done{% endif %}"></span>
                    <span class="panel-config-step {% if panel_url %}done{% endif %}"></span>
                </span>
            </span>
            {% else %}
            <span class="install-status-badge install-status-not-installed">Not installed</span>
            {% endif %}
            <p class="install-simple-description">{{ panel.description }}</p>
            {% if is_configured and panel_url %}
            <a href="{{ panel_url }}" class="panel-link install-panel-open-btn">Open {{ panel.name }} <span class="arrow">→</span></a>
            {% endif %}
        </div>

        {# Quick Features — only shown for featured panels with known feature sets #}
        {% if panel.id == 'dj_redis_panel' or panel.id == 'dj_cache_panel' or panel.id == 'dj_celery_panel' or panel.id == 'dj_urls_panel' %}
        <div class="install-simple-features">
            {% if panel.id == 'dj_redis_panel' %}
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Real-time connection<br>& memory monitoring</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="m21 21-4.35-4.35"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Browse & search<br>Redis keys</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>View TTL &<br>key details</strong>
                </div>
            </div>
            {% elif panel.id == 'dj_cache_panel' %}
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <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>
                <div class="install-simple-feature-text">
                    <strong>Inspect all cache<br>backends</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="20" x2="18" y2="10"/>
                        <line x1="12" y1="20" x2="12" y2="4"/>
                        <line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Monitor hit/miss<br>ratios</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="3 6 5 6 21 6"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Clear cache<br>entries</strong>
                </div>
            </div>
            {% elif panel.id == 'dj_celery_panel' %}
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
                        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Monitor active<br>workers</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="20" x2="18" y2="10"/>
                        <line x1="12" y1="20" x2="12" y2="4"/>
                        <line x1="6" y1="20" x2="6" y2="14"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Track task<br>queue depths</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Inspect task<br>history & results</strong>
                </div>
            </div>
            {% elif panel.id == 'dj_urls_panel' %}
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Browse all URL<br>patterns</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="m21 21-4.35-4.35"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>Search by path<br>or name</strong>
                </div>
            </div>
            <div class="install-simple-feature">
                <div class="install-simple-feature-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14 2 14 8 20 8"/>
                        <line x1="12" y1="18" x2="12" y2="12"/>
                        <line x1="9" y1="15" x2="15" y2="15"/>
                    </svg>
                </div>
                <div class="install-simple-feature-text">
                    <strong>View parameters<br>& patterns</strong>
                </div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {# Installation Steps #}
        <div class="install-simple-steps">
            <div class="install-simple-step-card {% if is_installed %}step-card-done{% endif %}">
                <div class="install-simple-step">
                    <div class="install-simple-step-number {% if is_installed %}step-done{% endif %}">{% if is_installed %}<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>{% else %}1{% endif %}</div>
                    <div class="install-simple-step-content">
                        <h3>Install the package</h3>
                        <div class="install-simple-code">
                            <code>pip install {{ panel.package }}</code>
                            <button class="install-simple-copy" onclick="copyToClipboard(this, 'pip install {{ panel.package }}')">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="install-simple-step-card {% if is_in_installed_apps %}step-card-done{% endif %}">
                <div class="install-simple-step">
                    <div class="install-simple-step-number {% if is_in_installed_apps %}step-done{% endif %}">{% if is_in_installed_apps %}<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>{% else %}2{% endif %}</div>
                    <div class="install-simple-step-content">
                        <h3>Add to INSTALLED_APPS</h3>
                        <div class="install-simple-code">
                            <code>INSTALLED_APPS = [<br>&nbsp;&nbsp;&nbsp;&nbsp;# ...<br>&nbsp;&nbsp;&nbsp;&nbsp;"{{ panel_app_name }}",<br>]</code>
                            <button class="install-simple-copy" onclick="copyToClipboard(this, 'INSTALLED_APPS = [\n    # ...\n    &quot;{{ panel_app_name }}&quot;,\n]')">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="install-simple-step-card {% if panel_url %}step-card-done{% endif %}">
                <div class="install-simple-step">
                    <div class="install-simple-step-number {% if panel_url %}step-done{% endif %}">{% if panel_url %}<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>{% else %}3{% endif %}</div>
                    <div class="install-simple-step-content">
                        <h3>Add URLs to urls.py</h3>
                        <div class="install-simple-code">
                            <code>urlpatterns = [<br>&nbsp;&nbsp;&nbsp;&nbsp;# ...<br>&nbsp;&nbsp;&nbsp;&nbsp;path("{{ panel_url_prefix }}/", include("{{ panel_app_name }}.urls")),<br>]</code>
                            <button class="install-simple-copy" onclick="copyToClipboard(this, 'urlpatterns = [\n    # ...\n    path(&quot;{{ panel_url_prefix }}/&quot;, include(&quot;{{ panel_app_name }}.urls&quot;)),\n]')">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="install-simple-step-card {% if is_configured %}step-card-done{% endif %}">
                <div class="install-simple-step">
                    <div class="install-simple-step-number {% if is_configured %}step-done{% endif %}">{% if is_configured %}<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>{% else %}4{% endif %}</div>
                    <div class="install-simple-step-content">
                        <h3>Restart &amp; visit the admin</h3>
                        <p>Restart your Django server and navigate to the Control Room in your admin. The {{ panel.name }} will appear automatically.</p>
                    </div>
                </div>
            </div>
        </div>

        {# Documentation Link #}
        {% if panel.docs_url %}
        <div class="install-simple-docs">
            <a href="{{ panel.docs_url }}" target="_blank" rel="noopener">
                View full documentation →
            </a>
        </div>
        {% endif %}
    </div>

    <script>
    function copyToClipboard(button, text) {
        // Decode HTML entities
        var textarea = document.createElement('textarea');
        textarea.innerHTML = text;
        var decodedText = textarea.value;
        
        navigator.clipboard.writeText(decodedText).then(function() {
            // Change button appearance
            button.classList.add('copied');
            button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>';
            
            // Reset after 2 seconds
            setTimeout(function() {
                button.classList.remove('copied');
                button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
            }, 2000);
        });
    }
    </script>
</div>
{% endblock %}