{% extends "base.html" %}

{% block content %}
<section class="memory-section">
    <div class="section-header">
        <div>
            <h2>Memory</h2>
            <p class="section-desc">Memoire partagee entre tous les agents (knowledge graph).</p>
        </div>
        <div class="header-actions">
            <input type="text" id="search-input" class="input-field search-field" placeholder="Rechercher..." oninput="debounceSearch()">
            <button class="btn" onclick="openNewEntity()">+ Nouvelle entite</button>
        </div>
    </div>

    <div class="stats" id="stats">
        <span class="stat"><strong id="entity-count">0</strong> entites</span>
        <span class="stat"><strong id="relation-count">0</strong> relations</span>
    </div>

    <div class="memory-content">
        <div class="memory-panel">
            <h3>Entites</h3>
            <div id="entities-list" class="entity-list">
                <p class="empty">Chargement...</p>
            </div>
        </div>
        <div class="memory-panel">
            <h3>Relations</h3>
            <div id="relations-list" class="relation-list">
                <p class="empty">Chargement...</p>
            </div>
        </div>
    </div>
</section>

<!-- Modal Edition Entite -->
<div id="entity-modal" class="modal-overlay" style="display: none;">
    <div class="modal-box">
        <div class="modal-header">
            <h3 id="modal-title">Nouvelle entite</h3>
            <button class="modal-close-btn" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="entity-name">Nom</label>
                <input type="text" id="entity-name" class="form-input" placeholder="Nom de l'entite">
            </div>
            <div class="form-group">
                <label for="entity-type">Type</label>
                <select id="entity-type" class="form-input form-select">
                    <!-- Populated by JS -->
                </select>
            </div>

            <div class="form-group">
                <label>Observations</label>
                <div id="observations-container" class="list-container">
                    <!-- Populated by JS -->
                </div>
                <div class="add-row">
                    <input type="text" id="new-observation" class="form-input" placeholder="Ajouter une observation..." onkeypress="if(event.key==='Enter'){event.preventDefault();addObservation();}">
                    <button class="btn btn-small" onclick="addObservation()">+</button>
                </div>
            </div>

            <div class="form-group" id="relations-section" style="display: none;">
                <label>Relations</label>
                <div id="entity-relations" class="list-container">
                    <!-- Populated by JS -->
                </div>
                <button class="btn btn-small btn-secondary" onclick="openRelationModal()">+ Ajouter relation</button>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-danger" id="btn-delete-entity" onclick="deleteEntity()" style="display: none;">Supprimer</button>
            <div class="modal-footer-right">
                <button class="btn btn-secondary" onclick="closeModal()">Annuler</button>
                <button class="btn" onclick="saveEntity()">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Ajout Relation -->
