{{define "items_content"}}
<div class="stats-grid" id="stats">
    <div class="stat-card">
        <div class="stat-value" id="total-count">-</div>
        <div class="stat-label">Total Items</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="parts-count">-</div>
        <div class="stat-label">Parts</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="assemblies-count">-</div>
        <div class="stat-label">Assemblies</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="documents-count">-</div>
        <div class="stat-label">Documents</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Items</h2>
        <div class="header-actions">
            <!-- Layout Toggle -->
            <div class="layout-toggle">
                <button
                    class="layout-btn active"
                    data-layout="vertical"
                    onclick="setLayout('vertical')"
                    title="Vertical layout"
                >
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect x="3" y="3" width="18" height="7" rx="1" />
                        <rect x="3" y="14" width="18" height="7" rx="1" />
                    </svg>
                </button>
                <button
                    class="layout-btn"
                    data-layout="horizontal"
                    onclick="setLayout('horizontal')"
                    title="Horizontal layout"
                >
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <rect x="3" y="3" width="8" height="18" rx="1" />
                        <rect x="13" y="3" width="8" height="18" rx="1" />
                    </svg>
                </button>
            </div>
            <!-- CSV Import/Export -->
            <div class="csv-actions">
                <button
                    class="btn btn-secondary"
                    onclick="exportCSV()"
                    title="Export to CSV"
                >
                    <svg
                        viewBox="0 0 24 24"
                        width="16"
                        height="16"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                        ></path>
                        <polyline points="7 10 12 15 17 10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    Export
                </button>
                <button
                    class="btn btn-secondary"
                    onclick="openImportModal()"
                    title="Import from CSV"
                >
                    <svg
                        viewBox="0 0 24 24"
                        width="16"
                        height="16"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <path
                            d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
                        ></path>
                        <polyline points="17 8 12 3 7 8"></polyline>
                        <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                    Import
                </button>
            </div>
            <button class="btn btn-primary" onclick="openCreateModal()">
                + New Item
            </button>
        </div>
    </div>

    <div class="search-bar">
        <div class="search-input-container">
            <input
                type="text"
                class="search-input"
                id="search-input"
                placeholder="Search by part number or description..."
                onkeyup="debounceSearch()"
                onfocus="showSearchHelp()"
                onblur="hideSearchHelp()"
            />
            <div class="search-help" id="search-help">
                <div class="search-help-title">Search Tips</div>
                <div class="search-help-item">
                    <code>3DX15</code> - Search by project code
                </div>
                <div class="search-help-item">
                    <code>A01</code> - Search by category
                </div>
                <div class="search-help-item">
                    <code>3DX15-A01</code> - Project + category
                </div>
                <div class="search-help-item">
                    <code>0001</code> - Search by sequence
                </div>
                <div class="search-help-item">
                    <code>bearing</code> - Search description
                </div>
            </div>
        </div>
        <select id="project-filter" onchange="loadItems()">
            <option value="">All Projects</option>
        </select>
        <select id="type-filter" onchange="loadItems()">
            <option value="">All Types</option>
            <option value="part">Parts</option>
            <option value="assembly">Assemblies</option>
            <option value="document">Documents</option>
            <option value="tooling">Tooling</option>
        </select>
        <button class="btn btn-secondary" onclick="loadItems()">Refresh</button>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Part Number</th>
                    <th>Type</th>
                    <th>Description</th>
                    <th>Revision</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="items-table">
                <tr>
                    <td colspan="6">
                        <div class="loading">
                            <div class="spinner"></div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="pagination" id="pagination"></div>
</div>

<!-- Create Item Modal -->
<div class="modal-overlay" id="create-modal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Create New Item</h3>
            <button class="modal-close" onclick="closeCreateModal()">
                &times;
            </button>
        </div>
        <form id="create-form" onsubmit="createItem(event)">
            <!-- Item Templates -->
            <div class="form-group">
                <label class="form-label">Quick Start Template</label>
                <select
                    class="form-input"
                    id="template"
                    onchange="applyTemplate()"
                >
                    <option value="">Start from scratch...</option>
                    <option value="machined-part">
                        Machined Part (M-category)
                    </option>
                    <option value="printed-part">
                        3D Printed Part (F-category)
                    </option>
                    <option value="fastener">Fastener (R-category)</option>
                    <option value="electronics">
                        Electronics (E-category)
                    </option>
                    <option value="assembly">Assembly (A-category)</option>
                    <option value="purchased">
                        Purchased/COTS (S-category)
                    </option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Project Code</label>
                <select class="form-input" id="project" required>
                    <option value="">Select project...</option>
                </select>
                <input
                    type="text"
                    class="form-input"
                    id="project-new"
                    maxlength="5"
                    pattern="[A-Za-z0-9]{5}"
                    placeholder="Or enter new project code (5 chars)"
                    style="margin-top: 0.5rem"
                />
            </div>
            <div class="form-group">
                <label class="form-label">Category</label>
                <select class="form-input" id="category" required>
                    <option value="">Select category...</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <input
                    type="text"
                    class="form-input"
                    id="description"
                    placeholder="Item description"
                />
            </div>
            <div class="form-actions">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeCreateModal()"
                >
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary">
                    Create Item
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Item Modal -->
<div class="modal-overlay" id="edit-modal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Edit Item</h3>
            <button class="modal-close" onclick="closeEditModal()">
                &times;
            </button>
        </div>
        <form id="edit-form" onsubmit="saveItem(event)">
            <input type="hidden" id="edit-original-pn" />
            <div class="form-group">
                <label class="form-label">Part Number</label>
                <input
                    type="text"
                    class="form-input"
                    id="edit-part-number"
                    required
                />
            </div>
            <div class="form-group">
                <label class="form-label">Type</label>
                <select class="form-input" id="edit-type" required>
                    <option value="part">Part</option>
                    <option value="assembly">Assembly</option>
                    <option value="document">Document</option>
                    <option value="tooling">Tooling</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <input
                    type="text"
                    class="form-input"
                    id="edit-description"
                    placeholder="Item description"
                />
            </div>
            <div class="form-actions">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeEditModal()"
                >
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Item Detail Modal -->
<div class="modal-overlay" id="detail-modal">
    <div class="modal" style="max-width: 800px">
        <div class="modal-header">
            <h3 class="modal-title" id="detail-title">Item Details</h3>
            <button class="modal-close" onclick="closeDetailModal()">
                &times;
            </button>
        </div>

        <!-- Tab Navigation -->
        <div class="detail-tabs">
            <button
                class="tab-btn active"
                data-tab="info"
                onclick="switchDetailTab('info')"
            >
                Info
            </button>
            <button
                class="tab-btn"
                data-tab="properties"
                onclick="switchDetailTab('properties')"
            >
                Properties
            </button>
            <button
                class="tab-btn"
                data-tab="revisions"
                onclick="switchDetailTab('revisions')"
            >
                Revisions
            </button>
        </div>

        <!-- Tab Content -->
        <div class="tab-content" id="tab-info"></div>
        <div
            class="tab-content"
            id="tab-properties"
            style="display: none"
        ></div>
        <div class="tab-content" id="tab-revisions" style="display: none"></div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal-overlay" id="delete-modal">
    <div class="modal" style="max-width: 400px">
        <div class="modal-header">
            <h3 class="modal-title">Delete Item</h3>
            <button class="modal-close" onclick="closeDeleteModal()">
                &times;
            </button>
        </div>
        <div style="margin-bottom: 1.5rem">
            <p>
                Are you sure you want to permanently delete
                <strong id="delete-part-number"></strong>?
            </p>
            <p style="color: var(--ctp-red); margin-top: 0.5rem">
                This action cannot be undone.
            </p>
        </div>
        <div class="form-actions">
            <button
                type="button"
                class="btn btn-secondary"
                onclick="closeDeleteModal()"
            >
                Cancel
            </button>
            <button
                type="button"
                class="btn btn-primary"
                style="background-color: var(--ctp-red)"
                onclick="confirmDelete()"
            >
                Delete
            </button>
        </div>
    </div>
