<?php
$ic = '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';
$timelineEnabled = ($settings['transcode_timeline'] ?? '0') === '1';
$timelineCount = (int)($settings['transcode_timeline_count'] ?? 10);
?>

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

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 max-w-2xl">
        <div class="px-5 py-3.5 border-b border-gray-200">
            <h3 class="text-sm font-semibold text-gray-900">Timeline Screenshots</h3>
            <p class="text-xs text-gray-500 mt-0.5">Generates a sprite of screenshots from each video for hover scrubbing and player timeline.</p>
        </div>
        <div class="p-5 space-y-4">
            <label class="flex items-center gap-2.5 text-sm font-medium text-gray-700 cursor-pointer">
                <input type="checkbox" name="transcode_timeline" <?= $timelineEnabled ? 'checked' : '' ?> class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                Generate timeline screenshots
            </label>
            <div class="pl-7 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Number of screenshots</label>
                    <div class="flex items-center gap-2">
                        <input type="number" name="transcode_timeline_count" value="<?= $timelineCount ?>" min="5" max="60" class="<?= $ic ?>" style="width:80px">
                        <span class="text-xs text-gray-400">screenshots (5-60)</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-400">Higher = smoother scrubbing but larger file. 10-20 recommended.</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Start after (seconds)</label>
                    <div class="flex items-center gap-2">
                        <input type="number" name="transcode_timeline_start" value="<?= (int)($settings['transcode_timeline_start'] ?? 0) ?>" min="0" max="300" class="<?= $ic ?>" style="width:80px">
                        <span class="text-xs text-gray-400">seconds (0-300)</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-400">Skip the first X seconds of the video (useful to avoid intros/black screens). 0 = start from beginning.</p>
                </div>
            </div>
            <div class="pl-7 flex items-start gap-2 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-3">
                <i class="fa-solid fa-circle-info mt-0.5 shrink-0 text-amber-500"></i>
                <span>When enabled, timeline sprites replace the video preview on thumbnail hover. The sprites are also used in the player progress bar for precise scrubbing.</span>
            </div>
        </div>
    </div>

    <div class="mt-6">
        <button type="submit" class="inline-flex items-center gap-2 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="font-size:12px;"></i> Save
        </button>
    </div>
</form>
