{%- extends "basic/layout.html" %}

{%- block extrahead %}
  {{ super() }}
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="{{ pathto('_static/angular.css', 1) }}">
{%- endblock %}

{% block htmltitle %}
  <title>{{ title|striptags|e }} | {{ project }}</title>
{% endblock %}

{%- block document %}
  <noscript>
    <div style="padding: 20px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; margin: 20px;">
      <strong>JavaScript Required:</strong> This site requires JavaScript to be enabled for full functionality and navigation.
    </div>
  </noscript>
  <app-root data-project="{{ project }}">
    <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
      <h1>{{ title }}</h1>
      {{ body }}
    </div>
  </app-root>
  <div id="static-toc" hidden>{{ toc }}</div>
  <script id="static-sitemap" type="application/json">{{ sitemap_json }}</script>
  <script id="static-root-page" type="application/json">{{ root_page_json }}</script>
  <script src="{{ pathto('_static/language_data.js', 1) }}"></script>
  {# Search integration - conditional based on search_provider #}
  {% if search_enabled and search_provider == 'pagefind' %}
  <script type="module">
    import * as pagefind from "./{{ pathto('pagefind/pagefind.js', 1) }}";
    window.pagefind = pagefind;
  </script>
  {% endif %}
  <script type="module" src="{{ pathto('_static/main.js', 1) }}"></script>
{%- endblock %}

{% block relbar1 %}{% endblock %}

{% block relbar2 %}{% endblock %}

{% block footer %}{% endblock %}