{% load spellbook_tags %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ directory_name }} - Directory Index</title>
    {% spellbook_styles %}
    <link rel="stylesheet" href="{% static 'django_spellbook/css_modules/directory_index.css' %}">
</head>
<body class="sb-bg-background sb-text-text">
    <div class="directory-index-container">
        <header class="directory-header">
            <h1>📁 {{ directory_name }}</h1>
            <p class="directory-path">{{ directory_path }}</p>
        </header>

        {% if subdirectories %}
        <section class="directory-section">
            <h2>Subdirectories</h2>
            <ul class="directory-list">
                {% for subdir in subdirectories %}
                <li class="directory-item">
                    <a href="{{ subdir.url }}">
                        <span>📂</span>
                        <span>{{ subdir.title }}</span>
                        <span class="page-count">({{ subdir.page_count }} page{{ subdir.page_count|pluralize }})</span>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if pages %}
        <section class="directory-section">
            <h2>Pages</h2>
            <ul class="directory-list">
                {% for page in pages %}
                <li class="page-item">
                    <a href="{{ page.url }}">
                        <span>📄</span>
                        <span>{{ page.title }}</span>
                    </a>

                    {% if page.published or page.modified or page.tags %}
                    <div class="page-meta">
                        {% if page.published %}
                        <span class="page-meta-item">Published: {{ page.published }}</span>
                        {% endif %}

                        {% if page.modified %}
                        <span class="page-meta-item">Modified: {{ page.modified }}</span>
                        {% endif %}

                        {% if page.tags %}
                        <span class="page-meta-item">
                            <span class="tags">
                                {% for tag in page.tags %}
                                <span class="tag">{{ tag }}</span>
                                {% endfor %}
                            </span>
                        </span>
                        {% endif %}
                    </div>
                    {% endif %}

                    {% if page.description %}
                    <p class="page-description">{{ page.description }}</p>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% if not subdirectories and not pages %}
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <p>This directory is empty.</p>
        </div>
        {% endif %}
    </div>
</body>
</html>
