<?php
$seg = ($_GET['seg'] ?? 'videos') === 'albums' ? 'albums' : 'videos';
$watchSubTabs = ['videos' => 'Videos', 'albums' => 'Albums'];
?>
<div class="mb-6 border-b border-gray-200">
    <nav class="flex gap-1 -mb-px admin-tabs">
        <?php foreach ($watchSubTabs as $segKey => $segLabel): ?>
            <a href="/admin/appearance?sub=watch&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'): ?>
<form method="POST" action="/admin/appearance">
    <?= Router::csrfField() ?>
    <input type="hidden" name="_tab" value="appearance">
    <input type="hidden" name="_sub" value="watch">
    <input type="hidden" name="_seg" value="albums">

    <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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Gallery Info</h3>
                <p class="text-xs text-gray-500 mt-1">Choose what is shown on the single gallery page. Hidden automatically when no data is available.</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <?php
                    $albInfo = [
                        ['key'=>'album_show_views','label'=>'Views count','desc'=>'Show number of views','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>'],
                        ['key'=>'album_show_date','label'=>'Date published','desc'=>'Show the published date','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>'],
                        ['key'=>'album_show_likes','label'=>'Like / Dislike','desc'=>'Show like & dislike buttons','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>'],
                        ['key'=>'album_show_favorites','label'=>'Favorite button','desc'=>'Show the heart/favorite button','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'],
                        ['key'=>'album_allow_download','label'=>'Download button','desc'=>'Allow downloading images from the lightbox','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>'],
                    ];
                    foreach ($albInfo as $t): $checked = ($settings[$t['key']] ?? '1') === '1'; ?>
                    <label class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all <?= $checked ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' ?>"
                           onclick="setTimeout(()=>{let c=this.querySelector('input');this.className=this.className.replace(/border-primary-200 bg-primary-50\/50|border-gray-200/g,c.checked?'border-primary-200 bg-primary-50/50':'border-gray-200')},0)">
                        <input type="checkbox" name="<?= $t['key'] ?>" value="1" class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"<?= $checked ? ' checked' : '' ?>>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2"><span class="text-gray-400"><?= $t['icon'] ?></span><span class="text-sm font-medium text-gray-700"><?= $t['label'] ?></span></div>
                            <p class="text-xs text-gray-500 mt-0.5"><?= $t['desc'] ?></p>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Gallery Details</h3>
                <p class="text-xs text-gray-500 mt-1">Toggle the metadata panels in the gallery sidebar.</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <?php
                    $albDetails = [
                        ['key'=>'album_show_pornstars','label'=>'Pornstars','desc'=>'Show pornstar chips','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'],
                        ['key'=>'album_show_channels','label'=>'Channels','desc'=>'Show channel badges','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"/><polyline points="17 2 12 7 7 2"/></svg>'],
                        ['key'=>'album_show_categories','label'=>'Categories','desc'=>'Show category links','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>'],
                        ['key'=>'album_show_tags','label'=>'Tags','desc'=>'Show tag pills','icon'=>'<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>'],
                    ];
                    foreach ($albDetails as $t): $checked = ($settings[$t['key']] ?? '1') === '1'; ?>
                    <label class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all <?= $checked ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' ?>"
                           onclick="setTimeout(()=>{let c=this.querySelector('input');this.className=this.className.replace(/border-primary-200 bg-primary-50\/50|border-gray-200/g,c.checked?'border-primary-200 bg-primary-50/50':'border-gray-200')},0)">
                        <input type="checkbox" name="<?= $t['key'] ?>" value="1" class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"<?= $checked ? ' checked' : '' ?>>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2"><span class="text-gray-400"><?= $t['icon'] ?></span><span class="text-sm font-medium text-gray-700"><?= $t['label'] ?></span></div>
                            <p class="text-xs text-gray-500 mt-0.5"><?= $t['desc'] ?></p>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Related Galleries</h3>
                <p class="text-xs text-gray-500 mt-1">Configure the related galleries shown below each gallery. Set to 0 to hide.</p>
            </div>
            <div class="p-6">
                <label for="related_albums_count" class="block text-sm font-medium text-gray-700 mb-2">Number of related galleries</label>
                <div class="flex items-center gap-4">
                    <input type="range" id="related_albums_count_range" min="0" max="24" step="1" value="<?= (int)($settings['related_albums_count'] ?? 12) ?>" class="w-full max-w-[256px] h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600" oninput="document.getElementById('related_albums_count').value=this.value;document.getElementById('raLabel').textContent=this.value">
                    <input type="number" id="related_albums_count" name="related_albums_count" value="<?= (int)($settings['related_albums_count'] ?? 12) ?>" min="0" max="24" class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm text-center focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" oninput="document.getElementById('related_albums_count_range').value=this.value;document.getElementById('raLabel').textContent=this.value">
                    <span id="raLabel" class="text-sm font-medium text-gray-600"><?= (int)($settings['related_albums_count'] ?? 12) ?></span>
                    <span class="text-xs text-gray-400">galleries</span>
                </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>
