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

{% block title %}{{ t.bib_title | default(site.bibliography_label) }}{% endblock %}

{% block extra_styles %}
        .bib-header {
            padding: 1.5rem 0 1rem;
            margin-bottom: 1rem;
            position: relative;
            padding-left: 1.5rem;
        }
        .bib-header::before {
            content: '';
            position: absolute;
            left: 0;
            top: 1.5rem;
            width: 4px;
            height: 48px;
            background: var(--td-color-primary);
            border-radius: 2px;
        }
        .bib-header h1 {
            margin: 0 0 0.5rem 0;
        }
{% endblock %}

{% block content %}
    <div class="bib-header">
        <h1>{{ t.bib_title | default(site.bibliography_label) }} {{ page_badge() }}</h1>
        <p class="subtitle">{{ meta.description }} &mdash; {{ data | length }} {{ t.references_label | default('referências') }}</p>
    </div>

    <div class="js-only">
        <div class="search-container">
            <div class="search-row">
                <input type="text" id="search-input" class="search-input" placeholder="{{ t.bib_search_placeholder | default('Pesquisar...') }}" autocomplete="off" aria-label="{{ t.search_label | default('Pesquisar') }}">
                <select id="type-filter" class="filter-select" aria-label="{{ t.filter_label | default('Filtrar resultados') }}">
                    <option value="">{{ t.bib_filter_all | default('Todos os tipos') }}</option>
                    {% set types = [] %}
                    {% for item in data %}
                        {% if item.type and item.type not in types %}
                            {% set _ = types.append(item.type) %}
                        {% endif %}
                    {% endfor %}
                    {% for type in types | sort %}
                    <option value="{{ type }}">{{ type }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="stats" id="stats" aria-live="polite"></div>
        </div>

        {{ motif_divider(intensity=intensity) }}

        <div class="results-container" id="results" aria-live="polite">
            <div class="empty-state">
                <h2>{{ t.bib_empty_title | default('Pesquise a bibliografia') }}</h2>
                <p>{{ t.bib_empty_text | default('') }}</p>
            </div>
        </div>
    </div>

    <div class="no-js-only results-container">
        {% for entry in data %}
        <div class="entry">
            <div class="entry-header">
                <span class="entry-word">{{ entry.id }}</span>
                {% if entry.type %}<span class="entry-tag">{{ entry.type }}</span>{% endif %}
            </div>
            {% if entry.author %}<p class="entry-definition">{{ entry.author }}</p>{% endif %}
            {% if entry.title %}<p class="entry-example">{{ entry.title }}</p>{% endif %}
            {% if entry.year or entry.journal or entry.publisher %}
            <p class="entry-scientific">
                {% if entry.year %}{{ entry.year }}{% endif %}
                {% if entry.journal %}{% if entry.year %}, {% endif %}<em>{{ entry.journal }}</em>{% endif %}
                {% if entry.publisher %}{% if entry.year or entry.journal %}, {% endif %}{{ entry.publisher }}{% endif %}
            </p>
            {% endif %}
        </div>
        {% endfor %}
    </div>
{% endblock %}

{% block scripts %}
    <script>
    var T = {{ t | tojson }};

    function formatAuthors(author) {
        if (!author) return '';
        return author.replace(/\s+and\s+/g, ', ');
    }

    initSearchPage({
        data: {{ data | tojson }},
        fuseKeys: [
            { name: 'author', weight: 2 },
            { name: 'title', weight: 1.5 },
            { name: 'year', weight: 1 },
            { name: 'journal', weight: 0.5 },
            { name: 'booktitle', weight: 0.5 },
            { name: 'publisher', weight: 0.3 },
            { name: 'note', weight: 0.3 }
        ],
        filterField: 'type',
        filterElementId: 'type-filter',
        renderEntry: function(entry, matchMap) {
            var html = '<div class="entry">';

            html += '<div class="entry-header">';
            html += '<span class="entry-word">' + escapeHtml(entry.id) + '</span>';
            if (entry.type) {
                html += '<span class="entry-tag">' + escapeHtml(entry.type) + '</span>';
            }
            html += '</div>';

            if (entry.author) {
                html += '<p class="entry-definition">' + highlightMatches(formatAuthors(entry.author), matchMap['author']) + '</p>';
            }
            if (entry.title) {
                html += '<p class="entry-example">' + highlightMatches(entry.title, matchMap['title']) + '</p>';
            }

            var metaParts = [];
            if (entry.year) metaParts.push(highlightMatches(entry.year, matchMap['year']));
            if (entry.journal) metaParts.push('<em>' + highlightMatches(entry.journal, matchMap['journal']) + '</em>');
            if (entry.volume && entry.number) metaParts.push('v. ' + highlightMatches(entry.volume, matchMap['volume']) + ', n. ' + highlightMatches(entry.number, matchMap['number']));
            if (entry.pages) metaParts.push('p. ' + highlightMatches(entry.pages, matchMap['pages']));
            if (entry.publisher) metaParts.push(highlightMatches(entry.publisher, matchMap['publisher']));
            if (entry.address) metaParts.push(highlightMatches(entry.address, matchMap['address']));

            if (metaParts.length > 0) {
                html += '<p class="entry-scientific">' + metaParts.join(', ') + '</p>';
            }

            if (entry.doi) {
                html += '<div class="entry-links">';
                html += '<a href="https://doi.org/' + escapeHtml(entry.doi) + '" target="_blank" rel="noopener">DOI: ' + escapeHtml(entry.doi) + '</a>';
                html += '</div>';
            } else if (entry.url) {
                html += '<div class="entry-links">';
                html += '<a href="' + escapeHtml(entry.url) + '" target="_blank" rel="noopener">' + escapeHtml(entry.url) + '</a>';
                html += '</div>';
            }

            if (entry.note && !entry.note.includes('Source list item')) {
                html += '<div class="entry-comment">' + highlightMatches(entry.note, matchMap['note']) + '</div>';
            }
            if (entry.note && entry.note.includes('Source list item')) {
                html += '<p class="entry-scientific">' + escapeHtml(entry.note) + '</p>';
            }

            html += '</div>';
            return html;
        },
        labels: {
            results: function(n) { return n !== 1 ? T.bib_result_plural : T.bib_result_singular; },
            emptyTitle: T.bib_empty_title,
            emptyText: T.bib_empty_text,
            noResults: T.bib_no_results,
            noResultsHint: T.bib_no_results_hint,
            overflow: function(n) { return T.bib_overflow.replace('{n}', n); }
        }
    });
    </script>
{% endblock %}
