{% extends "base.html" %}

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

{% block content %}
<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 ~/my-vault"
               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>

<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-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();
            }
        });
    });
</script>
{% endblock %}