<?php
$grouped = [];
foreach ($blocks as $block) {
    $parts = explode('.', $block->slug, 2);
    $section = isset($parts[1]) ? ucfirst($parts[0]) : 'General';
    $grouped[$section][] = $block;
}
?>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
        --bg: #f0f2f5;
        --card: #ffffff;
        --border: #e5e8ed;
        --text-primary: #111827;
        --text-secondary: #6b7280;
        --text-muted: #9ca3af;
        --accent: #2563eb;
        --accent-hover: #1d4ed8;
        --accent-light: #eff6ff;
        --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
        --shadow-md: 0 4px 16px rgba(0,0,0,.08);
        --radius: 14px;
        --radius-sm: 8px;
    }
    body {
        background: var(--bg);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 40px 24px;
    }
    .main-card {
        max-width: 960px;
        margin: 0 auto;
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border);
        padding: 32px;
    }
    .cb-header { margin-bottom: 24px; }
    .cb-header h1 {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .cb-header p {
        margin-top: 6px;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    .cb-toolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        flex-wrap: wrap;
    }
    .search-wrapper {
        position: relative;
        flex: 1;
    }
    .search-wrapper svg {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        pointer-events: none;
    }
    .search-input {
        width: 100%;
        padding: 10px 14px 10px 40px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 0.9rem;
        color: var(--text-primary);
        background: var(--card);
        outline: none;
        transition: border-color .2s, box-shadow .2s;
        box-shadow: var(--shadow-sm);
    }
    .search-input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    .search-input::placeholder { color: var(--text-muted); }
    .table-container {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .table-head {
        display: grid;
        grid-template-columns: 200px 1fr 100px;
        padding: 11px 24px;
        border-bottom: 1.5px solid var(--border);
        background: #fafbfc;
    }
    .table-head span {
        font-size: 0.71rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .table-head span:last-child { text-align: right; }
    .section-label {
        padding: 8px 24px;
        background: #f4f6f9;
        border-bottom: 1px solid var(--border);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border);
    }
    .block-row {
        display: grid;
        grid-template-columns: 200px 1fr 100px;
        align-items: center;
        padding: 16px 24px;
        border-bottom: 1px solid var(--border);
        gap: 16px;
        transition: background .15s;
    }
    .block-row:last-child { border-bottom: none; }
    .block-row:hover { background: #f8faff; }
    .block-name {
        font-weight: 600;
        font-size: 0.94rem;
        color: var(--text-primary);
        margin-bottom: 4px;
        word-break: break-word;
    }
    .block-slug {
        font-size: 0.74rem;
        color: var(--accent);
        background: var(--accent-light);
        padding: 2px 7px;
        border-radius: 4px;
        display: inline-block;
        font-weight: 500;
        word-break: break-all;
    }
    .block-desc {
        font-size: 0.83rem;
        color: var(--text-secondary);
        line-height: 1.45;
        word-break: break-word;
    }
    .actions-cell { display: flex; justify-content: flex-end; }
    .btn-edit {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 8px 16px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 0.84rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: background .15s, transform .1s, box-shadow .15s;
        box-shadow: 0 2px 8px rgba(37,99,235,.22);
        white-space: nowrap;
    }
    .btn-edit:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(37,99,235,.32);
    }
    .btn-edit:active { transform: translateY(0); }
    .cb-empty {
        text-align: center;
        padding: 56px 24px;
        color: var(--text-muted);
        font-size: 0.9rem;
    }
    #no-results { display: none; }
    @media (max-width: 640px) {
        body { padding: 20px 12px; }
        .main-card { padding: 20px; }
        .cb-header h1 { font-size: 1.5rem; }
        .table-head { display: none; }
        .section-label { padding: 8px 16px; }
        .block-row {
            grid-template-columns: 1fr;
            padding: 16px;
            gap: 10px;
            position: relative;
        }
        .actions-cell {
            position: absolute;
            top: 14px;
            right: 14px;
        }
        .btn-edit {
            padding: 6px 12px;
            font-size: 0.8rem;
        }
        .block-row > div:first-child { padding-right: 80px; }
    }
    @media (min-width: 641px) and (max-width: 900px) {
        .table-head,
        .block-row {
            grid-template-columns: 180px 1fr 90px;
        }
    }
</style>
<div class="main-card">
    <div class="cb-header">
        <h1>Content Blocks</h1>
        <p>Manage all editable content blocks across your website.</p>
    </div>
    <div class="cb-toolbar">
        <div class="search-wrapper">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
            </svg>
            <input class="search-input" id="cb-search" type="text" placeholder="Search by slug or description…" oninput="cbFilter(this.value)">
        </div>
    </div>
    <div class="table-container" id="cb-table">
        <div class="table-head">
            <span>Name / Slug</span>
            <span>Description</span>
            <span>Actions</span>
        </div>
        <?php foreach ($grouped as $sectionName => $sectionBlocks): ?>
            <div class="section-label" data-section="<?= h($sectionName) ?>">
                <?= h($sectionName) ?>
            </div>
            <?php foreach ($sectionBlocks as $block):
                $parts = explode('.', $block->slug, 2);
                $rawName = isset($parts[1]) ? $parts[1] : $block->label;
                $displayName = ucwords(str_replace('_', ' ', $rawName));
                ?>
                <div class="block-row" data-slug="<?= h(strtolower($block->slug)) ?>">
                    <div>
                        <div class="block-name"><?= h($displayName) ?></div>
                        <span class="block-slug"><?= h($block->slug) ?></span>
                    </div>
                    <div class="block-desc">
                        <?= h(!empty($block->description) ? $block->description : '—') ?>
                    </div>
                    <div class="actions-cell">
                        <?= $this->Html->link(
                            '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                            </svg> Edit',
                            [
                                'plugin' => null,
                                'controller' => 'ContentBlocks',
                                'action' => 'edit',
                                $block->id
                            ],
                            ['class' => 'btn-edit', 'escape' => false]
                        ) ?>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endforeach; ?>
        <div class="cb-empty" id="no-results">No content blocks match your search.</div>
    </div>
</div>
<script>
    function cbFilter(query) {
        const q = query.trim().toLowerCase();
        const rows = document.querySelectorAll('.block-row');
        const sections = document.querySelectorAll('.section-label');
        let visibleCount = 0;
        rows.forEach(row => {
            const slug = row.dataset.slug || '';
            const text = row.textContent.toLowerCase();
            const match = !q || slug.includes(q) || text.includes(q);
            row.style.display = match ? '' : 'none';
            if (match) visibleCount++;
        });
        sections.forEach(label => {
            let next = label.nextElementSibling;
            let hasVisible = false;
            while (next && !next.classList.contains('section-label')) {
                if (next.classList.contains('block-row') && next.style.display !== 'none') {
                    hasVisible = true;
                    break;
                }
                next = next.nextElementSibling;
            }
            label.style.display = hasVisible ? '' : 'none';
        });
        document.getElementById('no-results').style.display = visibleCount === 0 ? 'block' : 'none';
    }
</script>
