{% extends "layout/basic.html" %}
{% import "components/ui/v1.html" as ui_v1 %}
{% import "course_video_library_fields.html" as cvv_v1 %}
{% block content %}
<div class="row"><div class="columns">
<main class="course-video-library ui-page ui-page--compact-type ui-stack">
  <nav class="ui-meta" aria-label="当前位置"><a class="course-video-library__utility" href="{{ url('manage_dashboard') }}">控制面板</a><span aria-hidden="true"> / </span><span aria-current="page">视频库</span></nav>
  <header class="ui-cluster ui-cluster--between">
    <h1 class="ui-hero__title">视频库</h1>
    <div class="ui-actions ui-print-hidden">
      <a class="course-video-library__utility" href="{{ url('course_video_folder_manage') }}">目录管理</a>
      <details class="course-video-library__more" data-cvv-more>
        <summary class="course-video-library__utility">更多 <span class="icon icon-expand_more" aria-hidden="true"></span></summary>
        <nav class="ui-panel course-video-library__menu" aria-label="更多视频管理操作">
          <ul class="ui-nav-list">
            <li class="ui-nav-list__item"><a class="ui-nav-list__link" href="{{ url('course_video_config') }}">VOD 配置</a></li>
{% if packageIntegration %}            <li class="ui-nav-list__item"><a class="ui-nav-list__link" href="{{ url('course_video_package_link') }}">课程包同步关系</a></li>{% endif %}
          </ul>
        </nav>
      </details>
      <a class="rounded primary button" href="{{ url('course_video_manual_register') }}">添加视频</a>
    </div>
  </header>
  <section class="ui-panel" aria-label="视频列表">
      <form method="get" class="ui-panel__body ui-stack ui-stack--sm ui-print-hidden" aria-label="筛选视频" data-cvv-library-search>
        <div class="ui-toolbar ui-toolbar--flush course-video-library__search">
          <input class="textbox course-video-library__query" type="search" name="q" aria-label="搜索视频" value="{{ q }}" placeholder="搜索视频号、名称、标签或 FileId">
          <button class="rounded button" type="submit">搜索</button>
        </div>
        <div class="ui-cluster ui-cluster--between">
          <div class="ui-cluster">
            <label class="ui-field course-video-library__filter course-video-library__folder-filter"><span class="ui-field__label course-video-library__filter-label">目录</span><select class="select ui-field__control" name="courseId"><option value="">全部目录</option>{% for folder in folderTree %}<option value="{{ folder.id }}"{% if currentCourseId == folder.id %} selected{% endif %}>{{ folder.name }}</option>{% endfor %}</select></label>
            <label class="ui-field course-video-library__filter course-video-library__status-filter"><span class="ui-field__label course-video-library__filter-label">状态</span><select class="select ui-field__control" name="status"><option value="">全部状态</option><option value="ready"{% if status == 'ready' %} selected{% endif %}>已启用</option><option value="disabled"{% if status == 'disabled' %} selected{% endif %}>已停用</option></select></label>
            {% if q or status or currentCourseId or tag %}<a class="course-video-library__utility" href="{{ url('course_video_main') }}">清除筛选</a>{% endif %}
          </div>
          <span class="ui-meta">共 {{ total }} 个视频</span>
        </div>
        {% if tag %}<p class="ui-meta">标签：{{ tag }}</p>{% endif %}
        {% if tag %}<input type="hidden" name="tag" value="{{ tag }}">{% endif %}
      </form>
      {% if assets.length %}
      <div class="ui-table-wrap" tabindex="0" role="region" aria-label="视频列表">
        <table class="data-table course-video-library__table">
          <colgroup><col class="course-video-library__number-col"><col><col class="course-video-library__tags-col"><col class="course-video-library__status-col"><col class="course-video-library__small-col"><col class="course-video-library__action-col"></colgroup>
          <thead><tr><th scope="col" class="course-video-library__number-cell">视频号</th><th scope="col">视频名 / 简介</th><th scope="col">标签</th><th scope="col">状态</th><th scope="col">引用</th><th scope="col" class="course-video-library__action-cell">操作</th></tr></thead>
          <tbody>{% for asset in assets %}<tr>
            <td class="course-video-library__number-cell"><a href="{{ url('course_video_detail', assetId=asset.id) }}">{{ asset.number }}</a></td>
            <td class="course-video-library__name"><a href="{{ url('course_video_detail', assetId=asset.id) }}">{{ asset.title }}</a>{% if asset.description %}<div class="ui-meta course-video-library__excerpt">{{ asset.description }}</div>{% endif %}</td>
            <td class="course-video-library__tags">{% for tag in asset.tags %}<a href="{{ url('course_video_main') }}?tag={{ tag|urlencode }}" title="{{ tag }}" aria-label="{{ tag }}">{{ tag|truncate(12, true) }}</a>{% if not loop.last %} / {% endif %}{% endfor %}</td>
            <td><span class="ui-muted">{{ '已停用' if asset.status == 'disabled' else ('旧存储' if asset.provider != 'vod' else '已启用') }}</span></td>
            <td>{{ asset.references }}</td><td class="course-video-library__action-cell"><a href="{{ url('course_video_edit', assetId=asset.id) }}">编辑</a></td>
          </tr>{% endfor %}</tbody>
        </table>
      </div>
      <footer class="ui-panel__footer">{{ cvv_v1.pagination(previousUrl, nextUrl, page, pages, total) }}</footer>
      {% else %}{{ ui_v1.empty_state('没有找到视频', '试试其他搜索条件，或添加新视频。') }}{% endif %}
  </section>
</main>
</div></div>
{% endblock %}