{% extends "layouts/main.html" %}
{% block title %}{{ app.display_name }} — Apps{% include "layouts/_app_title_suffix.html" %}{% endblock %}
{% block page_title %}{{ app.display_name }}{% endblock %}

{% block page_actions %}
<div x-data="pvAppsUninstall()">
    {% include "apps/_actions.html" %}
</div>
{% endblock %}

{% block content %}
<div class="w-full max-w-none">
    <div class="bg-neutral-primary border border-default rounded-xl shadow-sm overflow-hidden">
        <div class="px-5 sm:px-6 py-4 border-b border-default flex items-start gap-3">
            {% with size='w-11 h-11', icon_size='w-6 h-6' %}
            {% include "apps/_icon.html" %}
            {% endwith %}
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    {% include "apps/_state_badge.html" %}
                    <span class="text-xs text-body-subtle">{{ app.category }}</span>
                </div>
                {% if app.author %}
                <p class="text-xs text-body-subtle mt-1">by {{ app.author }}</p>
                {% endif %}
            </div>
        </div>

        <div class="px-5 sm:px-6 py-5 space-y-6">
            <dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-4 text-sm">
                <div>
                    <dt class="text-2xs font-medium text-body-subtle uppercase tracking-wide">Technical name</dt>
                    <dd class="text-body font-mono text-sm mt-0.5">{{ app.name }}</dd>
                </div>
                <div>
                    <dt class="text-2xs font-medium text-body-subtle uppercase tracking-wide">Version</dt>
                    <dd class="text-body mt-0.5">
                        {% if app.version_upgrade %}
                        <span class="text-warning-strong">{{ app.installed_version }} → {{ app.available_version }}</span>
                        {% elif app.has_schema_diff %}
                        {{ app.installed_version }}
                        <span class="text-warning-strong">(schema changes pending)</span>
                        {% elif app.installed_version %}
                        {{ app.installed_version }}
                        <span class="text-body-subtle">(available {{ app.available_version }})</span>
                        {% else %}
                        {{ app.available_version }}
                        {% endif %}
                    </dd>
                </div>
                {% if app.depends %}
                <div class="sm:col-span-2 lg:col-span-2">
                    <dt class="text-2xs font-medium text-body-subtle uppercase tracking-wide">Depends on</dt>
                    <dd class="text-body mt-0.5">
                        {% for d in app.depends %}
                        <span class="{% if d in app.deps_missing %}text-fg-danger font-medium{% endif %}">{{ d }}</span>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </dd>
                </div>
                {% endif %}
            </dl>

            {% if app.summary %}
            <section>
                <h3 class="text-xs font-semibold text-heading mb-2">Summary</h3>
                <p class="text-sm text-body leading-relaxed">{{ app.summary }}</p>
            </section>
            {% endif %}

            <section>
                <h3 class="text-xs font-semibold text-heading mb-2">Documentation</h3>
                {% if app.description %}
                <div class="text-sm text-body leading-relaxed whitespace-pre-wrap rounded-lg
                            bg-neutral-secondary/50 px-5 py-4 w-full">
                    {{ app.description }}
                </div>
                {% else %}
                <p class="text-sm text-body-subtle italic">No extended description in the module manifest.</p>
                {% endif %}
            </section>
        </div>
    </div>
</div>

{% include "apps/_scripts.html" %}
{% endblock %}