{% load spellbook_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        {% spellbook_styles %}
        <style>
      /* Base styles */
      .spellbook-container {
        max-width: 1200px;
        margin: 0 auto;
      }

      /* Desktop layout */
      @media (min-width: 768px) {
        .spellbook-layout {
          display: grid;
          grid-template-columns: 250px minmax(0, 800px) 1fr;
          gap: 2rem;
        }

        .spellbook-toc {
          position: sticky;
          top: 1rem;
          max-height: calc(100vh - 2rem);
          overflow-y: auto;
          border-right: 1px solid #eee;
          grid-column: 1;
        }

        .spellbook-content {
          grid-column: 2;
          width: 100%;
          max-width: 800px;
        }
      }

      /* Mobile layout */
      @media (max-width: 767px) {
        .spellbook-layout {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .spellbook-toc {
          border-bottom: 1px solid #eee;
          padding-bottom: 1rem;
          margin-bottom: 1rem;
        }
      }

      /* TOC styles */
      .spellbook-toc ul {
        list-style: none;
        padding-left: 1rem;
      }

      .spellbook-toc li {
        margin: 0.5rem 0;
      }

      /* Content styles */
      .spellbook-content {
        max-width: 100%;
        overflow-x: auto;
      }

      .spellbook-content p {
        opacity: 0.8;
      }

      .spellbook-content h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        opacity: 0.85;
      }

      .spellbook-content h2 {
        margin-left: 0.5rem;
      }

      .spellbook-content h3 {
        margin-left: 1rem;
      }

      .spellbook-content h4 {
        margin-left: 1.5rem;
      }

      .spellbook-content h5 {
        margin-left: 2rem;
      }

      .spellbook-content h6 {
        margin-left: 2.5rem;
      }

      .spellbook-content pre {
        background-color: #000000;
        padding: 1rem;
        color: #fff;
      }

      .spellbook-content code {
        background-color: #000000;
        padding: 0.1rem 0.2rem;
        margin: 0 0.2rem;
        color: #fff;
      }
        </style>
    </head>
    <body>
        <div class="spellbook-container">
            <div class="spellbook-layout">
                <nav class="spellbook-toc">
                    {% include "django_spellbook/tocs/sidebar_toc.html" %}
                </nav>
                <main class="spellbook-content">
                    {% block spellbook_md %}{% endblock %}
                </main>
            </div>
        </div>
    </body>
</html>
