{% extends "base.html" %}

{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}

{% block content %}
<div class="article-container">
    <article class="article-content">
        <header class="article-header">
            <h1 class="article-title">{{ post.title }}</h1>
            <div class="article-meta">
                <time class="article-date">{{ post.date }}</time>
                {% if post.language %}
                <span class="article-lang">{{ post.language }}</span>
                {% endif %}
            </div>
            <div class="article-actions">
                {% if post.markdown_url %}
                <a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
                    Markdown
                </a>
                {% endif %}
                {% if post.translation_url %}
                <a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
                    🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
                </a>
                {% endif %}
            </div>
        </header>
        
        <div class="article-body">
            {{ post.content | safe }}
        </div>
        
        <div id="comment-atproto"></div>
    </article>
    
    <aside class="article-sidebar">
        <nav class="toc">
            <h3>Contents</h3>
            <div id="toc-content">
                <!-- TOC will be generated by JavaScript -->
            </div>
        </nav>
    </aside>
</div>

<script>
// Generate table of contents
function generateTableOfContents() {
    const tocContainer = document.getElementById('toc-content');
    const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
    
    if (headings.length === 0) {
        tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
        return;
    }
    
    const tocList = document.createElement('ul');
    tocList.className = 'toc-list';
    
    headings.forEach((heading, index) => {
        const id = `heading-${index}`;
        heading.id = id;
        
        const listItem = document.createElement('li');
        listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
        
        const link = document.createElement('a');
        link.href = `#${id}`;
        link.textContent = heading.textContent;
        link.className = 'toc-link';
        
        link.addEventListener('click', function(e) {
            e.preventDefault();
            heading.scrollIntoView({ behavior: 'smooth' });
        });
        
        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });
    
    tocContainer.appendChild(tocList);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    generateTableOfContents();
});
</script>
{% endblock %}

{% block sidebar %}
{% endblock %}