{% extends "base.html.j2" %}
{% from "decor.html.j2" import motif_divider, section_accent %}

{% set nav_prefix = "../" %}

{% block title %}{{ entry.title }}{% endblock %}

{% block extra_styles %}
.breadcrumb {
    font-size: 0.9rem;
    color: var(--td-color-text-muted);
    margin-bottom: 1rem;
}
.breadcrumb a {
    color: var(--td-color-primary);
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb-sep {
    margin: 0 0.4rem;
}
article header {
    text-align: left;
    border-bottom: none;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    position: relative;
    padding-left: 1.5rem;
}
article header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 48px;
    background: var(--td-color-primary);
    border-radius: 2px;
}
article header h1 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}
.article-abstract {
    color: var(--td-color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0.5rem 0;
}
.article-variants {
    font-size: 0.9rem;
    color: var(--td-color-text-secondary);
    margin-bottom: 0.5rem;
}
.variant-tag {
    background: var(--td-color-accent-light);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-right: 0.3rem;
    font-style: italic;
}
.infobox {
    float: right;
    clear: right;
    width: 280px;
    margin: 0 0 1.25rem 1.5rem;
    padding: 0;
    border: 1px solid var(--td-color-border-dark);
    background: linear-gradient(to bottom, var(--td-color-bg-infobox), var(--td-color-surface));
    font-size: 0.88rem;
    border-radius: var(--td-radius);
    overflow: hidden;
}
.infobox-header {
    background: var(--td-color-primary);
    padding: 0.7rem 0.85rem;
    font-weight: 600;
    color: white;
    text-align: center;
    border-bottom: none;
    font-family: var(--td-font-headings);
}
.infobox-image {
    text-align: center;
    padding: 0.85rem;
    background: var(--td-color-surface);
    border-bottom: 1px solid var(--td-color-border-dark);
}
.infobox-image img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--td-radius);
}
.infobox-image-credit {
    font-size: 0.75rem;
    color: var(--td-color-text-muted);
    margin-top: 0.35rem;
}
.infobox-row {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--td-color-border);
}
.infobox-row:last-child {
    border-bottom: none;
}
.infobox-label {
    font-weight: 500;
    color: var(--td-color-text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.infobox-value {
    color: var(--td-color-text);
}
.infobox-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.infobox-keyword {
    font-size: 0.75rem;
    background: var(--td-color-accent-light);
    color: var(--td-color-accent-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}
.infobox-keyword a {
    color: var(--td-color-text-secondary);
    text-decoration: none;
}
.infobox-keyword a:hover {
    text-decoration: underline;
}
.infobox-link a {
    color: var(--td-color-primary);
    text-decoration: none;
    font-size: 0.85rem;
}
.infobox-link a:hover {
    text-decoration: underline;
}
.infobox-thumb {
    display: inline-block;
    margin: 2px;
}
.infobox-thumb img {
    max-width: 50px;
    max-height: 40px;
    border-radius: 2px;
    object-fit: cover;
}
.toc {
    display: inline-block;
    background: var(--td-color-bg-infobox);
    border: 1px solid var(--td-color-border);
    padding: 1rem 1.5rem;
    margin: 0.5rem 0 1rem 0;
    font-size: 0.9rem;
    max-width: 100%;
    border-radius: var(--td-radius);
}
.toc-title {
    font-weight: 600;
    color: var(--td-color-primary);
    margin-bottom: 0.5rem;
    text-align: center;
}
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc-list li {
    padding: 0.2rem 0;
}
.toc-list a {
    color: var(--td-color-primary);
    text-decoration: none;
}
.toc-list a:hover {
    text-decoration: underline;
}
.toc-h4 {
    padding-left: 1rem;
    font-size: 0.85rem;
}
.article-content {
    line-height: 1.7;
    color: var(--td-color-text);
}
.article-content::after {
    content: "";
    display: table;
    clear: both;
}
.article-content h3 {
    font-size: 1.3rem;
    color: var(--td-color-primary);
    margin: 2rem 0 0.75rem 0;
    padding-left: 0.75rem;
    border-left: 4px solid var(--td-color-primary);
    font-weight: 600;
    line-height: 1.3;
}
.article-content h3:first-child {
    margin-top: 0;
}
.article-content > p:first-of-type {
    font-size: 1.08rem;
    line-height: 1.8;
}
.article-content > p:first-of-type::first-letter {
    float: left;
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 700;
    color: var(--td-color-accent);
    margin-right: 0.15rem;
    margin-top: 0.05rem;
}
.article-content h4 {
    font-size: 1.1rem;
    color: var(--td-color-primary);
    margin: 1.25rem 0 0.5rem 0;
    font-weight: 600;
}
.article-content p {
    margin: 0.75rem 0;
    text-align: justify;
}
.article-content ul, .article-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}
.article-content li {
    margin: 0.35rem 0;
}
.article-content em {
    font-style: italic;
}
.article-content strong {
    font-weight: 600;
    color: var(--td-color-primary);
}
.article-content hr {
    border: none;
    border-top: 1px solid var(--td-color-border);
    margin: 1.25rem 0;
}
.broken-link {
    color: var(--td-color-error);
    text-decoration: underline wavy;
}
.examples-section {
    margin-top: 2rem;
}
.examples-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--td-color-primary);
    margin-bottom: 0.75rem;
}
.example-block {
    background: linear-gradient(to right, var(--td-color-bg-light), var(--td-color-bg-infobox));
    border-left: 4px solid var(--td-color-primary);
    padding: 0.9rem 1rem;
    margin: 0.6rem 0;
    border-radius: 0 var(--td-radius) var(--td-radius) 0;
}
.example-indigenous {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--td-color-primary);
    margin-bottom: 0.4rem;
    font-style: italic;
}
.example-translation {
    font-size: 0.92rem;
    color: var(--td-color-text-secondary);
    padding-left: 0.5rem;
    border-left: 2px solid var(--td-color-border-dark);
    margin-left: 0.25rem;
}
.references-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--td-color-border);
}
.references-section h2 {
    font-size: 1.2rem;
    color: var(--td-color-primary);
    margin-bottom: 0.75rem;
}
.references-section ol {
    padding-left: 1.5rem;
}
.references-section li {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--td-color-text-secondary);
}
.ref-error {
    color: var(--td-color-error);
}
.see-also-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--td-color-border);
}
.see-also-section h2 {
    font-size: 1.2rem;
    color: var(--td-color-primary);
    margin-bottom: 0.75rem;
}
.see-also-section ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.see-also-section li a {
    display: inline-block;
    background: var(--td-color-accent-light);
    color: var(--td-color-accent-muted);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
}
.see-also-section li a:hover {
    background: var(--td-color-accent-light);
    text-decoration: underline;
}
.cross-links-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--td-color-border);
}
.cross-links-section h2 {
    font-size: 1.2rem;
    color: var(--td-color-primary);
    margin-bottom: 0.75rem;
}
.cross-links-section a {
    color: var(--td-color-primary);
    text-decoration: none;
    margin-right: 1rem;
}
.cross-links-section a:hover {
    text-decoration: underline;
}
.article-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--td-color-border);
    font-size: 0.85rem;
    color: var(--td-color-text-muted);
}
.article-footer .category-breadcrumbs {
    margin-top: 0.5rem;
}
.article-footer .category-breadcrumbs a {
    color: var(--td-color-accent);
    text-decoration: none;
}
.article-footer .category-breadcrumbs a:hover {
    text-decoration: underline;
}
.back-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--td-color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.4rem 1.25rem;
    border: 2px solid var(--td-color-primary);
    border-radius: 999px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.back-link:hover {
    background: var(--td-color-primary);
    color: white;
    text-decoration: none;
}
@media (max-width: 700px) {
    .infobox {
        float: none;
        width: 100%;
        margin: 0 0 1rem 0;
    }
    article header h1 {
        font-size: 1.5rem;
    }
    .article-content h3 {
        font-size: 1.15rem;
    }
    .article-content h4 {
        font-size: 1rem;
    }
    .article-content p {
        text-align: left;
    }
}
{% endblock %}