<?php return; endif; ?>

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

    <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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Player</h3>
                <p class="text-xs text-gray-500 mt-1">Configure the FluidPlayer video player controls and behavior. These settings only apply to uploaded or URL-based videos, not to embed videos.</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <?php
                    $defaultQuality = $settings['player_default_quality'] ?? 'auto';
                    $qualityOptions = ['auto' => 'Auto (highest available)', '1080' => '1080p', '720' => '720p', '480' => '480p', '360' => '360p'];
                    ?>
                    <div class="col-span-full mb-2">
                        <div class="flex items-start gap-3 p-3 rounded-lg border-2 border-gray-200">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-2">
                                    <span class="text-gray-400"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-4"/></svg></span>
                                    <span class="text-sm font-medium text-gray-700">Default quality</span>
                                </div>
                                <select name="player_default_quality" class="w-full max-w-xs 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 ($qualityOptions as $qv => $ql): ?>
                                    <option value="<?= $qv ?>" <?= $defaultQuality === $qv ? 'selected' : '' ?>><?= $ql ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <p class="text-xs text-gray-500 mt-1">If the selected quality is not available, the closest lower quality is used. Falls back to the highest available.</p>
                            </div>
                        </div>
                    </div>
                    <?php
                    $playerToggles = [
                        ['key' => 'player_playback_rate',        'label' => 'Playback speed',      'desc' => 'Allow users to change video speed (0.5x, 1x, 1.5x, 2x)', 'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>'],
                        ['key' => 'player_allow_download',       'label' => 'Download button',     'desc' => 'Show a download button in the player controls',          'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>'],
                        ['key' => 'player_loop',                 'label' => 'Loop playback',       'desc' => 'Automatically restart the video when it ends',           'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>'],
                        ['key' => 'player_doubleclick_fullscreen','label' => 'Double-click fullscreen','desc' => 'Enter fullscreen by double-clicking the video',      'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>'],
                    ];
                    foreach ($playerToggles as $t):
                        $checked = ($settings[$t['key']] ?? '0') === '1';
                    ?>
                    <label class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
                                  <?= $checked ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' ?>"
                           onclick="setTimeout(()=>{let c=this.querySelector('input');this.className=this.className.replace(/border-primary-200 bg-primary-50\/50|border-gray-200/g,c.checked?'border-primary-200 bg-primary-50/50':'border-gray-200')},0)">
                        <input type="checkbox" name="<?= $t['key'] ?>" value="1"
                               class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                            <?= $checked ? ' checked' : '' ?>>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-400"><?= $t['icon'] ?></span>
                                <span class="text-sm font-medium text-gray-700"><?= $t['label'] ?></span>
                            </div>
                            <p class="text-xs text-gray-500 mt-0.5"><?= $t['desc'] ?></p>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Video Info</h3>
                <p class="text-xs text-gray-500 mt-1">Choose which information is displayed on the video watch page.</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <?php
                    $toggles = [
                        ['key' => 'watch_show_views',     'label' => 'Views count',    'desc' => 'Show number of views',           'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>'],
                        ['key' => 'watch_show_duration',  'label' => 'Duration',       'desc' => 'Show video duration',            'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>'],
                        ['key' => 'watch_show_date',      'label' => 'Date published', 'desc' => 'Show "X time ago" label',        'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>'],
                        ['key' => 'watch_show_likes',     'label' => 'Like / Dislike', 'desc' => 'Show like & dislike buttons + ratio bar', 'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>'],
                        ['key' => 'watch_show_favorites', 'label' => 'Favorite button','desc' => 'Show the heart/favorite button',  'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'],
                    ];
                    foreach ($toggles as $t):
                        $checked = ($settings[$t['key']] ?? '1') === '1';
                    ?>
                    <label class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
                                  <?= $checked ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' ?>"
                           onclick="setTimeout(()=>{let c=this.querySelector('input');this.className=this.className.replace(/border-primary-200 bg-primary-50\/50|border-gray-200/g,c.checked?'border-primary-200 bg-primary-50/50':'border-gray-200')},0)">
                        <input type="checkbox" name="<?= $t['key'] ?>" value="1"
                               class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                            <?= $checked ? ' checked' : '' ?>>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-400"><?= $t['icon'] ?></span>
                                <span class="text-sm font-medium text-gray-700"><?= $t['label'] ?></span>
                            </div>
                            <p class="text-xs text-gray-500 mt-0.5"><?= $t['desc'] ?></p>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Video Details</h3>
                <p class="text-xs text-gray-500 mt-1">Toggle metadata sections below the video player. Hidden automatically when no data is available.</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <?php
                    $detailToggles = [
                        ['key' => 'watch_show_pornstars',  'label' => 'Pornstars',  'desc' => 'Show pornstar chips with photos',  'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'],
                        ['key' => 'watch_show_channels',    'label' => 'Channels',    'desc' => 'Show channel badges',               'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"/><polyline points="17 2 12 7 7 2"/></svg>'],
                        ['key' => 'watch_show_categories', 'label' => 'Categories', 'desc' => 'Show category links',              'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>'],
                        ['key' => 'watch_show_tags',       'label' => 'Tags',       'desc' => 'Show tag pills',                   'icon' => '<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>'],
                    ];
                    foreach ($detailToggles as $t):
                        $checked = ($settings[$t['key']] ?? '1') === '1';
                    ?>
                    <label class="flex items-start gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
                                  <?= $checked ? 'border-primary-200 bg-primary-50/50' : 'border-gray-200 hover:border-gray-300' ?>"
                           onclick="setTimeout(()=>{let c=this.querySelector('input');this.className=this.className.replace(/border-primary-200 bg-primary-50\/50|border-gray-200/g,c.checked?'border-primary-200 bg-primary-50/50':'border-gray-200')},0)">
                        <input type="checkbox" name="<?= $t['key'] ?>" value="1"
                               class="mt-0.5 w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                            <?= $checked ? ' checked' : '' ?>>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-gray-400"><?= $t['icon'] ?></span>
                                <span class="text-sm font-medium text-gray-700"><?= $t['label'] ?></span>
                            </div>
                            <p class="text-xs text-gray-500 mt-0.5"><?= $t['desc'] ?></p>
                        </div>
                    </label>
                    <?php endforeach; ?>
                </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">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Related Videos</h3>
                <p class="text-xs text-gray-500 mt-1">Configure the related videos sidebar.</p>
            </div>
            <div class="p-6">
                <label for="related_videos_count" class="block text-sm font-medium text-gray-700 mb-2">Number of related videos</label>
                <div class="flex items-center gap-4">
                    <input type="range" id="related_videos_count_range" min="2" max="20" step="1"
                           value="<?= (int)($settings['related_videos_count'] ?? 8) ?>"
                           class="w-full max-w-[256px] h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600"
                           oninput="document.getElementById('related_videos_count').value=this.value;document.getElementById('rvLabel').textContent=this.value">
                    <input type="number" id="related_videos_count" name="related_videos_count"
                           value="<?= (int)($settings['related_videos_count'] ?? 8) ?>" min="2" max="20"
                           class="w-20 px-3 py-2 border border-gray-300 rounded-lg text-sm text-center focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none"
                           oninput="document.getElementById('related_videos_count_range').value=this.value;document.getElementById('rvLabel').textContent=this.value">
                    <span id="rvLabel" class="text-sm font-medium text-gray-600"><?= (int)($settings['related_videos_count'] ?? 8) ?></span>
                    <span class="text-xs text-gray-400">videos</span>
                </div>
                <p class="mt-2 text-xs text-gray-500">Displayed in a 2-column grid in the sidebar.</p>
            </div>
        </div>
    </div>

    <style>
    @media(max-width:479px){.flex.items-center.gap-4 input[type="range"]{max-width:160px}}
    </style>
    <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>
