{% import "components/ui/v1.html" as ui_v1 %}
{% if contestVideo and (contestVideo.hasVideo or contestVideo.canBindVideo) %}
<section class="contest-video course-video-playback ui-panel" data-contest-video aria-labelledby="contest-video-title">
  <header class="ui-panel__header">
    <div class="ui-cluster ui-cluster--between">
      <h2 class="ui-panel__title" id="contest-video-title">{{ _('比赛视频') }}</h2>
      {% if contestVideo.canBindVideo %}
        <a class="rounded button ui-print-hidden" href="{{ contestVideo.editUrl }}">{{ _('更换视频') if contestVideo.hasVideo else _('选择视频') }}</a>
      {% endif %}
    </div>
  </header>
  <div class="ui-panel__body ui-stack">
    {% if not contestVideo.hasVideo %}
      <p class="ui-muted ui-mb-0">{{ _('尚未选用视频') }}</p>
    {% elif contestVideo.unavailable %}
      {{ ui_v1.alert(_('视频暂不可用'), tone='warning') }}
    {% elif contestVideo.canView %}
      {% set videoAsset = contestVideo.binding.asset %}
      <div class="ui-stack ui-stack--xs">
        <div class="ui-cluster">
          {{ ui_v1.badge(videoAsset.number) }}
          <h3 class="contest-video__title ui-item-list__title">{{ videoAsset.title }}</h3>
        </div>
        {% if videoAsset.description %}
          <p class="contest-video__description ui-muted ui-mb-0">{{ videoAsset.description }}</p>
        {% endif %}
      </div>
      <div class="cvv-player ui-print-hidden" data-cvv-player>
        <div class="cvv-placeholder">
          <button type="button" class="rounded primary button" data-cvv-load-play>
            <span class="icon icon-play" aria-hidden="true"></span> {{ _('播放视频') }}
          </button>
          <noscript>{{ _('请启用 JavaScript 后播放视频。') }}</noscript>
        </div>
      </div>
      <div role="status" aria-live="polite" data-contest-video-status></div>
    {% else %}
      <p class="ui-muted ui-mb-0">{{ _('比赛完成后可查看视频，VP 未完成时不会开放。') if contestVideo.attended else _('参加并完成比赛后可查看视频。') }}</p>
    {% endif %}
  </div>
</section>
{% endif %}