{% block content %}
    <nav class="breadcrumb" aria-label="{{ t.enc_breadcrumb_label | default('Navegação') }}">
        <a href="../encyclopedia.html">{{ t.nav_encyclopedia | default('Enciclopédia') }}</a>
        <span class="breadcrumb-sep">&rsaquo;</span>
        <span>{{ entry.title }}</span>
    </nav>

    <article>
        <header>
            <h1>{{ entry.title }}</h1>
            {% if entry.variants and entry.variants | length > 0 %}
            <div class="article-variants">
                {{ t.enc_variants | default('Variantes') }}:
                {% for v in entry.variants %}<span class="variant-tag">{{ v }}</span>{% endfor %}
            </div>
            {% endif %}
            {% if entry.abstract %}
            <p class="article-abstract">{{ entry.abstract }}</p>
            {% endif %}
        </header>

        {% set has_images = entry.images and entry.images | length > 0 %}
        {% set has_categories = entry.categories and entry.categories | length > 0 %}
        {% set has_infobox = entry.infobox and entry.infobox.keys() | list | length > 0 %}
        {% if has_images or has_categories or entry.entry_type or has_infobox or entry.url %}
        <aside class="infobox">
            <div class="infobox-header">{{ entry.title }}</div>
            {% if has_images %}
                {% set img = entry.images[0] %}
                {% if img.url %}
                <div class="infobox-image">
                    <a href="../../{{ img.url }}" target="_blank" rel="noopener">
                        <img src="../../{{ img.url }}" alt="{{ img.alt | default(entry.title) }}" loading="lazy">
                    </a>
                    {% if img.credit %}<div class="infobox-image-credit">{{ img.credit }}</div>{% endif %}
                </div>
                {% endif %}
            {% endif %}
            {% if entry.entry_type %}
            <div class="infobox-row">
                <div class="infobox-label">{{ t.enc_entry_type | default('Tipo') }}</div>
                <div class="infobox-value">{{ entry.entry_type }}</div>
            </div>
            {% endif %}
            {% if has_infobox %}
                {% for key, value in entry.infobox.items() %}
                <div class="infobox-row">
                    <div class="infobox-label">{{ t['infobox_' + key] | default(key) }}</div>
                    <div class="infobox-value">{{ value }}</div>
                </div>
                {% endfor %}
            {% endif %}
            {% if has_categories %}
            <div class="infobox-row">
                <div class="infobox-label">{{ t.enc_categories | default('Categorias') }}</div>
                <div class="infobox-keywords">
                    {% for cat in entry.categories %}
                    <span class="infobox-keyword"><a href="../encyclopedia.html?category={{ cat | urlencode }}">{{ cat }}</a></span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if entry.url %}
            <div class="infobox-row infobox-link">
                <a href="{{ entry.url }}" target="_blank" rel="noopener">{{ t.enc_external_link | default('Ver referência externa') }} &rarr;</a>
            </div>
            {% endif %}
            {% if has_images and entry.images | length > 1 %}
            <div class="infobox-row">
                <div class="infobox-label">{{ t.enc_more_images | default('Mais imagens') }}</div>
                <div class="infobox-value">
                    {% for img in entry.images[1:] %}
                        {% if img.url %}
                        <a href="../../{{ img.url }}" target="_blank" rel="noopener" class="infobox-thumb">
                            <img src="../../{{ img.url }}" alt="{{ img.alt | default('') }}" loading="lazy">
                        </a>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </aside>
        {% endif %}

        {% if toc_html %}
        {{ toc_html | safe }}
        {% endif %}

        {{ motif_divider(intensity=intensity) }}

        {% if entry.content_html %}
        <div class="article-content">
            {{ entry.content_html | safe }}
        </div>
        {% endif %}

        {% if entry.examples and entry.examples | length > 0 %}
        <section class="examples-section">
            <div class="examples-title">{{ t.enc_examples | default('Exemplos') }}</div>
            {% for ex in entry.examples %}
            <div class="example-block">
                {% if ex.indigenous %}<div class="example-indigenous">"{{ ex.indigenous }}"</div>{% endif %}
                {% if ex.translation %}<div class="example-translation">{{ ex.translation }}</div>{% endif %}
            </div>
            {% endfor %}
        </section>
        {% endif %}

        {% if entry.resolved_references and entry.resolved_references | length > 0 %}
        <section class="references-section">
            <h2>{{ t.enc_references | default('Referências') }}</h2>
            <ol>
                {% for ref in entry.resolved_references %}
                <li{% if ref.error %} class="ref-error"{% endif %}>{{ ref.formatted }}</li>
                {% endfor %}
            </ol>
        </section>
        {% endif %}

        {% if entry.see_also and entry.see_also | length > 0 %}
        <section class="see-also-section">
            <h2>{{ t.enc_see_also | default('Ver também') }}</h2>
            <ul>
                {% for sa_id in entry.see_also %}
                <li><a href="{{ sa_id }}.html">{{ all_titles.get(sa_id, sa_id) }}</a></li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}

        {% set has_dict_links = entry._linked_dictionary is defined and entry._linked_dictionary %}
        {% set has_fauna_links = entry._linked_fauna is defined and entry._linked_fauna %}
        {% if has_dict_links or has_fauna_links %}
        <section class="cross-links-section" style="{{ section_accent(intensity=intensity) }}">
            <h2>{{ t.see_also | default('Ver também') }}</h2>
            {% if has_dict_links %}
                {% for link in entry._linked_dictionary %}
                <a href="../dictionary.html?search={{ link.entry | urlencode }}">{{ t.see_in_dictionary | default('Ver no Dicionário') }}: {{ link.entry }}</a>
                {% endfor %}
            {% endif %}
            {% if has_fauna_links %}
                {% for link in entry._linked_fauna %}
                <a href="../fauna.html?search={{ link.name_indigenous | urlencode }}">{{ t.see_in_fauna | default('Ver na Fauna') }}: {{ link.name_indigenous }}</a>
                {% endfor %}
            {% endif %}
        </section>
        {% endif %}

        <div class="article-footer">
            {% if entry.date %}
            <div>{{ t.enc_last_updated | default('Última atualização') }}: {{ entry.date }}</div>
            {% endif %}
            {% if entry.categories and entry.categories | length > 0 %}
            <div class="category-breadcrumbs">
                {{ t.enc_categories | default('Categorias') }}:
                {% for cat in entry.categories %}
                    {% set parts = cat.split('/') %}
                    {% for i in range(parts | length) %}
                        {% set path = parts[:i+1] | join('/') %}
                        <a href="../encyclopedia.html?category={{ path | urlencode }}">{{ parts[i] }}</a>{% if not loop.last %} &rsaquo; {% endif %}
                    {% endfor %}
                    {% if not loop.last %} &bull; {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </article>

    <a href="../encyclopedia.html" class="back-link">&larr; {{ t.enc_back_to_index | default('Voltar à enciclopédia') }}</a>
{% endblock %}
