{% extends "base.html" %}

{% block title %}Vaults - Talkpipe Vault{% endblock %}

{% block content %}
{% if confirm_vault_path %}
<div class="search-box vault-confirm-box">
    <h3>This folder already contains files &mdash; create a vault here?</h3>
    <p>
        <strong>{{ confirm_vault_path }}</strong> holds
        {{ confirm_entry_count }} item{{ 's' if confirm_entry_count != 1 }}
        that {{ 'are' if confirm_entry_count != 1 else 'is' }} not vault data.
        A vault is the folder that stores the search index &mdash; not the
        documents you want to search. Creating a vault here will write index
        files alongside your existing files, and deleting the vault later
        would delete this entire folder.
    </p>
    <p>
        To make these documents searchable, create the vault in a new, empty
        folder instead, then index this folder from the Add Documents page.
    </p>
    <div class="vault-confirm-actions">
        <a href="/vaults" class="btn-secondary vault-confirm-cancel">Choose a different folder</a>
        <form method="post" action="/vaults/open">
            <input type="hidden" name="new_vault_path" value="{{ confirm_vault_path }}">
            <input type="hidden" name="confirm_non_vault" value="yes">
            <button type="submit" class="btn-danger">Create the vault here anyway</button>
        </form>
    </div>
</div>
{% endif %}
<div class="search-box">
    <h2>Create or Choose a Vault</h2>
    <p class="panel-hint">
        A vault is a folder holding the searchable index of your documents.
        Click <strong>Browse</strong> to pick an existing vault folder or a
        place for a new one &mdash; an empty or new folder becomes a new vault.
    </p>
    <form method="post" action="/vaults/open" id="open-vault-form">
        <input type="text" name="new_vault_path" id="vault-path-input"
               placeholder="No folder chosen yet &mdash; click Browse, or type a path like {{ vault_example }}"
               value="" required autofocus>
        <button type="button" id="vault-browse-btn" class="btn-secondary">Browse&hellip;</button>
        <button type="submit" id="open-vault-btn">Open or Create</button>
    </form>
    <div id="vault-open-progress" class="search-loading" style="display: none">
        <div class="spinner"></div>
        <span>Opening vault&hellip; first use may download the embedding model,
              which can take a few minutes.</span>
    </div>
</div>

<div class="search-box">
    <h3>Recent Vaults</h3>
    {% if recent_vaults %}
    <ul class="vault-list">
        {% for recent in recent_vaults %}
        <li class="vault-entry">
            <span class="vault-entry-path">
                {{ recent }}
                {% if recent == vault_path %}<span class="vault-entry-current">current</span>{% endif %}
            </span>
            {% if recent != vault_path %}
            <span class="vault-entry-actions">
                <form method="post" action="/vaults/open">
                    <input type="hidden" name="new_vault_path" value="{{ recent }}">
                    <button type="submit" class="btn-secondary">Open</button>
                </form>
                <form method="post" action="/vaults/delete" class="delete-vault-form"
                      data-vault-path="{{ recent }}">
                    <input type="hidden" name="vault_path" value="{{ recent }}">
                    <input type="hidden" name="confirm" value="delete">
                    <button type="submit" class="btn-danger">Delete</button>
                </form>
            </span>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="panel-hint">No vaults opened yet — create your first one above.</p>
    {% endif %}
</div>

{% include "_dir_picker.html" %}
<style>
    .vault-confirm-box {
        border: 1px solid var(--danger-border);
        background: var(--danger-bg);
    }
    .vault-confirm-box h3 {
        color: var(--danger-ink);
    }
    .vault-confirm-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .vault-confirm-cancel {
        display: inline-block;
        text-decoration: none;
    }
    .vault-entry-actions {
        display: flex;
        flex-shrink: 0;
        gap: 8px;
    }
    .btn-danger {
        background: var(--danger-bg);
        border: 1px solid var(--danger-border);
        color: var(--danger-ink);
    }
    .btn-danger:hover {
        background: var(--danger);
        border-color: var(--danger);
        color: #fff;
    }
</style>
<script>
    attachDirPicker('vault-browse-btn', 'vault-path-input', { allowNewFolder: true });
    requireValue('vault-path-input', 'open-vault-btn');

    // Confirm before the destructive, irreversible vault deletion.
    document.querySelectorAll('.delete-vault-form').forEach(function (form) {
        form.addEventListener('submit', function (event) {
            const path = form.getAttribute('data-vault-path');
            const ok = window.confirm(
                'Permanently delete this vault and its index files from disk?\n\n' +
                path + '\n\nThis cannot be undone.'
            );
            if (!ok) {
                event.preventDefault();
            }
        });
    });

    // Opening a vault can block on first-time setup (e.g. downloading the
    // embedding model), so show progress and stop double submits while the
    // browser waits for the redirect.
    document.querySelectorAll('form[action="/vaults/open"]').forEach(function (form) {
        form.addEventListener('submit', function () {
            document.getElementById('vault-open-progress').style.display = '';
            document.querySelectorAll(
                'form[action="/vaults/open"] button[type="submit"]'
            ).forEach(function (btn) { btn.disabled = true; });
        });
    });
</script>
{% endblock %}