---
import BaseLayout from '@layouts/Base.astro';
import NavBar from '@components/scafold/Nav.astro';
import Footer from '@components/scafold/Footer.astro';
---

<BaseLayout
  title="API Docs | Web Check"
  description="API documentation for the Web Check backend REST endpoints"
>
  <Fragment slot="head">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui.css">
    <link rel="stylesheet" href="https://rawcdn.githack.com/Amoenus/SwaggerDark/2064ccd45b571865a64c731fa6bfddfbf2a01fe1/SwaggerDark.css">
  </Fragment>
  <main>
    <NavBar />
    <div id="swagger-ui"></div>
    <Footer />
  </main>
</BaseLayout>

<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui-bundle.js"></script>
<script is:inline>
  function initializeSwagger() {
    SwaggerUIBundle({
      url: '/resources/openapi-spec.yml',
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIBundle.SwaggerUIStandalonePreset
      ],
    });
  }
  // Initialize Swagger when visiting page directly
  document.addEventListener('DOMContentLoaded', initializeSwagger);
  // Initialize Swagger when navigating to page from another page
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initializeSwagger();
  }
</script>

<style lang="scss">
  @import '@styles/global.scss';
  main {
    height: 100vh;
    padding-top: 2rem;
    #swagger-ui {
      margin: 0 auto;
      width: calc(100vw - 4rem);
      max-width: 1600px;
      min-height: 100vh;
    }
  }
</style>