</div>

<!-- CSV Import Modal -->
<div class="modal-overlay" id="import-modal">
    <div class="modal" style="max-width: 600px">
        <div class="modal-header">
            <h3 class="modal-title">Import Items from CSV</h3>
            <button class="modal-close" onclick="closeImportModal()">
                &times;
            </button>
        </div>
        <form id="import-form" onsubmit="importCSV(event)">
            <div class="import-instructions">
                <p>Upload a CSV file to bulk import items. Required columns:</p>
                <ul>
                    <li><code>project</code> - 5-character project code</li>
                    <li>
                        <code>category</code> - Category code (e.g., F01, A01)
                    </li>
                </ul>
                <p>
                    Optional columns: <code>description</code>,
                    <code>part_number</code>, and any property columns.
                </p>
                <a href="/api/items/template.csv" class="template-link"
                    >Download CSV Template</a
                >
            </div>
            <div class="form-group">
                <label class="form-label">CSV File</label>
                <div class="file-input-container">
                    <input
                        type="file"
                        class="form-input"
                        id="import-file"
                        accept=".csv,text/csv"
                        required
                        onchange="updateFileName(this)"
                    />
                    <div class="file-input-label" id="file-label">
                        Choose a file or drag it here
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="import-dry-run" checked />
                    <span>Dry run (validate without creating items)</span>
                </label>
            </div>
            <div
                id="import-results"
                class="import-results"
                style="display: none"
            ></div>
            <div class="form-actions">
                <button
                    type="button"
                    class="btn btn-secondary"
                    onclick="closeImportModal()"
                >
                    Cancel
                </button>
                <button type="submit" class="btn btn-primary" id="import-btn">
                    Validate
                </button>
            </div>
        </form>
    </div>
