<?php
$parts = explode('.', $block->slug, 2);
$rawName = isset($parts[1]) ? $parts[1] : $block->slug;
$displayName = ucwords(str_replace('_', ' ', $rawName));
$isImage = ($block->type === 'image');
$isVideo = ($block->type === 'video');
$isMedia = $isImage || $isVideo;
?>
<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: 800px;
        margin: 0 auto;
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border);
        padding: 40px;
    }
    .cb-header {
        margin-bottom: 32px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
    }
    .cb-header h1 {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .cb-header p {
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    .form-group {
        margin-bottom: 24px;
    }
    .form-label {
        display: block;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .form-control {
        width: 100%;
        padding: 12px 16px;
        border: 1.5px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
        color: var(--text-primary);
        background: var(--card);
        outline: none;
        transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(37,99,235,.12);
    }
    .form-control[readonly] {
        background: #f8fafc;
        color: var(--text-secondary);
        cursor: not-allowed;
    }
    .form-control[readonly]:focus {
        border-color: var(--border);
        box-shadow: none;
    }
    textarea.form-control {
        min-height: 240px;
        resize: vertical;
        line-height: 1.6;
    }
    .preview-container {
        margin-top: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 8px;
        background: #fafafa;
        display: inline-block;
    }
    .preview-container img {
        max-width: 100%;
        max-height: 200px;
        display: block;
        border-radius: 4px;
    }
    .preview-container video {
        max-width: 100%;
        max-height: 200px;
        display: block;
    }
    .form-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
    }
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 24px;
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        transition: all .15s;
    }
    .btn-primary {
        background: var(--accent);
        color: #fff;
        border: none;
        box-shadow: 0 2px 8px rgba(37,99,235,.22);
    }
    .btn-primary:hover {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(37,99,235,.32);
    }
    .btn-secondary {
        background: #fff;
        color: var(--text-primary);
        border: 1.5px solid var(--border);
    }
    .btn-secondary:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
    .slug-badge {
        font-size: 0.8rem;
        color: var(--accent);
        background: var(--accent-light);
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-block;
        font-weight: 500;
        margin-top: 8px;
    }
    @media (max-width: 640px) {
        body { padding: 20px 12px; }
        .main-card { padding: 24px; }
        .cb-header h1 { font-size: 1.5rem; }
        .form-actions { flex-direction: column; gap: 12px; }
        .btn { width: 100%; }
    }
</style>
<div class="main-card">
    <div class="cb-header">
        <h1>Edit Block: <?= h($displayName) ?></h1>
        <p>Update the content and details below.</p>
        <div class="slug-badge"><?= h($block->slug) ?></div>
    </div>
    <?= $this->Form->create($block, ['type' => 'file']) ?>
    <div class="form-group">
        <label class="form-label" for="description">Description</label>
        <?= $this->Form->text('description', [
            'id' => 'description',
            'class' => 'form-control',
            'placeholder' => 'Briefly describe where this block is used...'
        ]) ?>
    </div>
    <div class="form-group">
        <label class="form-label" for="value">Content</label>
        <?php if ($isMedia): ?>
            <?= $this->Form->file('upload_file', [
                'id' => 'upload_file',
                'class' => 'form-control',
                'accept' => $isImage ? 'image/*' : 'video/*'
            ]) ?>
            <div class="preview-container" id="preview-wrapper">
                <?php if ($block->value): ?>
                    <?php if ($isImage): ?>
                        <img src="<?= $this->Url->build($block->value) ?>" id="media-preview">
                    <?php else: ?>
                        <video src="<?= $this->Url->build($block->value) ?>" id="media-preview" controls></video>
                    <?php endif; ?>
                <?php endif; ?>
            </div>
            <?= $this->Form->hidden('value') ?>
        <?php else: ?>
            <?= $this->Form->textarea('value', [
                'id' => 'value',
                'class' => 'form-control',
                'placeholder' => 'Enter the block content here...'
            ]) ?>
        <?php endif; ?>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                <polyline points="7 3 7 8 15 8"></polyline>
            </svg>
            Save Changes
        </button>
        <?= $this->Html->link('Cancel', ['action' => 'index'], ['class' => 'btn btn-secondary']) ?>
    </div>
    <?= $this->Form->end() ?>
</div>
<script>
    document.getElementById('upload_file')?.addEventListener('change', function(e) {
        const file = e.target.files[0];
        const preview = document.getElementById('media-preview');
        if (file && preview) {
            if (preview.src.startsWith('blob:')) {
                URL.revokeObjectURL(preview.src);
            }
            const objectUrl = URL.createObjectURL(file);
            preview.src = objectUrl;
            if (preview.tagName === 'VIDEO') {
                preview.load();
            }
        }
    });
</script>
