{% extends app_base_template|default("base.html") %}

{% block title %}{{ system_app.name }} - AI2Apps{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ static('css/dashboard.css') }}">
{% endblock %}

{% block content %}
<div class="min-h-screen bg-white flex flex-col ai2apps-system-app"
     data-app-id="{{ system_app.id }}"
     data-system-app-tab="{{ system_app.tab }}"
     x-data="dashboard()"
     x-init="init()">
    <main class="flex-grow relative overflow-hidden">
        <div class="absolute inset-0 bg-grain pointer-events-none z-0"></div>
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-b from-neutral-50 to-transparent rounded-full blur-3xl -z-10 opacity-50"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-10 relative z-10">
            {% block system_app_content %}{% endblock %}
        </div>
    </main>

    {% block system_app_modals %}{% endblock %}

    <div x-show="tip.visible" x-cloak x-text="tip.text"
         class="fixed z-[60] max-w-sm px-2.5 py-1 text-left text-xs font-medium text-white bg-neutral-800 rounded-md whitespace-pre-line pointer-events-none -translate-x-1/2"
         :style="`top: ${tip.y}px; left: ${tip.x}px`"></div>
</div>
{% endblock %}

{% block scripts %}
{% if not mobile_surface %}
<script>
window.AI2APPS_SYSTEM_APP = {{ system_app | tojson }};
window.AI2APPS_INITIAL_DASHBOARD_TAB = {{ system_app.tab | tojson }};
</script>
{% endif %}
<script src="{{ static('js/purify.min.js') }}"></script>
<script src="{{ static('js/marked.umd.js') }}"></script>
<script src="{{ static('js/dashboard.js') }}"></script>
{% endblock %}