---
import App from '../layouts/App.astro'
import Library from '../components/Library.astro'
import Footer from '../components/Footer.astro'
---

<App article={null}>
  <button
    id="home-btn"
    onclick="document.getElementById('router-outlet').innerHTML = `
      <h1>Under Maintenance</h1>
      <p>
        Currently performing some maintenance, working to improve your
        experience. Please check back soon. We apologize for any inconvenience
        this may cause.
      </p>
  `;"
    >Home</button
  >
  <div slot="post" id="router-outlet">
    <h1>Under Maintenance</h1>
    <p>
      Currently performing some maintenance, working to improve your experience.
      Please check back soon. We apologize for any inconvenience this may cause.
    </p>
  </div>
  <Library slot="library" skipSave={true} />
  <Footer slot="footer" />
</App>

<style>
  #home-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 30px;
    border: 2px solid rgb(var(--gray));
    background-color: white;
    box-shadow: 0 1px 3px 1px rgb(var(--gray-light));
    cursor: pointer;
  }
</style>