</div>
{{end}} {{define "items_scripts"}}
<style>
    /* CSV Import/Export Styles */
    .csv-actions {
        display: flex;
        gap: 0.5rem;
    }
    .csv-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    .csv-actions .btn svg {
        flex-shrink: 0;
    }
    .import-instructions {
        background: var(--ctp-surface0);
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1.5rem;
        font-size: 0.9rem;
    }
    .import-instructions p {
        margin: 0 0 0.5rem 0;
        color: var(--ctp-subtext1);
    }
    .import-instructions ul {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
    }
    .import-instructions li {
        color: var(--ctp-subtext0);
        margin: 0.25rem 0;
    }
    .import-instructions code {
        background: var(--ctp-surface1);
        padding: 0.1rem 0.4rem;
        border-radius: 0.25rem;
        color: var(--ctp-peach);
        font-family: "JetBrains Mono", monospace;
        font-size: 0.85rem;
    }
    .template-link {
        display: inline-block;
        margin-top: 0.75rem;
        color: var(--ctp-blue);
        text-decoration: none;
        font-weight: 500;
    }
    .template-link:hover {
        text-decoration: underline;
    }
    .file-input-container {
        position: relative;
        border: 2px dashed var(--ctp-surface2);
        border-radius: 0.5rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .file-input-container:hover {
        border-color: var(--ctp-mauve);
        background: var(--ctp-surface0);
    }
    .file-input-container input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }
    .file-input-label {
        color: var(--ctp-subtext0);
        font-size: 0.9rem;
    }
    .file-input-label.has-file {
        color: var(--ctp-green);
        font-weight: 500;
    }
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--ctp-subtext1);
    }
    .checkbox-label input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--ctp-mauve);
    }
    .import-results {
        background: var(--ctp-surface0);
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 1rem 0;
        max-height: 300px;
        overflow-y: auto;
    }
    .import-results h4 {
        margin: 0 0 0.75rem 0;
        color: var(--ctp-text);
        font-size: 0.95rem;
    }
    .import-results.success h4 {
        color: var(--ctp-green);
    }
    .import-results.error h4 {
        color: var(--ctp-red);
    }
    .import-results.warning h4 {
        color: var(--ctp-yellow);
    }
    .import-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    .import-stat {
        background: var(--ctp-base);
        padding: 0.75rem;
        border-radius: 0.375rem;
        text-align: center;
    }
    .import-stat-value {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--ctp-text);
    }
    .import-stat-value.success {
        color: var(--ctp-green);
    }
    .import-stat-value.error {
        color: var(--ctp-red);
    }
    .import-stat-label {
        font-size: 0.75rem;
        color: var(--ctp-subtext0);
        margin-top: 0.25rem;
    }
    .import-errors {
        margin-top: 1rem;
    }
    .import-error-item {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--ctp-base);
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
        font-size: 0.85rem;
    }
    .import-error-row {
        color: var(--ctp-red);
        font-weight: 600;
        min-width: 3rem;
    }
    .import-error-msg {
        color: var(--ctp-subtext1);
    }
    .import-created {
        margin-top: 1rem;
    }
    .import-created-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .import-created-item {
        background: var(--ctp-surface1);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-family: "JetBrains Mono", monospace;
        font-size: 0.8rem;
        color: var(--ctp-green);
    }

    .part-number-container {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .copy-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.25rem;
        color: var(--ctp-subtext0);
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
    }
    .copy-btn:hover {
        background: var(--ctp-surface1);
        color: var(--ctp-text);
    }
    .copy-btn.copied {
        color: var(--ctp-green);
    }
    .copy-btn svg {
        width: 1rem;
        height: 1rem;
    }
    /* Search help dropdown */
    .search-input-container {
        position: relative;
        flex: 1;
    }
    .search-input-container .search-input {
        width: 100%;
    }
    .search-help {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--ctp-surface0);
        border: 1px solid var(--ctp-surface2);
        border-radius: 0.5rem;
        padding: 0.75rem;
        margin-top: 0.25rem;
        z-index: 100;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .search-help.visible {
        display: block;
    }
    .search-help-title {
        font-weight: 600;
        color: var(--ctp-mauve);
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
    }
    .search-help-item {
        font-size: 0.8rem;
        color: var(--ctp-subtext1);
        padding: 0.25rem 0;
    }
    .search-help-item code {
        background: var(--ctp-surface1);
        padding: 0.1rem 0.4rem;
        border-radius: 0.25rem;
        color: var(--ctp-peach);
        font-family: "JetBrains Mono", monospace;
    }
    /* File info section in detail modal */
    .file-info {
        background: var(--ctp-surface1);
        border-radius: 0.5rem;
        padding: 1rem;
        margin: 1rem 0;
    }
    .file-info-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        color: var(--ctp-mauve);
        font-weight: 600;
    }
    .file-info-header svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    .file-info-row {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        font-size: 0.9rem;
    }
    .file-info-label {
        color: var(--ctp-subtext0);
    }
    .file-info-value {
        color: var(--ctp-text);
        font-family: "JetBrains Mono", monospace;
    }
    .download-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        background: var(--ctp-surface2);
        color: var(--ctp-text);
        border: none;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background 0.2s ease;
    }
    .download-btn:hover {
        background: var(--ctp-overlay0);
    }
    .download-btn svg {
        width: 1rem;
        height: 1rem;
    }
    .no-file {
        color: var(--ctp-subtext0);
        font-style: italic;
        font-size: 0.9rem;
    }

    /* Layout Toggle */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .layout-toggle {
        display: flex;
        background: var(--ctp-surface1);
        border-radius: 0.5rem;
        padding: 0.25rem;
    }
    .layout-btn {
        background: transparent;
        border: none;
        color: var(--ctp-subtext0);
        padding: 0.4rem;
        cursor: pointer;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .layout-btn:hover {
        color: var(--ctp-text);
    }
    .layout-btn.active {
        background: var(--ctp-mauve);
        color: var(--ctp-crust);
    }
    @media (max-width: 1024px) {
        .layout-toggle {
            display: none;
        }
    }

    /* Detail Modal Tabs */
    .detail-tabs {
        display: flex;
        gap: 0.25rem;
        border-bottom: 1px solid var(--ctp-surface1);
        margin-bottom: 1rem;
        padding-bottom: 0;
    }
    .tab-btn {
        background: transparent;
        border: none;
        color: var(--ctp-subtext0);
        padding: 0.75rem 1.25rem;
        cursor: pointer;
        border-radius: 0.5rem 0.5rem 0 0;
        transition: all 0.2s;
        font-weight: 500;
        font-size: 0.9rem;
    }
    .tab-btn:hover {
        color: var(--ctp-text);
        background: var(--ctp-surface1);
    }
    .tab-btn.active {
        color: var(--ctp-mauve);
        background: var(--ctp-surface1);
    }
    .tab-content {
        min-height: 200px;
    }

    /* Properties Editor */
    .properties-editor {
        padding: 0.5rem 0;
    }
    .properties-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .properties-header h4 {
        color: var(--ctp-subtext1);
        font-size: 0.9rem;
        font-weight: 600;
    }
    .properties-mode-toggle {
        display: flex;
        background: var(--ctp-base);
        border-radius: 0.5rem;
        padding: 0.2rem;
    }
    .mode-btn {
        background: transparent;
        border: none;
        color: var(--ctp-subtext0);
        padding: 0.35rem 0.75rem;
        cursor: pointer;
        border-radius: 0.375rem;
        font-size: 0.8rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    .mode-btn:hover {
        color: var(--ctp-text);
    }
    .mode-btn.active {
        background: var(--ctp-mauve);
        color: var(--ctp-crust);
    }
    .props-list {
        margin-bottom: 0.75rem;
    }
    .prop-row {
        display: grid;
        grid-template-columns: 1fr 100px 2fr 36px;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        align-items: center;
    }
    .prop-key,
    .prop-value,
    .prop-type {
        padding: 0.5rem 0.75rem;
        background: var(--ctp-base);
        border: 1px solid var(--ctp-surface1);
        border-radius: 0.375rem;
        color: var(--ctp-text);
        font-size: 0.9rem;
    }
    .prop-key:focus,
    .prop-value:focus,
    .prop-type:focus {
        outline: none;
        border-color: var(--ctp-mauve);
    }
    .prop-type {
        padding: 0.5rem;
    }
    .prop-remove {
        background: var(--ctp-surface1);
        border: none;
        color: var(--ctp-red);
        width: 32px;
        height: 32px;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    .prop-remove:hover {
        background: var(--ctp-red);
        color: var(--ctp-crust);
    }
    .add-prop-btn {
        background: var(--ctp-surface1);
        border: 1px dashed var(--ctp-surface2);
        color: var(--ctp-subtext0);
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        cursor: pointer;
        font-size: 0.85rem;
        width: 100%;
        transition: all 0.2s;
    }
    .add-prop-btn:hover {
        background: var(--ctp-surface2);
        color: var(--ctp-text);
        border-color: var(--ctp-overlay0);
    }
    .json-editor {
        width: 100%;
        min-height: 250px;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 0.85rem;
        background: var(--ctp-base);
        border: 1px solid var(--ctp-surface1);
        border-radius: 0.5rem;
        color: var(--ctp-text);
        padding: 1rem;
        resize: vertical;
        line-height: 1.5;
    }
    .json-editor:focus {
        outline: none;
        border-color: var(--ctp-mauve);
    }
    .json-validation {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: var(--ctp-red);
    }
    .json-validation.valid {
        color: var(--ctp-green);
    }
    .props-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--ctp-surface1);
    }
    .props-notice {
        font-size: 0.8rem;
        color: var(--ctp-subtext0);
        font-style: italic;
    }
</style>
<script>
    let currentPage = 1;
    let pageSize = 20;
    let searchTimeout = null;
    let schema = null;
    let itemToDelete = null;
    let projectCodes = [];

    // SVG Icons (Catppuccin-style)
    const icons = {
        clipboard: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="9" y="2" width="6" height="4" rx="1" ry="1"></rect>
            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
        </svg>`,
        check: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="20 6 9 17 4 12"></polyline>
        </svg>`,
        file: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
        </svg>`,
        download: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>`,
    };

    // Item templates for quick creation
    const itemTemplates = {
        "machined-part": { category: "M09", descPrefix: "MACHINED " },
        "printed-part": { category: "F10", descPrefix: "3DP " },
        fastener: { category: "R01", descPrefix: "" },
        electronics: { category: "E01", descPrefix: "" },
        assembly: { category: "A01", descPrefix: "" },
        purchased: { category: "S05", descPrefix: "COTS " },
    };

    // Load schema for create form
    async function loadSchema() {
        try {
            const response = await fetch("/api/schemas/kindred-rd");
            schema = await response.json();

            // Populate category dropdown
            const categorySelect = document.getElementById("category");
            const categories = schema.segments.find(
                (s) => s.name === "category",
            );
            if (categories && categories.values) {
                const sorted = Object.entries(categories.values).sort((a, b) =>
                    a[0].localeCompare(b[0]),
                );
                sorted.forEach(([code, desc]) => {
                    const option = document.createElement("option");
                    option.value = code;
                    option.textContent = `${code} - ${desc}`;
                    categorySelect.appendChild(option);
                });
            }
        } catch (error) {
            console.error("Failed to load schema:", error);
        }
    }

    // Load project codes from existing items
    async function loadProjectCodes() {
        try {
            const response = await fetch("/api/projects");
            projectCodes = await response.json();

            // Populate project filter dropdown
            const projectFilter = document.getElementById("project-filter");
            projectCodes.forEach((code) => {
                const option = document.createElement("option");
                option.value = code;
                option.textContent = code;
                projectFilter.appendChild(option);
            });

            // Populate create form project dropdown
            const projectSelect = document.getElementById("project");
            projectCodes.forEach((code) => {
                const option = document.createElement("option");
                option.value = code;
                option.textContent = code;
                projectSelect.appendChild(option);
            });
        } catch (error) {
            console.error("Failed to load project codes:", error);
        }
    }

    // Apply template to create form
    function applyTemplate() {
        const templateId = document.getElementById("template").value;
        if (!templateId) return;

        const template = itemTemplates[templateId];
        if (!template) return;

        // Set category
        const categorySelect = document.getElementById("category");
        categorySelect.value = template.category;

        // Set description prefix
        const descInput = document.getElementById("description");
        if (template.descPrefix && !descInput.value) {
            descInput.value = template.descPrefix;
            descInput.focus();
        }
    }

    // Search help functions
    function showSearchHelp() {
        setTimeout(() => {
            document.getElementById("search-help").classList.add("visible");
        }, 200);
    }

    function hideSearchHelp() {
        setTimeout(() => {
            document.getElementById("search-help").classList.remove("visible");
        }, 300);
    }

    // Load items from API
    async function loadItems() {
        const search = document.getElementById("search-input").value;
        const type = document.getElementById("type-filter").value;
        const project = document.getElementById("project-filter").value;

        const params = new URLSearchParams();
        if (search) params.set("search", search);
        if (type) params.set("type", type);
        if (project) params.set("project", project);
        params.set("limit", pageSize);
        params.set("offset", (currentPage - 1) * pageSize);

        const tbody = document.getElementById("items-table");
        tbody.innerHTML =
            '<tr><td colspan="6"><div class="loading"><div class="spinner"></div></div></td></tr>';

        try {
            const response = await fetch(`/api/items?${params}`);
            const items = await response.json();

            if (!items || items.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="6">
                            <div class="empty-state">
                                <h3>No items found</h3>
                                <p>Create your first item or adjust your search filters.</p>
                            </div>
                        </td>
                    </tr>
                `;
                updateStats([]);
                return;
            }

            tbody.innerHTML = items
                .map(
                    (item) => `
                <tr>
                    <td>
                        <span class="part-number-container">
                            <span class="part-number" style="cursor: pointer;" onclick="showItemDetail('${item.part_number}')">${item.part_number}</span>
                            <button class="copy-btn" onclick="event.stopPropagation(); copyPartNumber('${item.part_number}', this)" title="Copy part number">${icons.clipboard}</button>
                        </span>
                    </td>
                    <td><span class="item-type item-type-${item.item_type}">${item.item_type}</span></td>
                    <td>${item.description || "-"}</td>
                    <td>Rev ${item.current_revision}</td>
                    <td>${formatDate(item.created_at)}</td>
                    <td>
                        <button class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.85rem;" onclick="openEditModal('${item.part_number}')">Edit</button>
                        <button class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.85rem; background-color: var(--ctp-surface2);" onclick="openDeleteModal('${item.part_number}')">Delete</button>
                    </td>
                </tr>
            `,
                )
                .join("");

            updateStats(items);
        } catch (error) {
            console.error("Failed to load items:", error);
            tbody.innerHTML = `
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <h3>Error loading items</h3>
                            <p>${error.message}</p>
                        </div>
                    </td>
                </tr>
            `;
        }
    }

    function updateStats(items) {
        const total = items.length;
        const parts = items.filter((i) => i.item_type === "part").length;
        const assemblies = items.filter(
            (i) => i.item_type === "assembly",
        ).length;
        const documents = items.filter(
            (i) => i.item_type === "document",
        ).length;

        document.getElementById("total-count").textContent = total;
        document.getElementById("parts-count").textContent = parts;
        document.getElementById("assemblies-count").textContent = assemblies;
        document.getElementById("documents-count").textContent = documents;
    }

    function formatDate(dateStr) {
        if (!dateStr) return "-";
        const date = new Date(dateStr);
        return date.toLocaleDateString("en-US", {
            year: "numeric",
            month: "short",
            day: "numeric",
        });
    }

    function debounceSearch() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            currentPage = 1;
            loadItems();
        }, 300);
    }

    // Create Modal functions
    function openCreateModal() {
        document.getElementById("create-modal").classList.add("active");
    }

    function closeCreateModal() {
        document.getElementById("create-modal").classList.remove("active");
        document.getElementById("create-form").reset();
    }

    async function createItem(event) {
        event.preventDefault();

        // Use new project code if provided, otherwise use dropdown selection
        const projectSelect = document.getElementById("project").value;
        const projectNew = document
            .getElementById("project-new")
            .value.trim()
            .toUpperCase();
        const project = projectNew || projectSelect;

        if (!project) {
            alert("Please select or enter a project code");
            return;
        }

        const data = {
            schema: "kindred-rd",
            project: project,
            category: document.getElementById("category").value,
            description: document.getElementById("description").value,
        };

        try {
            const response = await fetch("/api/items", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data),
            });

            if (!response.ok) {
                const error = await response.json();
                alert(`Error: ${error.message || error.error}`);
                return;
            }

            const item = await response.json();
            alert(`Created: ${item.part_number}`);
            closeCreateModal();
            loadItems();
        } catch (error) {
            alert(`Error: ${error.message}`);
        }
    }

    // Edit Modal functions
    async function openEditModal(partNumber) {
        document.getElementById("edit-modal").classList.add("active");

        try {
            const response = await fetch(`/api/items/${partNumber}`);
            const item = await response.json();

            document.getElementById("edit-original-pn").value = partNumber;
            document.getElementById("edit-part-number").value =
                item.part_number;
            document.getElementById("edit-type").value = item.item_type;
            document.getElementById("edit-description").value =
                item.description || "";
        } catch (error) {
            alert(`Error loading item: ${error.message}`);
            closeEditModal();
        }
    }

    function closeEditModal() {
        document.getElementById("edit-modal").classList.remove("active");
        document.getElementById("edit-form").reset();
    }

    async function saveItem(event) {
        event.preventDefault();

        const originalPN = document.getElementById("edit-original-pn").value;
        const data = {
            part_number: document.getElementById("edit-part-number").value,
            item_type: document.getElementById("edit-type").value,
            description: document.getElementById("edit-description").value,
        };

        try {
            const response = await fetch(`/api/items/${originalPN}`, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(data),
            });

            if (!response.ok) {
                const error = await response.json();
                alert(`Error: ${error.message || error.error}`);
                return;
            }

            closeEditModal();
            loadItems();
        } catch (error) {
            alert(`Error: ${error.message}`);
        }
    }

    // Delete Modal functions
    function openDeleteModal(partNumber) {
        itemToDelete = partNumber;
        document.getElementById("delete-part-number").textContent = partNumber;
        document.getElementById("delete-modal").classList.add("active");
    }

    function closeDeleteModal() {
        document.getElementById("delete-modal").classList.remove("active");
        itemToDelete = null;
    }

    async function confirmDelete() {
        if (!itemToDelete) return;

        try {
            const response = await fetch(`/api/items/${itemToDelete}`, {
                method: "DELETE",
            });

            if (!response.ok && response.status !== 204) {
                const error = await response.json();
                alert(`Error: ${error.message || error.error}`);
                return;
            }

            closeDeleteModal();
            loadItems();
        } catch (error) {
            alert(`Error: ${error.message}`);
        }
    }

    // Detail Modal functions
    let currentDetailItem = null;
    let currentDetailRevisions = null;
    let currentItemPartNumber = null;
    let propsMode = "form"; // 'form' or 'json'

    function closeDetailModal() {
        document.getElementById("detail-modal").classList.remove("active");
        currentDetailItem = null;
        currentDetailRevisions = null;
        currentItemPartNumber = null;
    }

    function switchDetailTab(tab) {
        document.querySelectorAll(".detail-tabs .tab-btn").forEach((btn) => {
            btn.classList.toggle("active", btn.dataset.tab === tab);
        });
        document.querySelectorAll(".tab-content").forEach((content) => {
            content.style.display = "none";
        });
        document.getElementById(`tab-${tab}`).style.display = "block";
    }

    // Format file size
    function formatFileSize(bytes) {
        if (!bytes) return "-";
        const units = ["B", "KB", "MB", "GB"];
        let size = bytes;
        let unitIndex = 0;
        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }
        return `${size.toFixed(1)} ${units[unitIndex]}`;
    }

    async function showItemDetail(partNumber) {
        document.getElementById("detail-modal").classList.add("active");
        document.getElementById("detail-title").textContent = partNumber;
        currentItemPartNumber = partNumber;

        // Reset to info tab
        switchDetailTab("info");
        document.getElementById("tab-info").innerHTML =
            '<div class="loading"><div class="spinner"></div></div>';
        document.getElementById("tab-properties").innerHTML = "";
        document.getElementById("tab-revisions").innerHTML = "";

        try {
            const [itemRes, revsRes] = await Promise.all([
                fetch(`/api/items/${partNumber}?include=properties`),
                fetch(`/api/items/${partNumber}/revisions`),
            ]);

            const item = await itemRes.json();
            const revisions = await revsRes.json();

            currentDetailItem = item;
            currentDetailRevisions = revisions;

            // Find the latest revision with file info
            const latestRevWithFile = revisions.find((rev) => rev.file_key);

            // Build file info section
            let fileInfoHtml = "";
            if (latestRevWithFile) {
                fileInfoHtml = `
                    <div class="file-info">
                        <div class="file-info-header">
                            ${icons.file}
                            <span>File Attachment (Rev ${latestRevWithFile.revision_number})</span>
                        </div>
                        <div class="file-info-row">
                            <span class="file-info-label">Size</span>
                            <span class="file-info-value">${formatFileSize(latestRevWithFile.file_size)}</span>
                        </div>
                        ${
                            latestRevWithFile.file_checksum
                                ? `
                        <div class="file-info-row">
                            <span class="file-info-label">Checksum</span>
                            <span class="file-info-value" title="${latestRevWithFile.file_checksum}">${latestRevWithFile.file_checksum.substring(0, 16)}...</span>
                        </div>
                        `
                                : ""
                        }
                        <button class="download-btn" onclick="downloadFile('${partNumber}', ${latestRevWithFile.revision_number})">
                            ${icons.download}
                            <span>Download Latest</span>
                        </button>
                    </div>
                `;
            } else {
                fileInfoHtml = `
                    <div class="file-info">
                        <div class="file-info-header">
                            ${icons.file}
                            <span>File Attachment</span>
                        </div>
                        <p class="no-file">No file attached to any revision</p>
                    </div>
                `;
            }

            // Info tab
            document.getElementById("tab-info").innerHTML = `
                <div style="margin-bottom: 1.5rem;">
                    <p><strong>ID:</strong> <code style="background: var(--ctp-surface1); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.85rem;">${item.id}</code></p>
                    <p><strong>Part Number:</strong> <span class="part-number-container"><span class="part-number">${item.part_number}</span><button class="copy-btn" onclick="copyPartNumber('${item.part_number}', this)" title="Copy part number">${icons.clipboard}</button></span></p>
                    <p><strong>Type:</strong> <span class="item-type item-type-${item.item_type}">${item.item_type}</span></p>
                    <p><strong>Description:</strong> ${item.description || "-"}</p>
                    <p><strong>Current Revision:</strong> ${item.current_revision}</p>
                    <p><strong>Created:</strong> ${formatDate(item.created_at)}</p>
                    <p><strong>Updated:</strong> ${formatDate(item.updated_at)}</p>
                </div>
                ${fileInfoHtml}
            `;

            // Properties tab
            renderPropertiesTab(item.properties || {}, item.current_revision);

            // Revisions tab
            document.getElementById("tab-revisions").innerHTML = `
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>Rev</th>
                                <th>Date</th>
                                <th>File</th>
                                <th>Comment</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${revisions
                                .map(
                                    (rev) => `
                                <tr>
                                    <td>${rev.revision_number}</td>
                                    <td>${formatDate(rev.created_at)}</td>
                                    <td>${rev.file_key ? `<button class="copy-btn" onclick="downloadFile('${partNumber}', ${rev.revision_number})" title="Download">${icons.download}</button>` : "-"}</td>
                                    <td>${rev.comment || "-"}</td>
                                </tr>
                            `,
                                )
                                .join("")}
                        </tbody>
                    </table>
                </div>
            `;
        } catch (error) {
            document.getElementById("tab-info").innerHTML =
                `<p>Error loading item: ${error.message}</p>`;
        }
    }

    // Properties Editor Functions
    function renderPropertiesTab(properties, revNum) {
        const html = `
            <div class="properties-editor">
                <div class="properties-header">
                    <h4>Properties (Rev ${revNum})</h4>
                    <div class="properties-mode-toggle">
                        <button class="mode-btn ${propsMode === "form" ? "active" : ""}" data-mode="form" onclick="switchPropsMode('form')">Form</button>
                        <button class="mode-btn ${propsMode === "json" ? "active" : ""}" data-mode="json" onclick="switchPropsMode('json')">JSON</button>
                    </div>
                </div>

                <div class="props-form-mode" id="props-form-mode" style="${propsMode === "json" ? "display:none" : ""}">
                    <div class="props-list" id="props-list"></div>
                    <button class="add-prop-btn" onclick="addPropertyRow()">+ Add Property</button>
                </div>

                <div class="props-json-mode" id="props-json-mode" style="${propsMode === "form" ? "display:none" : ""}">
                    <textarea class="json-editor" id="json-editor">${JSON.stringify(properties, null, 2)}</textarea>
                    <div class="json-validation" id="json-validation"></div>
                </div>

                <div class="props-actions">
                    <span class="props-notice">Saving creates a new revision</span>
                    <button class="btn btn-primary" onclick="saveProperties()">Save Properties</button>
                </div>
            </div>
        `;
        document.getElementById("tab-properties").innerHTML = html;

        // Populate form mode
        const container = document.getElementById("props-list");
        Object.entries(properties).forEach(([key, value]) => {
            addPropertyRow(key, value);
        });
    }

    function switchPropsMode(mode) {
        propsMode = mode;
        document
            .querySelectorAll(".properties-mode-toggle .mode-btn")
            .forEach((btn) => {
                btn.classList.toggle("active", btn.dataset.mode === mode);
            });

        const formMode = document.getElementById("props-form-mode");
        const jsonMode = document.getElementById("props-json-mode");

        if (mode === "form") {
            formMode.style.display = "block";
            jsonMode.style.display = "none";
            syncJsonToForm();
        } else {
            formMode.style.display = "none";
            jsonMode.style.display = "block";
            syncFormToJson();
        }
    }

    function detectType(value) {
        if (typeof value === "boolean") return "boolean";
        if (typeof value === "number") return "number";
        if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value))
            return "date";
        return "string";
    }

    function escapeHtml(str) {
        if (str === null || str === undefined) return "";
        const div = document.createElement("div");
        div.textContent = String(str);
        return div.innerHTML;
    }

    function addPropertyRow(key = "", value = "") {
        const container = document.getElementById("props-list");
        if (!container) return;

        const type = detectType(value);
        const row = document.createElement("div");
        row.className = "prop-row";

        let valueInput;
        if (type === "boolean") {
            valueInput = `<select class="prop-value">
                <option value="true" ${value === true ? "selected" : ""}>true</option>
                <option value="false" ${value === false ? "selected" : ""}>false</option>
            </select>`;
        } else if (type === "number") {
            valueInput = `<input type="number" class="prop-value" step="any" value="${value || ""}" />`;
        } else if (type === "date") {
            const dateVal = value ? value.split("T")[0] : "";
            valueInput = `<input type="date" class="prop-value" value="${dateVal}" />`;
        } else {
            valueInput = `<input type="text" class="prop-value" value="${escapeHtml(value)}" />`;
        }

        row.innerHTML = `
            <input type="text" class="prop-key" placeholder="Key" value="${escapeHtml(key)}" />
            <select class="prop-type" onchange="updatePropInput(this)">
                <option value="string" ${type === "string" ? "selected" : ""}>Text</option>
                <option value="number" ${type === "number" ? "selected" : ""}>Number</option>
                <option value="boolean" ${type === "boolean" ? "selected" : ""}>Boolean</option>
                <option value="date" ${type === "date" ? "selected" : ""}>Date</option>
            </select>
            ${valueInput}
            <button class="prop-remove" onclick="this.closest('.prop-row').remove()">&times;</button>
        `;
        container.appendChild(row);
    }

    function updatePropInput(select) {
        const row = select.closest(".prop-row");
        const type = select.value;
        const oldInput = row.querySelector(".prop-value");
        const oldValue = oldInput.value;

        let newInput;
        if (type === "boolean") {
            newInput = document.createElement("select");
            newInput.className = "prop-value";
            newInput.innerHTML = `<option value="true">true</option><option value="false">false</option>`;
        } else if (type === "number") {
            newInput = document.createElement("input");
            newInput.type = "number";
            newInput.step = "any";
            newInput.className = "prop-value";
            newInput.value = parseFloat(oldValue) || "";
        } else if (type === "date") {
            newInput = document.createElement("input");
            newInput.type = "date";
            newInput.className = "prop-value";
        } else {
            newInput = document.createElement("input");
            newInput.type = "text";
            newInput.className = "prop-value";
            newInput.value = oldValue;
        }

        oldInput.replaceWith(newInput);
    }

    function collectFormProperties() {
        const props = {};
        document.querySelectorAll(".prop-row").forEach((row) => {
            const key = row.querySelector(".prop-key").value.trim();
            const type = row.querySelector(".prop-type").value;
            const valueEl = row.querySelector(".prop-value");
            let value = valueEl.value;

            if (key) {
                switch (type) {
                    case "number":
                        props[key] = parseFloat(value) || 0;
                        break;
                    case "boolean":
                        props[key] = value === "true";
                        break;
                    default:
                        props[key] = value;
                }
            }
        });
        return props;
    }

    function syncFormToJson() {
        const props = collectFormProperties();
        const editor = document.getElementById("json-editor");
        if (editor) {
            editor.value = JSON.stringify(props, null, 2);
        }
    }

    function syncJsonToForm() {
        const editor = document.getElementById("json-editor");
        const validation = document.getElementById("json-validation");
        if (!editor) return;

        try {
            const props = JSON.parse(editor.value);
            const container = document.getElementById("props-list");
            if (container) {
                container.innerHTML = "";
                Object.entries(props).forEach(([key, value]) => {
                    addPropertyRow(key, value);
                });
            }
            if (validation) {
                validation.textContent = "";
                validation.classList.remove("valid");
            }
        } catch (e) {
            if (validation) {
                validation.textContent = "Invalid JSON: " + e.message;
                validation.classList.remove("valid");
            }
        }
    }

    async function saveProperties() {
        const isJsonMode =
            document.getElementById("props-json-mode").style.display !== "none";
        let properties;

        if (isJsonMode) {
            try {
                properties = JSON.parse(
                    document.getElementById("json-editor").value,
                );
            } catch (e) {
                alert("Invalid JSON: " + e.message);
                return;
            }
        } else {
            properties = collectFormProperties();
        }

        const comment = prompt("Revision comment (optional):");

        try {
            const response = await fetch(
                `/api/items/${currentItemPartNumber}/revisions`,
                {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        properties,
                        comment: comment || "",
                    }),
                },
            );

            if (!response.ok) {
                const error = await response.json();
                alert(`Error: ${error.message || error.error}`);
                return;
            }

            alert("Properties saved as new revision");
            showItemDetail(currentItemPartNumber);
            loadItems();
        } catch (error) {
            alert(`Error: ${error.message}`);
        }
    }

    // Layout Management
    const LAYOUT_KEY = "silo-items-layout";

    function initLayout() {
        const saved = localStorage.getItem(LAYOUT_KEY) || "vertical";
        setLayout(saved, false);
    }

    function setLayout(mode, save = true) {
        document.querySelectorAll(".layout-btn").forEach((btn) => {
            btn.classList.toggle("active", btn.dataset.layout === mode);
        });

        if (save) {
            localStorage.setItem(LAYOUT_KEY, mode);
        }

        // For now, both modes use modal - horizontal panel view would be a larger change
        // This establishes the toggle infrastructure for future enhancement
    }

    // Download file for a specific revision
    function downloadFile(partNumber, revision) {
        window.location.href = `/api/items/${partNumber}/file/${revision}`;
    }

    // Close modals on overlay click
    document.querySelectorAll(".modal-overlay").forEach((overlay) => {
        overlay.addEventListener("click", (e) => {
            if (e.target === overlay) {
                overlay.classList.remove("active");
            }
        });
    });

    // Copy part number to clipboard
    async function copyPartNumber(partNumber, btn) {
        try {
            await navigator.clipboard.writeText(partNumber);
            btn.innerHTML = icons.check;
            btn.classList.add("copied");
            setTimeout(() => {
                btn.innerHTML = icons.clipboard;
                btn.classList.remove("copied");
            }, 2000);
        } catch (err) {
            console.error("Failed to copy:", err);
        }
    }

    // CSV Export/Import Functions
    function exportCSV() {
        const search = document.getElementById("search-input").value;
        const type = document.getElementById("type-filter").value;
        const project = document.getElementById("project-filter").value;

        const params = new URLSearchParams();
        if (search) params.set("search", search);
        if (type) params.set("type", type);
        if (project) params.set("project", project);
        params.set("include_properties", "true");

        window.location.href = `/api/items/export.csv?${params}`;
    }

    function openImportModal() {
        document.getElementById("import-modal").classList.add("active");
        document.getElementById("import-results").style.display = "none";
        document.getElementById("import-form").reset();
        document.getElementById("file-label").textContent =
            "Choose a file or drag it here";
        document.getElementById("file-label").classList.remove("has-file");
        document.getElementById("import-btn").textContent = "Validate";
        document.getElementById("import-dry-run").checked = true;
    }

    function closeImportModal() {
        document.getElementById("import-modal").classList.remove("active");
    }

    function updateFileName(input) {
        const label = document.getElementById("file-label");
        if (input.files && input.files[0]) {
            label.textContent = input.files[0].name;
            label.classList.add("has-file");
        } else {
            label.textContent = "Choose a file or drag it here";
            label.classList.remove("has-file");
        }
    }

    async function importCSV(event) {
        event.preventDefault();

        const fileInput = document.getElementById("import-file");
        const dryRun = document.getElementById("import-dry-run").checked;
        const resultsDiv = document.getElementById("import-results");
        const importBtn = document.getElementById("import-btn");

        if (!fileInput.files || !fileInput.files[0]) {
            alert("Please select a CSV file");
            return;
        }

        const formData = new FormData();
        formData.append("file", fileInput.files[0]);
        formData.append("dry_run", dryRun.toString());
        formData.append("schema", "kindred-rd");

        importBtn.textContent = dryRun ? "Validating..." : "Importing...";
        importBtn.disabled = true;

        try {
            const response = await fetch("/api/items/import", {
                method: "POST",
                body: formData,
            });

            const result = await response.json();

            if (!response.ok) {
                resultsDiv.innerHTML = `<h4>Error</h4><p>${result.message || result.error}</p>`;
                resultsDiv.className = "import-results error";
                resultsDiv.style.display = "block";
                return;
            }

            // Display results
            let statusClass = "success";
            let statusTitle = dryRun
                ? "Validation Complete"
                : "Import Complete";
            if (result.error_count > 0 && result.success_count > 0) {
                statusClass = "warning";
            } else if (result.error_count > 0) {
                statusClass = "error";
            }

            let html = `<h4>${statusTitle}</h4>`;
            html += `<div class="import-stats">
                <div class="import-stat">
                    <div class="import-stat-value">${result.total_rows}</div>
                    <div class="import-stat-label">Total Rows</div>
                </div>
                <div class="import-stat">
                    <div class="import-stat-value success">${result.success_count}</div>
                    <div class="import-stat-label">${dryRun ? "Valid" : "Created"}</div>
                </div>
                <div class="import-stat">
                    <div class="import-stat-value error">${result.error_count}</div>
                    <div class="import-stat-label">Errors</div>
                </div>
            </div>`;

            if (result.errors && result.errors.length > 0) {
                html += `<div class="import-errors"><strong>Errors:</strong>`;
                result.errors.slice(0, 20).forEach((err) => {
                    html += `<div class="import-error-item">
                        <span class="import-error-row">Row ${err.row}:</span>
                        <span class="import-error-msg">${err.field ? `[${err.field}] ` : ""}${err.message}</span>
                    </div>`;
                });
                if (result.errors.length > 20) {
                    html += `<div class="import-error-item"><em>...and ${result.errors.length - 20} more errors</em></div>`;
                }
                html += `</div>`;
            }

            if (
                !dryRun &&
                result.created_items &&
                result.created_items.length > 0
            ) {
                html += `<div class="import-created"><strong>Created Items:</strong>
                    <div class="import-created-list">`;
                result.created_items.slice(0, 50).forEach((pn) => {
                    html += `<span class="import-created-item">${pn}</span>`;
                });
                if (result.created_items.length > 50) {
                    html += `<span class="import-created-item">...+${result.created_items.length - 50} more</span>`;
                }
                html += `</div></div>`;
            }

            resultsDiv.innerHTML = html;
            resultsDiv.className = `import-results ${statusClass}`;
            resultsDiv.style.display = "block";

            // Update button based on mode
            if (
                dryRun &&
                result.success_count > 0 &&
                result.error_count === 0
            ) {
                importBtn.textContent = "Import Now";
                document.getElementById("import-dry-run").checked = false;
            } else if (!dryRun && result.success_count > 0) {
                loadItems(); // Refresh the list
                importBtn.textContent = "Done";
            } else {
                importBtn.textContent = "Validate";
            }
        } catch (error) {
            resultsDiv.innerHTML = `<h4>Error</h4><p>${error.message}</p>`;
            resultsDiv.className = "import-results error";
            resultsDiv.style.display = "block";
        } finally {
            importBtn.disabled = false;
        }
    }

    // Initialize
    loadSchema();
    loadProjectCodes();
    loadItems();
    initLayout();
</script>
{{end}}