{% extends "base.html" %}

{% block title %}Browse by Entity - {{ title }}{% endblock %}

{% block body %}
<header>
    <div class="container">
        <a href="{{ base_url }}/main.html" class="logo">{{ emoji }} {{ title }}</a>
        <nav>
            {% if summary %}
            <div class="dropdown">
                <button class="dropdown-toggle">Overview</button>
                <div class="dropdown-menu">
                    <a href="{{ base_url }}/overview/summary.html">📄 Finding Aid</a>

                    <a href="{{ base_url }}/overview/changes.html">🔄 Key Changes</a>
                    <a href="{{ base_url }}/overview/questions.html">❓ Research Questions</a>
                </div>
            </div>
            {% endif %}
            <a href="{{ base_url }}/browse/dates.html">Browse by Date</a>
            <a href="{{ base_url }}/browse/entities.html" class="active">Browse by Entity</a>
        </nav>
    </div>
</header>

<main>
    <div class="container browse-section">
        <h1>Browse by Entity</h1>
        
        <div class="entity-filter">
            <h3>🔍 Search Entities</h3>
            <input type="text" class="entity-search" id="entitySearch" placeholder="Search for people, places, organizations...">
            
            <div class="entity-type-filters">
                <label>Filter by type:</label>
                <div class="type-buttons">
                    <button class="type-btn active" data-type="all">All</button>
                    <button class="type-btn" data-type="PERSON">👤 People</button>
                    <button class="type-btn" data-type="LOCATION">📍 Locations</button>
                    <button class="type-btn" data-type="ORGANIZATION">🏛️ Organizations</button>
                    <button class="type-btn" data-type="DATE">📅 Dates</button>
                    <button class="type-btn" data-type="MONEY">💰 Money</button>
                    <button class="type-btn" data-type="LEGAL_TERM">⚖️ Legal</button>
                    <button class="type-btn" data-type="EVENT">📌 Events</button>
                </div>
            </div>
        </div>
        
        {% if entities.by_type %}
        <div id="entityGroups">
        {% for entity_type, entity_list in entities.by_type.items() %}
        <div class="entity-type-group" data-type="{{ entity_type }}">
            <h3>
                {% if entity_type == 'PERSON' %}👤 People
                {% elif entity_type == 'LOCATION' %}📍 Locations
                {% elif entity_type == 'ORGANIZATION' %}🏛️ Organizations
                {% elif entity_type == 'DATE' %}📅 Dates
                {% elif entity_type == 'MONEY' %}💰 Money
                {% elif entity_type == 'LEGAL_TERM' %}⚖️ Legal Terms
                {% elif entity_type == 'EVENT' %}📌 Events
                {% else %}🏷️ {{ entity_type }}{% endif %}
            </h3>
            
            <div class="entity-list">
                {% for entity in entity_list %}
                <div class="entity-item" data-text="{{ entity.text|lower }}">
                    <div class="entity-header">
                        <span class="entity-text">{{ entity.text }}</span>
                        <span class="entity-count">({{ entity.count }} mentions)</span>
                    </div>
                    
                    <div class="entity-documents">
                        {% for context in entity.contexts[:5] %}
                        <div class="entity-mention">
                            <a href="{{ base_url }}/documents/{{ context.document }}/">{{ context.document }}</a>
                            <span class="mention-context">{{ context.context }}</span>
                        </div>
                        {% endfor %}
                        {% if entity.contexts|length > 5 %}
                        <p class="more-mentions">... and {{ entity.contexts|length - 5 }} more mentions</p>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
        </div>
        
        <div class="no-results" id="noResults">
            No entities match your search criteria.
        </div>
        {% else %}
        <p>No entities have been extracted yet. Run <code>flatfish entities</code> to extract entities from transcriptions.</p>
        {% endif %}
    </div>
</main>

<footer>
    <div class="container">
    </div>
</footer>
{% endblock %}

{% block head %}
<style>
.entity-filter {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.entity-filter h3 {
    margin-bottom: 1rem;
    color: #1e293b;
}

.entity-search {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.entity-search:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.entity-type-filters {
    margin-top: 1rem;
}

.entity-type-filters label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.type-btn:hover {
    border-color: #2563eb;
}

.type-btn.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

.entity-item {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.entity-item.hidden {
    display: none;
}

.entity-type-group.hidden {
    display: none;
}

.entity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.entity-text {
    font-weight: 600;
    font-size: 1.1rem;
}

.entity-count {
    color: #64748b;
    font-size: 0.875rem;
}

.entity-documents {
    padding-left: 1rem;
    border-left: 3px solid #e2e8f0;
}

.entity-mention {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.entity-mention:last-child {
    border-bottom: none;
}

.entity-mention a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.entity-mention a:hover {
    text-decoration: underline;
}

.mention-context {
    display: block;
    color: #64748b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.more-mentions {
    color: #64748b;
    font-size: 0.875rem;
    font-style: italic;
    margin-top: 0.5rem;
}

.no-results {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    display: none;
}

.no-results.visible {
    display: block;
}
</style>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('entitySearch');
    const typeButtons = document.querySelectorAll('.type-btn');
    const entityGroups = document.querySelectorAll('.entity-type-group');
    const entityItems = document.querySelectorAll('.entity-item');
    const noResults = document.getElementById('noResults');
    
    let activeType = 'all';
    
    function filterEntities() {
        const searchTerm = searchInput.value.toLowerCase();
        let visibleCount = 0;
        
        entityGroups.forEach(group => {
            const type = group.dataset.type;
            const typeMatches = activeType === 'all' || type === activeType;
            
            if (!typeMatches) {
                group.classList.add('hidden');
                return;
            }
            
            const items = group.querySelectorAll('.entity-item');
            let groupHasVisible = false;
            
            items.forEach(item => {
                const text = item.dataset.text || '';
                const matchesSearch = !searchTerm || text.includes(searchTerm);
                
                if (matchesSearch) {
                    item.classList.remove('hidden');
                    groupHasVisible = true;
                    visibleCount++;
                } else {
                    item.classList.add('hidden');
                }
            });
            
            group.classList.toggle('hidden', !groupHasVisible);
        });
        
        if (noResults) {
            noResults.classList.toggle('visible', visibleCount === 0);
        }
    }
    
    searchInput.addEventListener('input', filterEntities);
    
    typeButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            typeButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            activeType = this.dataset.type;
            filterEntities();
        });
    });
});
</script>
{% endblock %}