{{template "header" .}}
<main id="main" class="relative min-h-screen bg-black text-white pb-16 overflow-hidden" data-bj-history-page>
    <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none" aria-hidden="true">
        <div class="absolute inset-0 bg-black"></div>
        <div class="absolute inset-0 bg-gradient-to-br from-amber-600/10 via-transparent to-purple-900/5"></div>
        <div class="absolute top-0 right-0 w-[500px] h-[500px] bg-amber-500/10 rounded-full blur-[120px] -mr-64 -mt-64"></div>
        <div class="absolute bottom-0 left-0 w-[500px] h-[500px] bg-purple-500/10 rounded-full blur-[120px] -ml-64 -mb-64"></div>
    </div>

    <div class="relative z-10 pb-8 vi-container">
        <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
            <div>
                <h1 class="text-2xl lg:text-4xl font-bold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent tracking-tight">
                    {{if .title}}{{.title}}{{else}}观看历史{{end}}
                </h1>
                <p data-bj-history-count class="text-sm md:text-base text-gray-500 font-medium mt-2">共 0 部视频</p>
            </div>
            <div data-bj-history-toolbar class="hidden flex flex-wrap items-center gap-3">
                <div data-bj-history-actions-default class="flex flex-wrap items-center gap-3">
                    <button type="button" data-bj-history-select class="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-full transition-all border border-white/5">
                        选择
                    </button>
                    <button type="button" data-bj-history-clear class="px-4 py-2 text-sm text-amber-400 hover:text-amber-300 hover:bg-amber-700/10 rounded-full transition-all flex items-center gap-2 border border-amber-500/10">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        清空
                    </button>
                </div>
                <div data-bj-history-actions-select class="hidden flex flex-wrap items-center gap-3">
                    <button type="button" data-bj-history-select-all class="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-full transition-all border border-white/5">
                        全选
                    </button>
                    <button type="button" data-bj-history-delete disabled class="px-5 py-2 text-sm bg-amber-600 hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-full transition-all flex items-center gap-2 shadow-lg shadow-amber-900/20">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        删除 (0)
                    </button>
                    <button type="button" data-bj-history-cancel class="px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 rounded-full transition-all border border-white/5">
                        取消
                    </button>
                </div>
            </div>
        </header>

        <div data-bj-history-loading class="flex items-center justify-center min-h-[40vh]">
            <div class="w-8 h-8 border-2 border-gray-600 border-t-red-600 rounded-full animate-spin"></div>
        </div>

        <div data-bj-history-empty class="hidden flex flex-col items-center justify-center py-20">
            <div class="w-24 h-24 bg-gray-800 rounded-full flex items-center justify-center mb-6">
                <svg class="w-12 h-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h2 class="text-xl font-semibold bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent mb-2">暂无观看历史</h2>
            <p class="text-gray-400 mb-6">开始观看视频后，历史记录将显示在这里</p>
            <a href="{{the_permalink ``}}" class="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white rounded-full text-sm font-medium transition-colors">去首页看看</a>
        </div>

        <div data-bj-history-grid class="hidden relative grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 md:gap-6 py-2"></div>
    </div>
</main>
<div class="relative z-10">
{{template "footer" .}}
</div>