{% extends "base.html" %}

{% block title %}{{ item.title }} | {{ collection.name | title }} | {{ site.config.title }}{% endblock %}

{% block content %}
<article>
    <header>
        <p class="breadcrumb"><a href="{{ site.config.base_url }}/{{ collection_name }}/">{{ collection.name | title }}</a></p>
        <h1>{{ item.title }}</h1>
    </header>
    <div class="content">
        {{ item.content | safe }}
    </div>
</article>

<style>
    .breadcrumb {
        color: #6b7280;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }
    .dark .breadcrumb {
        color: #9ca3af;
    }
    .breadcrumb a {
        color: #6b7280;
    }
    .dark .breadcrumb a {
        color: #9ca3af;
    }
</style>
{% endblock %}