{# ===== Plugin Hero Header ===== #}
<div class="fp-plugin-hero mb-3">
    <div class="fp-plugin-hero-inner">
        <div class="fp-plugin-icon-wrap">
            <i class="{{ widget.plugin_data.get('module_menu_icon', 'ti ti-cube') }}"></i>
        </div>
        <div class="fp-plugin-hero-body">
            <div class="fp-plugin-hero-title-row">
                <h2 class="fp-plugin-name">{{ widget.plugin_data.get('display_name', widget.plugin_data.get('module_name', 'Unknown')) }}</h2>
                {{ widget.plugin_data.get('status_html', '') | safe }}
                {% if widget.plugin_data.get('have_update', False) %}
                    <span class="fp-update-badge">
                        <i class="ti ti-arrow-up"></i>Update available
                    </span>
                {% endif %}
            </div>
            <div class="fp-plugin-hero-meta">
                <span class="fp-meta-chip fp-meta-chip--mono">{{ widget.plugin_data.get('module_name', 'N/A') }}</span>
                <span class="fp-meta-sep">/</span>
                <span class="fp-meta-chip fp-meta-chip--blue">v{{ widget.plugin_data.get('module_version', 'N/A') }}</span>
                <span class="fp-meta-sep">/</span>
                <span class="fp-meta-chip fp-meta-chip--dim">{{ widget.plugin_data.get('module_type', 'N/A') }}</span>
            </div>
        </div>
        {% if widget.plugin_data.get('url') and widget.plugin_data.get('url') != '#' %}
        <div class="fp-plugin-hero-action">
            <a href="{{ widget.plugin_data.get('url') }}" class="fp-open-btn">
                <i class="ti ti-external-link"></i>
                <span>Open Module</span>
            </a>
        </div>
        {% endif %}
    </div>

    {# Status strip #}
    <div class="fp-status-strip">
        <div class="fp-status-item {% if widget.plugin_data.get('initialized', False) %}fp-status-item--on{% endif %}">
            <span class="fp-status-dot"></span>
            <span class="fp-status-label">Initialized</span>
        </div>
        <div class="fp-status-sep"></div>
        <div class="fp-status-item {% if widget.plugin_data.get('loaded', False) %}fp-status-item--on{% endif %}">
            <span class="fp-status-dot"></span>
            <span class="fp-status-label">Loaded</span>
        </div>
        <div class="fp-status-sep"></div>
        <div class="fp-status-item {% if widget.plugin_data.get('enabled', False) %}fp-status-item--on{% endif %}">
            <span class="fp-status-dot"></span>
            <span class="fp-status-label">Enabled</span>
        </div>
        <div class="fp-status-sep"></div>
        <div class="fp-status-item {% if widget.plugin_data.get('git_available', False) %}fp-status-item--on{% else %}fp-status-item--off{% endif %}">
            <span class="fp-status-dot"></span>
            <span class="fp-status-label">Git</span>
        </div>
    </div>
</div>

{# ===== Info Row: Basic Information + Paths ===== #}
<div class="row g-3 mb-3">
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="ti ti-info-circle text-primary me-2"></i>Basic Information
                </h4>
            </div>
            <div class="card-body p-0">
                <table class="fp-meta-table">
                    <tbody>
                        <tr>
                            <td class="fp-meta-key">Module Name</td>
                            <td class="fp-meta-val"><code>{{ widget.plugin_data.get('module_name', 'N/A') }}</code></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Display Name</td>
                            <td class="fp-meta-val">{{ widget.plugin_data.get('display_name', 'N/A') }}</td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Version</td>
                            <td class="fp-meta-val"><span class="fp-meta-chip fp-meta-chip--blue">v{{ widget.plugin_data.get('module_version', 'N/A') }}</span></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Module Type</td>
                            <td class="fp-meta-val"><span class="fp-meta-chip fp-meta-chip--dim">{{ widget.plugin_data.get('module_type', 'N/A') }}</span></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Menu Type</td>
                            <td class="fp-meta-val"><code>{{ widget.plugin_data.get('module_menu_type', 'N/A') }}</code></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Status</td>
                            <td class="fp-meta-val">{{ widget.plugin_data.get('status_html', 'N/A') | safe }}</td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Capabilities</td>
                            <td class="fp-meta-val">
                                {% set caps = widget.plugin_data.get('capabilities', []) %}
                                {% if caps %}
                                <div class="d-flex gap-1 flex-wrap">
                                    {% for cap in caps %}
                                    <a href="{{ url_for('list_capabilities') }}" class="fp-meta-chip fp-meta-chip--green text-decoration-none">
                                        <i class="ti ti-plug-connected me-1"></i>{{ cap }}
                                    </a>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <span class="fp-meta-none">—</span>
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="ti ti-folder text-warning me-2"></i>Paths
                </h4>
            </div>
            <div class="card-body p-0">
                <table class="fp-meta-table">
                    <tbody>
                        <tr>
                            <td class="fp-meta-key">Module Path</td>
                            <td class="fp-meta-val"><code class="fp-path-code">{{ widget.plugin_data.get('module_path') or 'N/A' }}</code></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Templates Dir</td>
                            <td class="fp-meta-val"><code class="fp-path-code">{{ widget.plugin_data.get('templates_dir') or 'N/A' }}</code></td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">requirements.txt</td>
                            <td class="fp-meta-val">
                                {% if widget.plugin_data.get('requirements_exists', False) %}
                                    <span class="fp-file-chip fp-file-chip--found"><i class="ti ti-check"></i>Found</span>
                                {% else %}
                                    <span class="fp-file-chip fp-file-chip--missing">Not found</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">pyproject.toml</td>
                            <td class="fp-meta-val">
                                {% if widget.plugin_data.get('pyproject_exists', False) %}
                                    <span class="fp-file-chip fp-file-chip--found"><i class="ti ti-check"></i>Found</span>
                                {% else %}
                                    <span class="fp-file-chip fp-file-chip--missing">Not found</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td class="fp-meta-key">Dep Files</td>
                            <td class="fp-meta-val">
                                <div class="d-flex gap-1 flex-wrap">
                                    {% if widget.plugin_data.get('requirements_exists', False) %}
                                        <span class="fp-meta-chip fp-meta-chip--blue">requirements.txt</span>
                                    {% endif %}
                                    {% if widget.plugin_data.get('pyproject_exists', False) %}
                                        <span class="fp-meta-chip fp-meta-chip--dim">pyproject.toml</span>
                                    {% endif %}
                                    {% if not widget.plugin_data.get('requirements_exists', False) and not widget.plugin_data.get('pyproject_exists', False) %}
                                        <span class="fp-meta-none">—</span>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{# ===== Dependencies + Errors/Warnings Row ===== #}
<div class="row g-3 mb-3">
    <div class="col-12 {% if widget.plugin_data.get('error') or widget.plugin_data.get('warning') %}col-lg-6{% endif %}">
        <div class="card h-100">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="ti ti-packages text-primary me-2"></i>Dependencies
                </h4>
            </div>
            <div class="card-body">
                {% if widget.plugin_data.get('depends_on') %}
                <div class="fp-dep-section">
                    <div class="fp-dep-label">Module Dependencies</div>
                    <div class="fp-dep-chips">
                        {% for k, v in widget.plugin_data.get('depends_on', {}).items() %}
                            <span class="fp-dep-chip fp-dep-chip--module">
                                <i class="ti ti-link"></i>{{ k }}<span class="fp-dep-ver">{{ v }}</span>
                            </span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# ── Optional Module Dependencies ── #}
                {% set opt_deps = widget.plugin_data.get('optional_depends_on', {}) %}
                {% set opt_status = widget.plugin_data.get('optional_dependency_status', {}) %}
                {% if opt_deps %}
                <div class="fp-dep-section">
                    <div class="fp-dep-label">Optional Dependencies</div>
                    <div class="fp-dep-chips">
                        {% for dep_name, constraint in opt_deps.items() %}
                            {% set status = opt_status.get(dep_name, {}).get('status', 'not_loaded') %}
                            {% if status == 'available' %}
                                <span class="fp-dep-chip fp-dep-chip--module" style="border-style: dashed;">
                                    <i class="ti ti-link"></i>{{ dep_name | e }}<span class="fp-dep-ver">{{ constraint | e }}</span>
                                    <span class="badge bg-green ms-1">Available</span>
                                </span>
                            {% elif status == 'version_mismatch' %}
                                <span class="fp-dep-chip fp-dep-chip--module" style="border-style: dashed;">
                                    <i class="ti ti-link"></i>{{ dep_name | e }}<span class="fp-dep-ver">{{ constraint | e }}</span>
                                    <span class="badge bg-orange ms-1">Version mismatch</span>
                                </span>
                            {% else %}
                                <span class="fp-dep-chip fp-dep-chip--module" style="border-style: dashed; opacity: 0.7;">
                                    <i class="ti ti-link"></i>{{ dep_name | e }}<span class="fp-dep-ver">{{ constraint | e }}</span>
                                    <span class="badge bg-yellow ms-1">Not loaded</span>
                                </span>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {% set req_deps     = widget.plugin_data.dependencies.get('requirements.txt', []) %}
                {% set pyproject    = widget.plugin_data.dependencies.get('pyproject.toml', {}) %}
                {% set py_required  = pyproject.get('required', []) %}
                {% set py_optional  = pyproject.get('optional', {}) %}

                {# ── requirements.txt ── #}
                {% if req_deps %}
                <div class="fp-dep-section">
                    <div class="fp-dep-label">
                        <span class="fp-meta-chip fp-meta-chip--blue me-1">requirements.txt</span>
                        <span class="fp-dep-count">{{ req_deps | length }} pkg</span>
                    </div>
                    <div class="fp-dep-chips">
                        {% for dep in req_deps %}
                            <span class="fp-dep-chip fp-dep-chip--req">{{ dep }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# ── pyproject.toml › required ── #}
                {% if py_required %}
                <div class="fp-dep-section">
                    <div class="fp-dep-label">
                        <span class="fp-meta-chip fp-meta-chip--dim me-1">pyproject.toml</span>
                        <span class="fp-dep-count">{{ py_required | length }} pkg</span>
                    </div>
                    <div class="fp-dep-chips">
                        {% for dep in py_required %}
                            <span class="fp-dep-chip fp-dep-chip--pyproject">{{ dep }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# ── pyproject.toml › optional groups ── #}
                {% for group_name, group_deps in py_optional.items() %}
                {% if group_deps %}
                <div class="fp-dep-section">
                    <div class="fp-dep-label">
                        <span class="fp-meta-chip fp-meta-chip--dim me-1">pyproject.toml</span>
                        <span class="fp-meta-chip fp-meta-chip--optional me-1">optional · {{ group_name }}</span>
                        <span class="fp-dep-count">{{ group_deps | length }} pkg</span>
                    </div>
                    <div class="fp-dep-chips">
                        {% for dep in group_deps %}
                            <span class="fp-dep-chip fp-dep-chip--optional">{{ dep }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                {% endfor %}

                {% if not req_deps and not py_required and not py_optional and not widget.plugin_data.get('depends_on') and not opt_deps %}
                <div class="fp-dep-empty">
                    <i class="ti ti-package-off"></i>
                    <span>No dependencies</span>
                </div>
                {% endif %}

                {% if widget.plugin_data.get('dependency_issues') %}
                <div class="alert alert-warning mt-3">
                    <div class="d-flex gap-2 align-items-start">
                        <i class="ti ti-alert-triangle flex-shrink-0 mt-1"></i>
                        <div>
                            <div class="fw-semibold mb-1">Dependency Issues</div>
                            {% for issue in widget.plugin_data.get('dependency_issues', []) %}
                                <div class="small text-secondary">{{ issue }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}

                {% if widget.plugin_data.get('optional_dependency_warnings') %}
                <div class="alert alert-info mt-3">
                    <div class="d-flex gap-2 align-items-start">
                        <i class="ti ti-info-circle flex-shrink-0 mt-1"></i>
                        <div>
                            <div class="fw-semibold mb-1">Optional Dependency Warnings</div>
                            {% for warning in widget.plugin_data.get('optional_dependency_warnings', []) %}
                                <div class="small text-secondary">{{ warning | e }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    {% if widget.plugin_data.get('load_failed') %}
    <div class="col-12">
        <div class="alert alert-danger d-flex align-items-start gap-3" role="alert">
            <i class="ti ti-alert-triangle icon icon-lg flex-shrink-0 mt-1"></i>
            <div>
                <h4 class="alert-title">This plugin failed to load</h4>
                {% for error in widget.plugin_data.get('error', []) %}
                <p class="mb-1">{{ error }}</p>
                {% endfor %}
                {% if widget.plugin_data.get('traceback') %}
                <details class="mt-2">
                    <summary class="text-muted cursor-pointer">Show traceback</summary>
                    {% for tb in widget.plugin_data.get('traceback', []) %}
                    <pre class="text-muted small mt-2 mb-0" style="white-space: pre-wrap;">{{ tb }}</pre>
                    {% endfor %}
                </details>
                {% endif %}
            </div>
        </div>
    </div>
    {% elif widget.plugin_data.get('error') or widget.plugin_data.get('warning') %}
    <div class="col-12 col-lg-6">
        <div class="card h-100 fp-errors-card">
            <div class="card-header">
                <h4 class="card-title text-danger">
                    <i class="ti ti-alert-circle me-2"></i>Errors &amp; Warnings
                </h4>
            </div>
            <div class="card-body">
                {% for error in widget.plugin_data.get('error', []) %}
                <div class="alert alert-danger py-2 mb-2">
                    <div class="d-flex align-items-start gap-2">
                        <i class="ti ti-circle-x mt-1 flex-shrink-0"></i>
                        <div>{{ error }}</div>
                    </div>
                </div>
                {% endfor %}
                {% for warning in widget.plugin_data.get('warning', []) %}
                <div class="alert alert-warning py-2 mb-2">
                    <div class="d-flex align-items-start gap-2">
                        <i class="ti ti-alert-triangle mt-1 flex-shrink-0"></i>
                        <div>{{ warning }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
