<!DOCTYPE html>
<!--suppress HtmlUnknownTarget -->
<html lang="en">
<head>
    <title>{{ te.rpc.info.title }} - Docs</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">

    {# Favicon #}
    {% if icon_url %}
        <link rel="icon" href="{{ icon_url }}">
    {% else %}
        <link rel="apple-touch-icon" sizes="57x57" href="/static/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/static/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/static/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/static/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"
              href="/static/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
        <link rel="manifest" href="/static/manifest.json">
    {% endif %}

    {# Tailwind CSS #}
    <link href="/static/output.css" rel="stylesheet">

    {# Google Material Icons #}
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400"
          rel="stylesheet"/>

    <!--suppress CssUnusedSymbol -->
    <style>
        .hljs {
            border-radius: 1rem;
        }
    </style>
    {# Used by highlight.js #}
    <link id="codeTheme" rel="stylesheet">

    {# JS Sources #}
    <script src="/static/highlight.min.js"></script>
    <script src="/static/htmx.js"></script>
    <script src="/static/tabella.js"></script>

    {# Set theme in head to avoid flash-bang. #}
    <script>
        if (isDark()) {
            document.documentElement.classList.add("dark")
        } else {
            document.documentElement.classList.remove("dark")
        }
    </script>
</head>

<body class="text-neutral-950 bg-neutral-500 dark:bg-neutral-950 dark:text-neutral-300">

<div id="dim-overlay"
     class="z-[49] top-0 left-0 w-full h-full bg-opacity-75 bg-black hidden fixed"></div>

{# Top Bar #}
<header class="sticky top-0 z-[48] pt-3 pb-3 bg-neutral-900 text-neutral-300 opacity-90">
    <div class="flex container mx-auto">
        {% include "top_bar.html" %}
    </div>
</header>

{# OpenRPC Doc Viewer #}
<main id="openrpc-doc-viewer"
      class="relative m-8 mt-6 container rounded-2xl mx-auto p-6 bg-neutral-100 dark:bg-neutral-800">
    {% include "openrpc_docs.html" %}
</main>

{# Run on initial load. #}
<script>
    {% if not disable_api_input %}
        let apiUrl = localStorage.getItem("api-url");
        if (apiUrl !== "undefined") {
            document.getElementById("api-url-input").value = apiUrl;
        }
    {% endif %}
    if (isDark()) {
        document.getElementById("theme-icon").textContent = "dark_mode";
        document.getElementById("codeTheme").href = "/static/vs2015.min.css"
    } else {
        document.getElementById("theme-icon").textContent = "light_mode";
        document.getElementById("codeTheme").href = "/static/vs.min.css"
    }
</script>

</body>
</html>
