<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>录播节目查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
</head>
<body>
@include("common.header")
<div class="font-bold">数据待补充完整</div>
<form class="form" action="">
    <label for="keyword">查找节目关键词,空格隔开查找多个关键词,暂不支持通过点播老板搜索</label>
    <input class="border border-black" type="text" name="keyword" id="keyword" value="{{$keyword}}">
    <input class="border border-black" type="submit">
</form>
<table class="table-auto border-collapse w-full lg:border lg:border-black">
    <thead>
    <tr class="border border-black sticky bg-white lg:static top-0 left-0 right-0">
        <th class="border border-black">节目名称</th>
        <th class="border border-black">点播及追加</th>
        <th class="border border-black hidden lg:table-cell">节目开始</th>
        <th class="border border-black hidden lg:table-cell">节目结束</th>
    </tr>
    </thead>
    <tbody>
    @foreach($programs as $program)
        <tr>
            <td class="border align-top w-1/2 lg:w-1/4">
                <a class="text-blue-600 lg:text-current underline lg:no-underline" href="/programs/{{ $program->id }}/video">
                    <span title="节目">{{$program->name}}</span>
                    <span title="难度">{{$program->difficulty}}</span>
                    <span title="要求">{{$program->desc}}</span>
                </a>
            </td>
            <td class="border align-top w-1/2 lg:w-1/4">
                @foreach($program->appends as $append)
                    <x-append :append="$append"></x-append>
                @endforeach
            </td>
            <td class="border align-top hidden lg:table-cell lg:w-1/4">
                @foreach($program->video_pivots as $video_pivot)
                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->start_part" :time="$video_pivot->start_time">
                        <div>{{$video_pivot->created_at}} P{{$video_pivot->start_part}}#{{$video_pivot->start_time}}</div>
                        @if($video_pivot->start_image)
                            <img width="300" src="{{$video_pivot->start_image}}" alt="开始时的画面">
                        @else
                            节目开始位置
                        @endif
                    </x-links.video_link>
                @endforeach
            </td>
            <td class="border align-top hidden lg:table-cell lg:w-1/4">
                @foreach($program->video_pivots as $video_pivot)
                    <x-links.video_link :bvid="$video_pivot->video_bvid" :part="$video_pivot->stop_part" :time="$video_pivot->stop_time">
                        <div>P{{$video_pivot->stop_part}}#{{$video_pivot->stop_time}}</div>
                        @if($video_pivot->start_image)
                            <img width="300" src="{{$video_pivot->stop_image}}" alt="结束时的画面">
                        @else
                            节目结束位置
                        @endif
                    </x-links.video_link>
                @endforeach
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
{{$programs->links()}}
@include("common.footer")
</body>
</html>