<div id="relation-modal" class="modal-overlay" style="display: none;">
    <div class="modal-box modal-small">
        <div class="modal-header">
            <h3>Nouvelle relation</h3>
            <button class="modal-close-btn" onclick="closeRelationModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>De</label>
                <input type="text" id="relation-from" class="form-input" readonly style="background: var(--bg); cursor: not-allowed;">
            </div>
            <div class="form-group">
                <label for="relation-type-select">Type de relation</label>
                <select id="relation-type-select" class="form-input form-select">
                    <!-- Populated by JS -->
                </select>
                <input type="text" id="relation-type-custom" class="form-input" placeholder="Ou saisir un type personnalise..." style="margin-top: 0.5rem;">
            </div>
            <div class="form-group">
                <label for="relation-to">Vers</label>
                <select id="relation-to" class="form-input form-select">
                    <!-- Populated by JS -->
                </select>
            </div>
        </div>
        <div class="modal-footer">
            <div class="modal-footer-right">
                <button class="btn btn-secondary" onclick="closeRelationModal()">Annuler</button>
                <button class="btn" onclick="addRelation()">Ajouter</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    /* Layout */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .header-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .search-field {
        width: 180px;
    }
    .stats {
        display: flex;
        gap: 2rem;
        margin-bottom: 1rem;
        color: var(--muted);
    }
    .memory-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    @media (max-width: 900px) {
        .memory-content {
            grid-template-columns: 1fr;
        }
    }
    .memory-panel {
        background: var(--card);
        border: 1px solid var(--muted);
        border-radius: 8px;
        padding: 1rem;
        max-height: 60vh;
        overflow-y: auto;
    }
    .memory-panel h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--muted);
        color: var(--muted);
        font-size: 0.9rem;
    }

    /* Entity Cards */
    .entity-card {
        background: var(--bg);
        border: 1px solid var(--muted);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .entity-card:hover {
        border-color: var(--accent);
        background: var(--card);
    }
    .entity-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.25rem;
    }
    .entity-icon {
        font-size: 1.2rem;
    }
    .entity-name {
        font-weight: 600;
        color: var(--text);
    }
    .entity-type-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
        border-radius: 4px;
        color: white;
        margin-left: auto;
    }
    .entity-obs-count {
        color: var(--muted);
        font-size: 0.8rem;
    }

    /* Relation Cards */
    .relation-card {
        background: var(--bg);
        border: 1px solid var(--muted);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .relation-content {
        flex: 1;
        color: var(--text);
    }
    .relation-from, .relation-to {
        font-weight: 600;
    }
    .relation-type {
        color: var(--accent);
        font-style: italic;
        padding: 0 0.25rem;
    }
    .relation-delete-btn {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 1.2rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        transition: all 0.2s;
    }
    .relation-delete-btn:hover {
        color: var(--red);
        background: var(--bg);
    }

    /* Modal Overlay */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 1rem;
    }

    /* Modal Box */
    .modal-box {
        background: var(--card);
        border: 1px solid var(--muted);
        border-radius: 12px;
        width: 100%;
        max-width: 550px;
        max-height: 85vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }
    .modal-small {
        max-width: 400px;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--muted);
        background: var(--bg);
    }
    .modal-header h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text);
    }
    .modal-close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--muted);
        padding: 0;
        line-height: 1;
        transition: color 0.2s;
    }
    .modal-close-btn:hover {
        color: var(--text);
    }
    .modal-body {
        padding: 1.25rem;
        overflow-y: auto;
        flex: 1;
    }
    .modal-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--muted);
        background: var(--bg);
    }
    .modal-footer-right {
        display: flex;
        gap: 0.5rem;
        margin-left: auto;
    }

    /* Form Elements */
    .form-group {
        margin-bottom: 1.25rem;
    }
    .form-group:last-child {
        margin-bottom: 0;
    }
    .form-group label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 0.5rem;
    }
    .form-input {
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--muted);
        border-radius: 6px;
        padding: 0.6rem 0.75rem;
        color: var(--text);
        font-family: inherit;
        font-size: 0.95rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
    }
    .form-input::placeholder {
        color: var(--muted);
    }
    .form-select {
        cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        padding-right: 2rem;
    }

    /* List Container (observations, relations) */
    .list-container {
        background: var(--bg);
        border: 1px solid var(--muted);
        border-radius: 6px;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        max-height: 200px;
        overflow-y: auto;
    }
    .list-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 4px;
        transition: background 0.2s;
    }
    .list-item:hover {
        background: var(--card);
    }
    .list-item-text {
        flex: 1;
        font-size: 0.9rem;
        color: var(--text);
    }
    .list-item-delete {
        background: none;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 1rem;
        padding: 0.25rem;
        border-radius: 4px;
        transition: all 0.2s;
        opacity: 0;
    }
    .list-item:hover .list-item-delete {
        opacity: 1;
    }
    .list-item-delete:hover {
        color: var(--red);
        background: var(--bg);
    }
    .list-empty {
        color: var(--muted);
        font-style: italic;
        font-size: 0.85rem;
        padding: 0.5rem;
        text-align: center;
    }

    /* Add Row */
    .add-row {
        display: flex;
        gap: 0.5rem;
    }
    .add-row .form-input {
        flex: 1;
    }
