{% extends "manage_base.html" %}
{% import "components/ui/v1.html" as ui_v1 %}
{% import "course_video_library_fields.html" as cvv_v1 %}
{% block manage_content %}
<main class="course-video-library ui-page ui-page--compact-type ui-stack">
  {% call ui_v1.page_header(asset.number + ' · ' + asset.title) %}
    <a class="rounded primary button" href="{{ url('course_video_edit', assetId=asset.id) }}">编辑</a><a class="rounded button" href="{{ url('course_video_main') }}">返回视频库</a>
  {% endcall %}
  <section class="ui-panel">
    <div class="ui-panel__body ui-stack">
      <div class="ui-cluster"><span class="ui-badge">{{ '已停用' if asset.status == 'disabled' else '已启用' }}</span>{% for tag in asset.tags %}<a class="ui-badge" href="{{ url('course_video_main') }}?tag={{ tag|urlencode }}">{{ tag }}</a>{% endfor %}</div>
      <p class="course-video-library__description">{{ asset.description or '暂无简介' }}</p>
      <div class="ui-meta">FileId {{ asset.fileId }}{% if asset.hierarchyLabel %} · {{ asset.hierarchyLabel }}{% endif %}{% if asset.duration %} · {{ asset.duration }} 秒{% endif %}</div>
      {% if asset.status == 'ready' and asset.provider == 'vod' %}
      <div class="course-video-library__player course-video-playback ui-print-hidden" data-cvv-preview data-play-url="{{ url('course_video_play', assetId=asset.id) }}">
        <div class="cvv-player" data-cvv-player role="status">
          <div class="cvv-placeholder"><button class="rounded button" type="button" data-cvv-play>播放视频</button></div>
        </div>
      </div>
      {% else %}<p class="ui-muted">此视频当前不能播放。</p>{% endif %}
    </div>
  </section>
  <section class="ui-panel">
    <header class="ui-panel__header"><h2 class="ui-panel__title">引用位置 · {{ total }}</h2></header>
    <div class="ui-panel__body ui-stack">
      {% if references.length %}<ul class="ui-item-list ui-item-list--compact">{% for reference in references %}<li class="ui-item-list__item"><div class="ui-item-list__content"><div class="ui-meta">{{ reference.domain }} · {{ reference.kind }}</div>{% if reference.url %}<a class="ui-item-list__title" href="{{ reference.url }}">{{ reference.title }}</a>{% else %}<span>{{ reference.title }}</span>{% endif %}</div></li>{% endfor %}</ul>{{ cvv_v1.pagination(previousUrl, nextUrl, page, pages, total) }}
      {% else %}<p class="ui-muted">暂无课程或课程包引用。</p>{% endif %}
    </div>
  </section>
  <section class="ui-panel ui-print-hidden">
    <header class="ui-panel__header"><h2 class="ui-panel__title">管理 {{ ui_v1.help('停用会保留视频和引用，但停止播放和新绑定；永久删除同时删除云端文件，不可恢复。解除绑定请前往对应课程包节。', '视频管理') }}</h2></header>
    <div class="ui-panel__body ui-stack">
      <form method="post" action="{{ url('course_video_main') }}" class="ui-actions ui-actions--start"><input type="hidden" name="assetId" value="{{ asset.id }}"><button type="submit" name="operation" value="{{ 'enable' if asset.status == 'disabled' else 'disable' }}" class="rounded button">{{ '启用视频' if asset.status == 'disabled' else '停用视频' }}</button></form>
      {% if not total %}<details><summary>永久删除</summary><form method="post" action="{{ url('course_video_main') }}" class="ui-cluster">
        <input type="hidden" name="assetId" value="{{ asset.id }}">
        <label class="ui-field"><span class="ui-field__label">输入 {{ asset.number }} 确认永久删除云端视频</span><input name="confirmation" required pattern="{{ asset.number }}" autocomplete="off" class="textbox ui-field__control"></label>
        <button type="submit" name="operation" value="delete" class="rounded button">永久删除</button>
      </form></details>{% else %}<p class="ui-muted">正在被引用，不能永久删除。</p>{% endif %}
    </div>
  </section>
</main>
{% endblock %}