<?php



 
HookSystem::addAction('admin.appearance_render.cards', function (array $vars): void {
    $settings = $vars['settings'] ?? $vars;
    $watchDuration = ($settings['watch_show_duration'] ?? '1') === '1';
    $watchViews    = ($settings['watch_show_views'] ?? '1') === '1';
    $watchLikes    = ($settings['watch_show_likes'] ?? '1') === '1';
    $watchDate     = ($settings['watch_show_date'] ?? '1') === '1';
    $seg = ($_GET['seg'] ?? 'videos') === 'albums' ? 'albums' : 'videos';
    $cardSubTabs = ['videos' => 'Videos', 'albums' => 'Albums'];
    ?>

    <div class="mb-6 border-b border-gray-200">
        <nav class="flex gap-1 -mb-px admin-tabs">
            <?php foreach ($cardSubTabs as $segKey => $segLabel): ?>
                <a href="/admin/appearance?sub=cards&seg=<?= $segKey ?>"
                   class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors <?= $seg === $segKey ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' ?>">
                    <?= $segLabel ?>
                </a>
            <?php endforeach; ?>
        </nav>
    </div>

    <?php if ($seg === 'albums'):
        $aShowCount = ($settings['album_card_show_count'] ?? '1') === '1';
        $aShowTitle = ($settings['album_card_show_title'] ?? '1') === '1';
        $aShowHover = ($settings['album_card_show_thumbnail_hover'] ?? '1') === '1';
        $aShowViews = ($settings['album_card_show_views'] ?? '0') === '1';
        $aShowDate  = ($settings['album_card_show_date'] ?? '0') === '1';
        $aLines     = ($settings['album_card_title_lines'] ?? '2') === '1' ? '1' : '2';
        $aRadius    = (int) ($settings['album_card_border_radius'] ?? 12);
        $aGap       = (int) ($settings['album_card_grid_gap'] ?? 14);
    ?>
    <form method="POST" action="/admin/appearance">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="cards">
        <input type="hidden" name="_seg" value="albums">

        <div class="grid grid-cols-1 xl:grid-cols-[1fr_300px] gap-6 items-start">
            <div class="space-y-6">

                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-image text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Cover & Style</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Gallery cover and badge.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="checkbox" name="album_card_show_count" value="1" id="alb_inp_count"
                                       class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                    <?php if ($aShowCount): ?> checked<?php endif; ?>>
                                <div>
                                    <span class="text-sm text-gray-700">Show image-count badge</span>
                                    <p class="text-xs text-gray-500">Number of images, on the cover.</p>
                                </div>
                            </label>
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="checkbox" name="album_card_show_thumbnail_hover" value="1" id="alb_inp_hover"
                                       class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                    <?php if ($aShowHover): ?> checked<?php endif; ?>>
                                <div>
                                    <span class="text-sm text-gray-700">Hover zoom effect</span>
                                    <p class="text-xs text-gray-500">Zoom the cover on hover.</p>
                                </div>
                            </label>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Border radius</label>
                                <div class="flex items-center gap-3">
                                    <input type="range" name="album_card_border_radius" id="alb_inp_radius" min="0" max="24" step="1" value="<?= $aRadius ?>" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                    <span id="alb_lbl_radius" class="text-sm font-mono text-gray-600 w-10"><?= $aRadius ?>px</span>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Grid gap</label>
                                <div class="flex items-center gap-3">
                                    <input type="range" name="album_card_grid_gap" id="alb_inp_gap" min="0" max="30" step="1" value="<?= $aGap ?>" class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                    <span id="alb_lbl_gap" class="text-sm font-mono text-gray-600 w-10"><?= $aGap ?>px</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-heading text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Title & Meta</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Text below the cover.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">
                            <div class="space-y-4">
                                <label class="flex items-start gap-3 cursor-pointer">
                                    <input type="checkbox" name="album_card_show_title" value="1" id="alb_inp_title"
                                           class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                        <?php if ($aShowTitle): ?> checked<?php endif; ?>>
                                    <div>
                                        <span class="text-sm text-gray-700">Show title</span>
                                        <p class="text-xs text-gray-500">Display gallery title below the cover.</p>
                                    </div>
                                </label>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1.5">Title lines</label>
                                    <div class="flex gap-2">
                                        <label class="flex-1 cursor-pointer">
                                            <input type="radio" name="album_card_title_lines" value="1" id="alb_inp_lines1" class="sr-only peer" <?= $aLines === '1' ? 'checked' : '' ?>>
                                            <div class="border-2 rounded-lg px-3 py-2 text-center transition-all text-sm peer-checked:border-primary-600 peer-checked:bg-primary-50 border-gray-200 hover:border-gray-300">
                                                <span class="font-medium text-gray-700">1 line</span>
                                            </div>
                                        </label>
                                        <label class="flex-1 cursor-pointer">
                                            <input type="radio" name="album_card_title_lines" value="2" id="alb_inp_lines2" class="sr-only peer" <?= $aLines === '2' ? 'checked' : '' ?>>
                                            <div class="border-2 rounded-lg px-3 py-2 text-center transition-all text-sm peer-checked:border-primary-600 peer-checked:bg-primary-50 border-gray-200 hover:border-gray-300">
                                                <span class="font-medium text-gray-700">2 lines</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="space-y-4">
                                <label class="flex items-start gap-3 cursor-pointer">
                                    <input type="checkbox" name="album_card_show_views" value="1" id="alb_inp_views"
                                           class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                        <?php if ($aShowViews): ?> checked<?php endif; ?>>
                                    <div>
                                        <span class="text-sm text-gray-700">Show views</span>
                                        <p class="text-xs text-gray-500">View count under the title.</p>
                                    </div>
                                </label>
                                <label class="flex items-start gap-3 cursor-pointer">
                                    <input type="checkbox" name="album_card_show_date" value="1" id="alb_inp_date"
                                           class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                        <?php if ($aShowDate): ?> checked<?php endif; ?>>
                                    <div>
                                        <span class="text-sm text-gray-700">Show published date</span>
                                        <p class="text-xs text-gray-500">Relative time, e.g. “4 weeks ago”.</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            
            <div class="xl:sticky xl:top-4">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-4 py-3 border-b border-gray-200">
                        <div class="flex items-center gap-2">
                            <span class="text-gray-400"><i class="fa-solid fa-eye text-sm"></i></span>
                            <h3 class="text-xs font-semibold text-gray-900 uppercase tracking-wide">Preview</h3>
                        </div>
                    </div>
                    <div class="p-4 flex justify-center">
                        <div style="width:240px;">
                            <article id="albPrevCard" style="background:#fff;overflow:hidden;border:1px solid #e2e8f0;border-radius:<?= $aRadius ?>px;">
                                <div style="position:relative;aspect-ratio:3/2;overflow:hidden;background:#1e293b;">
                                    <div style="width:100%;height:100%;background:linear-gradient(135deg,#334155,#1e293b);display:flex;align-items:center;justify-content:center;">
                                        <i class="fa-solid fa-images" style="color:#94a3b8;font-size:30px;"></i>
                                    </div>
                                    <span id="albPrevCount" style="position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.72);color:#fff;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;"><i class="fa-solid fa-images" style="color:#60a5fa;"></i> 48</span>
                                </div>
                                <div id="albPrevInfo" style="padding:8px 10px;">
                                    <div id="albPrevTitle" style="font-size:13px;font-weight:500;line-height:1.3;color:#1e293b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Chloe Vevrier Porn Pics Featuring Chloe's World</div>
                                    <div id="albPrevMeta" style="margin-top:3px;font-size:11px;color:#64748b;display:none;justify-content:space-between;align-items:center;gap:8px;">
                                        <span id="albPrevViews" style="display:none;align-items:center;gap:4px;"><i class="fa-regular fa-eye" style="color:#60a5fa;"></i> 1.2K</span>
                                        <span id="albPrevDate" style="display:none;align-items:center;gap:4px;"><i class="fa-regular fa-clock" style="color:#60a5fa;"></i> 4 weeks ago</span>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sticky bottom-0 bg-gray-50 pt-4 pb-2 -mx-4 px-4 sm:-mx-6 sm:px-6 mt-6" style="z-index:10;">
            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">
                <i class="fa-solid fa-check" style="margin-right:6px;font-size:12px;"></i> Save changes
            </button>
        </div>
    </form>

    <script>
    (function(){
        var $=function(id){return document.getElementById(id);};
        function upd(){
            $('albPrevCount').style.display=$('alb_inp_count').checked?'':'none';
            var showTitle=$('alb_inp_title').checked;
            var t=$('albPrevTitle'); t.style.display=showTitle?'-webkit-box':'none';
            t.style.webkitLineClamp=$('alb_inp_lines2').checked?'2':'1';
            var showViews=$('alb_inp_views').checked, showDate=$('alb_inp_date').checked;
            $('albPrevViews').style.display=showViews?'inline-flex':'none';
            $('albPrevDate').style.display=showDate?'inline-flex':'none';
            $('albPrevMeta').style.display=(showViews||showDate)?'flex':'none';
            $('albPrevInfo').style.display=(showTitle||showViews||showDate)?'':'none';
            var r=$('alb_inp_radius').value; $('albPrevCard').style.borderRadius=r+'px'; $('alb_lbl_radius').textContent=r+'px';
            $('alb_lbl_gap').textContent=$('alb_inp_gap').value+'px';
        }
        ['alb_inp_count','alb_inp_hover','alb_inp_title','alb_inp_lines1','alb_inp_lines2','alb_inp_views','alb_inp_date','alb_inp_radius','alb_inp_gap'].forEach(function(id){
            var el=$(id); if(el){el.addEventListener('change',upd);el.addEventListener('input',upd);}
        });
        upd();
    })();
    </script>
    <?php return; endif; ?>

    <form method="POST" action="/admin/appearance">
        <?= Router::csrfField() ?>
        <input type="hidden" name="_tab" value="appearance">
        <input type="hidden" name="_sub" value="cards">

        <div class="grid grid-cols-1 xl:grid-cols-[1fr_300px] gap-6 items-start">

            
            <div class="space-y-6">

                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-image text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Thumbnail & Style</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Card appearance and thumbnail settings.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">

                            
                            <label class="flex items-start gap-3 <?= $watchDuration ? 'cursor-pointer' : 'opacity-50 cursor-not-allowed' ?>">
                                <input type="checkbox" name="card_show_duration" value="1" id="inp_duration"
                                       class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                    <?php if (!$watchDuration): ?> disabled<?php endif; ?>
                                    <?php if ($watchDuration && ($settings['card_show_duration'] ?? '1') === '1'): ?> checked<?php endif; ?>>
                                <div>
                                    <span class="text-sm text-gray-700">Show duration badge</span>
                                    <p class="text-xs text-gray-500">Duration on bottom-right of thumbnail.</p>
                                    <?php if (!$watchDuration): ?>
                                        <p class="text-xs text-amber-600 mt-0.5">Disabled in <a href="/admin/appearance?sub=watch" class="underline font-medium">Watch</a>.</p>
                                    <?php endif; ?>
                                </div>
                            </label>

                            
                            <label class="flex items-start gap-3 cursor-pointer">
                                <input type="checkbox" name="card_show_thumbnail_hover" value="1" id="inp_hover"
                                       class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                    <?php if (($settings['card_show_thumbnail_hover'] ?? '1') === '1'): ?> checked<?php endif; ?>>
                                <div>
                                    <span class="text-sm text-gray-700">Hover zoom effect</span>
                                    <p class="text-xs text-gray-500">Zoom thumbnail on hover.</p>
                                </div>
                            </label>

                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Border radius</label>
                                <div class="flex items-center gap-3">
                                    <input type="range" name="card_border_radius" id="inp_radius" min="0" max="24" step="1"
                                           value="<?= htmlspecialchars($settings['card_border_radius'] ?? '12') ?>"
                                           class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                    <span id="lbl_radius" class="text-sm font-mono text-gray-600 w-10"><?= htmlspecialchars($settings['card_border_radius'] ?? '12') ?>px</span>
                                </div>
                            </div>

                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">Grid gap</label>
                                <div class="flex items-center gap-3">
                                    <input type="range" name="card_grid_gap" id="inp_gap" min="0" max="30" step="1"
                                           value="<?= htmlspecialchars($settings['card_grid_gap'] ?? '14') ?>"
                                           class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600">
                                    <span id="lbl_gap" class="text-sm font-mono text-gray-600 w-10"><?= htmlspecialchars($settings['card_grid_gap'] ?? '14') ?>px</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <div class="flex items-center gap-2.5">
                            <span class="text-gray-400"><i class="fa-solid fa-heading text-base"></i></span>
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Title & Meta</h3>
                                <p class="text-xs text-gray-500 mt-0.5">Text below the thumbnail.</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-5">

                            
                            <div class="space-y-4">
                                <label class="flex items-start gap-3 cursor-pointer">
                                    <input type="checkbox" name="card_show_title" value="1" id="inp_title"
                                           class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                                        <?php if (($settings['card_show_title'] ?? '1') === '1'): ?> checked<?php endif; ?>>
                                    <div>
                                        <span class="text-sm text-gray-700">Show title</span>
                                        <p class="text-xs text-gray-500">Display video title below thumbnail.</p>
                                    </div>
                                </label>

                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1.5">Title lines</label>
                                    <?php $titleLines = $settings['card_title_lines'] ?? '1'; ?>
                                    <div class="flex gap-2">
                                        <label class="flex-1 cursor-pointer">
                                            <input type="radio" name="card_title_lines" value="1" id="inp_lines1" class="sr-only peer" <?= $titleLines === '1' ? 'checked' : '' ?>>
                                            <div class="border-2 rounded-lg px-3 py-2 text-center transition-all text-sm
                                                        peer-checked:border-primary-600 peer-checked:bg-primary-50
                                                        border-gray-200 hover:border-gray-300">
                                                <span class="font-medium text-gray-700">1 line</span>
                                            </div>
                                        </label>
                                        <label class="flex-1 cursor-pointer">
                                            <input type="radio" name="card_title_lines" value="2" id="inp_lines2" class="sr-only peer" <?= $titleLines === '2' ? 'checked' : '' ?>>
                                            <div class="border-2 rounded-lg px-3 py-2 text-center transition-all text-sm
                                                        peer-checked:border-primary-600 peer-checked:bg-primary-50
                                                        border-gray-200 hover:border-gray-300">
                                                <span class="font-medium text-gray-700">2 lines</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            
                            <div class="space-y-4">
                                <?php
                                $metaOptions = [
                                    'views' => ['label' => 'Views',    'enabled' => $watchViews],
                                    'likes' => ['label' => 'Likes',    'enabled' => $watchLikes],
                                    'time'  => ['label' => 'Time ago', 'enabled' => $watchDate],
                                    'none'  => ['label' => 'None',     'enabled' => true],
                                ];
                                $ml = $settings['card_meta_left'] ?? 'views';
                                $mr = $settings['card_meta_right'] ?? 'time';
                                if (!($metaOptions[$ml]['enabled'] ?? true)) { $ml = 'none'; }
                                if (!($metaOptions[$mr]['enabled'] ?? true)) { $mr = 'none'; }
                                $anyDisabled = !$watchViews || !$watchLikes || !$watchDate;
                                ?>
                                <div>
                                    <label for="inp_meta_left" class="block text-xs font-medium text-gray-600 mb-1">Meta left</label>
                                    <select name="card_meta_left" id="inp_meta_left"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                        <?php foreach ($metaOptions as $val => $opt): ?>
                                            <option value="<?= $val ?>" <?= $ml === $val ? 'selected' : '' ?> <?= !$opt['enabled'] ? 'disabled' : '' ?>><?= $opt['label'] ?><?= !$opt['enabled'] ? ' (disabled)' : '' ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div>
                                    <label for="inp_meta_right" class="block text-xs font-medium text-gray-600 mb-1">Meta right</label>
                                    <select name="card_meta_right" id="inp_meta_right"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                                        <?php foreach ($metaOptions as $val => $opt): ?>
                                            <option value="<?= $val ?>" <?= $mr === $val ? 'selected' : '' ?> <?= !$opt['enabled'] ? 'disabled' : '' ?>><?= $opt['label'] ?><?= !$opt['enabled'] ? ' (disabled)' : '' ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <?php if ($anyDisabled): ?>
                                    <p class="text-xs text-amber-600">Some options disabled — see <a href="/admin/appearance?sub=watch" class="underline font-medium">Watch</a>.</p>
                                <?php endif; ?>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            
            <div class="xl:sticky xl:top-4">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200">
                    <div class="px-4 py-3 border-b border-gray-200">
                        <div class="flex items-center gap-2">
                            <span class="text-gray-400"><i class="fa-solid fa-eye text-sm"></i></span>
                            <h3 class="text-xs font-semibold text-gray-900 uppercase tracking-wide">Preview</h3>
                        </div>
                    </div>
                    <div class="p-4 flex justify-center">
                        <div id="cardPreview" style="width:260px;">
                            <article style="background:#fff;overflow:hidden;border:1px solid #e2e8f0;transition:all 0.2s;border-radius:8px;" id="previewCard">
                                <div style="position:relative;aspect-ratio:16/9;overflow:hidden;background:#1e293b;">
                                    <div style="width:100%;height:100%;background:linear-gradient(135deg,#334155 0%,#1e293b 100%);display:flex;align-items:center;justify-content:center;">
                                        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                                    </div>
                                    <span id="previewDuration" style="position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.8);color:#fff;padding:2px 5px;border-radius:4px;font-size:11px;font-weight:600;">12:34</span>
                                </div>
                                <div id="previewInfo" style="padding:10px;">
                                    <div id="previewTitle" style="font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;color:#1e293b;">Sample Video Title That Can Be Long</div>
                                    <div id="previewMeta" style="font-size:11px;color:#64748b;display:flex;justify-content:space-between;width:100%;">
                                        <span id="previewMetaLeft">1.2K views</span>
                                        <span id="previewMetaRight" style="text-align:right;">3 days ago</span>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="sticky bottom-0 bg-gray-50 pt-4 pb-2 -mx-4 px-4 sm:-mx-6 sm:px-6 mt-6" style="z-index: 10;">
            <button type="submit" class="inline-flex items-center px-5 py-2.5 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition-colors shadow-sm">
                <i class="fa-solid fa-check" style="margin-right:6px;font-size:12px;"></i> Save changes
            </button>
        </div>
    </form>

    <script>
    (function() {
        const metaLabels = {views: '1.2K views', likes: '342 likes', time: '3 days ago', none: ''};
        const $ = id => document.getElementById(id);
        const previewCard     = $('previewCard');
        const previewDuration = $('previewDuration');
        const previewTitle    = $('previewTitle');
        const previewInfo     = $('previewInfo');
        const previewMeta     = $('previewMeta');
        const previewMetaL    = $('previewMetaLeft');
        const previewMetaR    = $('previewMetaRight');

        function update() {
            previewDuration.style.display = $('inp_duration').checked ? '' : 'none';
            const r = $('inp_radius').value;
            previewCard.style.borderRadius = r + 'px';
            $('lbl_radius').textContent = r + 'px';
            const showTitle = $('inp_title').checked;
            previewTitle.style.display = showTitle ? '' : 'none';
            const lines2 = $('inp_lines2').checked;
            if (lines2) {
                previewTitle.style.whiteSpace = 'normal';
                previewTitle.style.display = showTitle ? '-webkit-box' : 'none';
                previewTitle.style.webkitLineClamp = '2';
                previewTitle.style.webkitBoxOrient = 'vertical';
                previewTitle.style.overflow = 'hidden';
            } else {
                previewTitle.style.whiteSpace = 'nowrap';
                previewTitle.style.display = showTitle ? '' : 'none';
                previewTitle.style.webkitLineClamp = '';
                previewTitle.style.webkitBoxOrient = '';
                previewTitle.style.overflow = 'hidden';
                previewTitle.style.textOverflow = 'ellipsis';
            }
            const ml = $('inp_meta_left').value;
            const mr = $('inp_meta_right').value;
            previewMetaL.textContent = metaLabels[ml] || '';
            previewMetaR.textContent = metaLabels[mr] || '';
            previewMeta.style.display = (ml === 'none' && mr === 'none') ? 'none' : '';
            const hasContent = showTitle || ml !== 'none' || mr !== 'none';
            previewInfo.style.display = hasContent ? '' : 'none';
            $('lbl_gap').textContent = $('inp_gap').value + 'px';
        }

        ['inp_duration','inp_hover','inp_radius','inp_title','inp_lines1','inp_lines2',
         'inp_meta_left','inp_meta_right','inp_gap'].forEach(function(id) {
            const el = $(id);
            if (el) el.addEventListener('input', update);
            if (el) el.addEventListener('change', update);
        });
        update();
    })();
    </script>
    <?php
});

 
HookSystem::addAction('admin.appearance_save.cards', function (): void {
     
    if (($_POST['_seg'] ?? 'videos') === 'albums') {
        foreach (['album_card_show_count','album_card_show_title','album_card_show_thumbnail_hover','album_card_show_views','album_card_show_date'] as $cb) {
            Setting::set($cb, isset($_POST[$cb]) ? '1' : '0');
        }
        Setting::set('album_card_title_lines', in_array($_POST['album_card_title_lines'] ?? '2', ['1','2'], true) ? $_POST['album_card_title_lines'] : '2');
        Setting::set('album_card_border_radius', (string) max(0, min(24, (int) ($_POST['album_card_border_radius'] ?? 12))));
        Setting::set('album_card_grid_gap', (string) max(0, min(30, (int) ($_POST['album_card_grid_gap'] ?? 14))));
        return;
    }
    foreach (['card_show_duration','card_show_title','card_show_thumbnail_hover'] as $cb) {
        Setting::set($cb, isset($_POST[$cb]) ? '1' : '0');
    }
    $metaOptions = ['views','likes','time','none'];
    foreach (['card_meta_left','card_meta_right'] as $mk) {
        $val = $_POST[$mk] ?? 'views';
        if (!in_array($val, $metaOptions, true)) { $val = 'views'; }
        Setting::set($mk, $val);
    }
    $gap = max(0, min(30, (int) ($_POST['card_grid_gap'] ?? 4)));
    Setting::set('card_grid_gap', (string) $gap);
    $radius = max(0, min(24, (int) ($_POST['card_border_radius'] ?? 8)));
    Setting::set('card_border_radius', (string) $radius);
    $lines = in_array($_POST['card_title_lines'] ?? '1', ['1','2'], true) ? $_POST['card_title_lines'] : '1';
    Setting::set('card_title_lines', $lines);
});