</style>
<script>
    let memory = {entities: [], relations: []};
    let entityTypes = [];
    let relationTypes = [];
    let currentEntityName = null;
    let isNewEntity = false;
    let pendingObservations = [];
    let searchTimeout = null;

    async function fetchMemory() {
        try {
            const res = await fetch('/api/memory');
            memory = await res.json();
            renderMemory();
        } catch (e) {
            console.error('Erreur memory:', e);
            document.getElementById('entities-list').innerHTML = '<p class="empty">Erreur de chargement</p>';
            document.getElementById('relations-list').innerHTML = '<p class="empty">Erreur de chargement</p>';
        }
    }

    async function fetchTypes() {
        try {
            const res = await fetch('/api/memory/types');
            const data = await res.json();
            entityTypes = data.entityTypes || [];
            relationTypes = data.relationTypes || [];
            populateTypeSelects();
        } catch (e) {
            console.error('Erreur types:', e);
            // Fallback si l'API ne répond pas
            entityTypes = [
                {id: "personne", icon: "👤", color: "#6366f1"},
                {id: "entreprise", icon: "🏢", color: "#8b5cf6"},
                {id: "projet", icon: "📁", color: "#ec4899"},
                {id: "lieu", icon: "📍", color: "#14b8a6"},
                {id: "concept", icon: "💡", color: "#f59e0b"},
                {id: "autre", icon: "📎", color: "#6b7280"},
            ];
            relationTypes = ["travaille avec", "travaille chez", "connait", "famille de", "client de", "partenaire de"];
            populateTypeSelects();
        }
    }

    function populateTypeSelects() {
        const typeSelect = document.getElementById('entity-type');
        typeSelect.innerHTML = entityTypes.map(t =>
            `<option value="${t.id}">${t.icon} ${t.id}</option>`
        ).join('');

        const relTypeSelect = document.getElementById('relation-type-select');
        relTypeSelect.innerHTML = '<option value="">-- Choisir un type --</option>' +
            relationTypes.map(t => `<option value="${t}">${t}</option>`).join('');
    }

    async function searchMemory(query) {
        if (!query) {
            await fetchMemory();
            return;
        }
        try {
            const res = await fetch('/api/memory/search?q=' + encodeURIComponent(query));
            memory = await res.json();
            renderMemory();
        } catch (e) {
            console.error('Erreur search:', e);
        }
    }

    function debounceSearch() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            const query = document.getElementById('search-input').value.trim();
            searchMemory(query);
        }, 300);
    }

    function getTypeInfo(typeId) {
        return entityTypes.find(t => t.id === typeId) || {icon: '📎', color: '#6b7280'};
    }

    function escapeHtml(str) {
        const div = document.createElement('div');
        div.textContent = str || '';
        return div.innerHTML;
    }

    function escapeAttr(str) {
        return (str || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
    }

    function renderMemory() {
        document.getElementById('entity-count').textContent = memory.entities.length;
        document.getElementById('relation-count').textContent = memory.relations.length;

        const entitiesList = document.getElementById('entities-list');
        if (memory.entities.length === 0) {
            entitiesList.innerHTML = '<p class="empty">Aucune entite. Cliquez sur "+ Nouvelle entite".</p>';
        } else {
            entitiesList.innerHTML = memory.entities.map(e => {
                const typeInfo = getTypeInfo(e.entityType);
                return `
                    <div class="entity-card" onclick="editEntity('${escapeAttr(e.name)}')">
                        <div class="entity-header">
                            <span class="entity-icon">${typeInfo.icon}</span>
                            <span class="entity-name">${escapeHtml(e.name)}</span>
                            <span class="entity-type-badge" style="background: ${typeInfo.color}">${e.entityType}</span>
                        </div>
                        <div class="entity-obs-count">${e.observations.length} observation(s)</div>
                    </div>
                `;
            }).join('');
        }

        const relationsList = document.getElementById('relations-list');
        if (memory.relations.length === 0) {
            relationsList.innerHTML = '<p class="empty">Aucune relation.</p>';
        } else {
            relationsList.innerHTML = memory.relations.map(r => `
                <div class="relation-card">
                    <div class="relation-content">
                        <span class="relation-from">${escapeHtml(r.from)}</span>
                        <span class="relation-type">${escapeHtml(r.relationType)}</span>
                        <span class="relation-to">${escapeHtml(r.to)}</span>
                    </div>
                    <button class="relation-delete-btn" onclick="event.stopPropagation(); deleteRelationFromList('${escapeAttr(r.from)}', '${escapeAttr(r.to)}', '${escapeAttr(r.relationType)}')" title="Supprimer">&times;</button>
                </div>
            `).join('');
        }
    }

    function openNewEntity() {
        isNewEntity = true;
        currentEntityName = null;
        pendingObservations = [];

        document.getElementById('modal-title').textContent = 'Nouvelle entite';
        document.getElementById('entity-name').value = '';
        document.getElementById('entity-type').value = entityTypes[0]?.id || 'autre';
        document.getElementById('btn-delete-entity').style.display = 'none';
        document.getElementById('relations-section').style.display = 'none';

        renderObservations();
        document.getElementById('entity-modal').style.display = 'flex';
        setTimeout(() => document.getElementById('entity-name').focus(), 100);
    }

    async function editEntity(name) {
        try {
            const res = await fetch(`/api/memory/${encodeURIComponent(name)}`);
            const data = await res.json();

            if (!data.ok) {
                alert('Entite non trouvee');
                return;
            }

            isNewEntity = false;
            currentEntityName = name;
            const entity = data.entity;
            pendingObservations = [...entity.observations];

            document.getElementById('modal-title').textContent = 'Modifier: ' + name;
            document.getElementById('entity-name').value = entity.name;
            document.getElementById('entity-type').value = entity.entityType;
            document.getElementById('btn-delete-entity').style.display = 'block';
            document.getElementById('relations-section').style.display = 'block';

            renderObservations();
            renderEntityRelations(data.relations);

            document.getElementById('entity-modal').style.display = 'flex';
        } catch (e) {
            console.error('Erreur edit:', e);
            alert('Erreur de chargement');
        }
    }

    function renderObservations() {
        const container = document.getElementById('observations-container');
        if (pendingObservations.length === 0) {
            container.innerHTML = '<p class="list-empty">Aucune observation</p>';
        } else {
            container.innerHTML = pendingObservations.map((obs, i) => `
                <div class="list-item">
                    <span class="list-item-text">${escapeHtml(obs)}</span>
                    <button class="list-item-delete" onclick="removeObservation(${i})" title="Supprimer">&times;</button>
                </div>
            `).join('');
        }
    }

    function addObservation() {
        const input = document.getElementById('new-observation');
        const obs = input.value.trim();
        if (!obs) return;

        pendingObservations.push(obs);
        renderObservations();
        input.value = '';
        input.focus();
    }

    function removeObservation(index) {
        pendingObservations.splice(index, 1);
        renderObservations();
    }

    function renderEntityRelations(relations) {
        const container = document.getElementById('entity-relations');
        if (!relations || relations.length === 0) {
            container.innerHTML = '<p class="list-empty">Aucune relation</p>';
        } else {
            container.innerHTML = relations.map(r => {
                const direction = r.from === currentEntityName ? 'vers' : 'de';
                const other = r.from === currentEntityName ? r.to : r.from;
                return `
                    <div class="list-item">
                        <span class="list-item-text"><strong>${r.relationType}</strong> ${direction} <em>${escapeHtml(other)}</em></span>
                        <button class="list-item-delete" onclick="deleteRelationInline('${escapeAttr(r.from)}', '${escapeAttr(r.to)}', '${escapeAttr(r.relationType)}')">&times;</button>
                    </div>
                `;
            }).join('');
        }
    }

    async function saveEntity() {
        const name = document.getElementById('entity-name').value.trim();
        const entityType = document.getElementById('entity-type').value;

        if (!name) {
            alert('Le nom est requis');
            document.getElementById('entity-name').focus();
            return;
        }

        try {
            if (isNewEntity) {
                const res = await fetch('/api/memory', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        name: name,
                        entityType: entityType,
                        observations: pendingObservations
                    })
                });
                const result = await res.json();
                if (!result.ok) {
                    alert('Erreur: ' + (result.error || 'Echec creation'));
                    return;
                }
            } else {
                // Update entity
                const res = await fetch(`/api/memory/${encodeURIComponent(currentEntityName)}`, {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        name: name,
                        entityType: entityType
                    })
                });
                const result = await res.json();
                if (!result.ok) {
                    alert('Erreur: ' + (result.error || 'Echec mise a jour'));
                    return;
                }

                // Sync observations
                const entityRes = await fetch(`/api/memory/${encodeURIComponent(name)}`);
                const entityData = await entityRes.json();
                if (entityData.ok) {
                    const currentObs = entityData.entity.observations;
                    // Remove deleted observations
                    for (const obs of currentObs) {
                        if (!pendingObservations.includes(obs)) {
                            await fetch(`/api/memory/${encodeURIComponent(name)}/observations`, {
                                method: 'DELETE',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({observation: obs})
                            });
                        }
                    }
                    // Add new observations
                    for (const obs of pendingObservations) {
                        if (!currentObs.includes(obs)) {
                            await fetch(`/api/memory/${encodeURIComponent(name)}/observations`, {
                                method: 'POST',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({observation: obs})
                            });
                        }
                    }
                }
            }

            closeModal();
            await fetchMemory();
        } catch (e) {
            console.error('Erreur save:', e);
            alert('Erreur de sauvegarde');
        }
    }

    async function deleteEntity() {
        if (!currentEntityName) return;
        if (!confirm(`Supprimer "${currentEntityName}" et toutes ses relations ?`)) return;

        try {
            const res = await fetch(`/api/memory/${encodeURIComponent(currentEntityName)}`, {
                method: 'DELETE',
            });
            const result = await res.json();

            if (result.ok) {
                closeModal();
                await fetchMemory();
            } else {
                alert('Erreur: ' + (result.error || 'Echec suppression'));
            }
        } catch (e) {
            console.error('Erreur delete:', e);
            alert('Erreur de suppression');
        }
    }

    async function deleteRelationInline(from, to, relationType) {
        if (!confirm('Supprimer cette relation ?')) return;

        try {
            const res = await fetch('/api/memory/relations', {
                method: 'DELETE',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({from, to, relationType})
            });
            const result = await res.json();

            if (result.ok) {
                await editEntity(currentEntityName);
                await fetchMemory();
            } else {
                alert('Erreur: ' + (result.error || 'Echec suppression'));
            }
        } catch (e) {
            console.error('Erreur delete relation:', e);
        }
    }

    async function deleteRelationFromList(from, to, relationType) {
        if (!confirm('Supprimer cette relation ?')) return;

        try {
            const res = await fetch('/api/memory/relations', {
                method: 'DELETE',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({from, to, relationType})
            });
            const result = await res.json();

            if (result.ok) {
                await fetchMemory();
            } else {
                alert('Erreur: ' + (result.error || 'Echec suppression'));
            }
        } catch (e) {
            console.error('Erreur delete relation:', e);
        }
    }

    function openRelationModal() {
        document.getElementById('relation-from').value = currentEntityName;
        document.getElementById('relation-type-select').value = '';
        document.getElementById('relation-type-custom').value = '';

        const toSelect = document.getElementById('relation-to');
        toSelect.innerHTML = '<option value="">-- Choisir une entite --</option>' +
            memory.entities
                .filter(e => e.name !== currentEntityName)
                .map(e => `<option value="${escapeAttr(e.name)}">${escapeHtml(e.name)}</option>`)
                .join('');

        document.getElementById('relation-modal').style.display = 'flex';
    }

    function closeRelationModal() {
        document.getElementById('relation-modal').style.display = 'none';
    }

    async function addRelation() {
        const from = document.getElementById('relation-from').value;
        const to = document.getElementById('relation-to').value;
        let relationType = document.getElementById('relation-type-select').value;

        const custom = document.getElementById('relation-type-custom').value.trim();
        if (custom) relationType = custom;

        if (!to || !relationType) {
            alert('Choisissez une relation et une entite cible');
            return;
        }

        try {
            const res = await fetch('/api/memory/relations', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({from, to, relationType})
            });
            const result = await res.json();

            if (result.ok) {
                closeRelationModal();
                await editEntity(currentEntityName);
                await fetchMemory();
            } else {
                alert('Erreur: ' + (result.error || 'Echec creation'));
            }
        } catch (e) {
            console.error('Erreur add relation:', e);
            alert('Erreur de creation');
        }
    }

    function closeModal() {
        document.getElementById('entity-modal').style.display = 'none';
        currentEntityName = null;
        isNewEntity = false;
        pendingObservations = [];
    }

    // Close modals on escape
    document.addEventListener('keydown', e => {
        if (e.key === 'Escape') {
            if (document.getElementById('relation-modal').style.display === 'flex') {
                closeRelationModal();
            } else if (document.getElementById('entity-modal').style.display === 'flex') {
                closeModal();
            }
        }
    });

    // Close modals on background click
    document.getElementById('entity-modal').addEventListener('click', e => {
        if (e.target.classList.contains('modal-overlay')) closeModal();
    });
    document.getElementById('relation-modal').addEventListener('click', e => {
        if (e.target.classList.contains('modal-overlay')) closeRelationModal();
    });

    // Init
    fetchTypes().then(() => fetchMemory());
</script>
{% endblock %}