{% extends "base.html" %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8 max-w-7xl mx-auto">
  <aside class="lg:sticky lg:top-24 lg:h-fit lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto">
    <nav class="bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700/50 rounded-xl p-6">
      {% if site.data.sidebar %}
        {% for section in site.data.sidebar.sections %}
        <div class="mb-6 last:mb-0">
          <h3 class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400 font-semibold mb-3">{{ section.title }}</h3>
          <ul class="space-y-1">
            {% for item in section.items %}
            <li>
              <a href="{{ site.config.base_url }}{{ item.url }}" class="block py-2 px-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-500/10 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
                {{ item.title }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endfor %}
      {% endif %}
    </nav>
  </aside>

  <main class="min-w-0 prose prose-lg dark:prose-invert max-w-none
    prose-headings:font-bold prose-headings:text-gray-900 dark:prose-headings:text-white
    prose-h1:text-4xl prose-h1:mb-6 prose-h1:pb-4 prose-h1:border-b prose-h1:border-gray-200 dark:prose-h1:border-gray-700
    prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:text-blue-600 dark:prose-h2:text-blue-400
    prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
    prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-p:leading-relaxed
    prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:marker:text-gray-400 dark:prose-li:marker:text-gray-500
    prose-ol:text-gray-600 dark:prose-ol:text-gray-300
    prose-ul:text-gray-600 dark:prose-ul:text-gray-300
    prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline
    prose-strong:text-gray-900 dark:prose-strong:text-white
    prose-code:text-pink-600 dark:prose-code:text-pink-400 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none prose-code:font-normal
    prose-pre:bg-gray-900 dark:prose-pre:bg-gray-950 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:rounded-xl
    prose-table:border-collapse prose-table:w-full
    prose-th:bg-gray-100 dark:prose-th:bg-gray-800 prose-th:p-3 prose-th:border prose-th:border-gray-200 dark:prose-th:border-gray-700 prose-th:text-left prose-th:text-gray-900 dark:prose-th:text-white prose-th:font-semibold
    prose-td:p-3 prose-td:border prose-td:border-gray-200 dark:prose-td:border-gray-700 prose-td:text-gray-600 dark:prose-td:text-gray-300
    prose-blockquote:border-blue-500 prose-blockquote:text-gray-600 dark:prose-blockquote:text-gray-400
    prose-hr:border-gray-200 dark:prose-hr:border-gray-700">
    {% if item %}
      {{ item.content | safe }}
    {% elif page %}
      {{ page.content | safe }}
    {% elif home %}
      {{ home.content | safe }}
    {% endif %}
  </main>
</div>
{% endblock %}