{% extends "layout/basic.html" %}
{% import "components/contest.html" as contest with context %}
{% import "components/ui/v1.html" as ui_v1 %}
{% block content %}
<div class="contest-vp-page ui-page ui-page--padded ui-stack ui-stack--lg">
  <header class="ui-hero">
    <div class="ui-hero__content">
      <h1 class="ui-hero__title">{{ _('Virtual Participation') }}</h1>
      <p class="ui-hero__description">{{ tdoc.title }}</p>
    </div>
    <div class="ui-hero__actions"><a class="button" href="{{ url('contest_main') }}">{{ _('Back to contest list') }}</a></div>
  </header>
  <section class="ui-panel">
    <div class="ui-panel__body ui-stack">
      <div class="ui-meta">{{ _('Original contest') }}: {{ contest.render_time(tdoc.beginAt) }} — {{ contest.render_time(tdoc.endAt) }}</div>
      <p>{{ _('Duration') }}: {{ durationText }} {{ _('hour(s)') }}</p>
      {% if vpState.phase == 'active' %}
        {{ ui_v1.alert(_('VP is in progress. Results will open after your participation ends.'), tone='info') }}
        <p>{{ _('End at') }}: {{ contest.render_time(vpState.endAt) }}</p>
        <div class="ui-actions ui-actions--start">
          <a class="button primary" href="{{ url('contest_problemlist', tid=tdoc.docId) }}">{{ _('Continue VP') }}</a>
          {% if handler.folderSubmitState() == 'available' %}<a class="button" href="{{ url('contest_folder_submit', tid=tdoc.docId) }}">文件夹提交</a>{% endif %}
        </div>
        {% if handler.folderSubmitState() == 'disabled' %}<p class="ui-muted">本场未开启文件夹提交，请从题目页面逐题提交。管理员需要在 VP 之外先开启功能并配置提交文件规则。</p>{% endif %}
        <details class="contest-vp-page__end">
          <summary>{{ _('End VP early') }}</summary>
          <form method="post" class="ui-stack ui-print-hidden">
            <input type="hidden" name="operation" value="end">
            <p>{{ _('Ending VP opens results and permanently stops submissions for this participation.') }}</p>
            <button class="button" type="submit">{{ _('Confirm end VP') }}</button>
          </form>
        </details>
      {% elif vpState.phase == 'ended' %}
        {{ ui_v1.alert(_('VP has ended. You can now view the results.'), tone='success') }}
        <div class="ui-actions ui-actions--start">
          <a class="button primary" href="{{ url('contest_scoreboard_view', tid=tdoc.docId, view='vp') }}">{{ _('VP Standings') }}</a>
          <a class="button" href="{{ url('contest_detail', tid=tdoc.docId) }}">{{ _('View Contest') }}</a>
        </div>
      {% elif vpState.phase == 'declined' %}
        {{ ui_v1.alert(_('You chose not to participate virtually. This choice is final.'), tone='neutral') }}
        <a class="button" href="{{ url('contest_detail', tid=tdoc.docId) }}">{{ _('View Contest') }}</a>
      {% elif vpState.canStart %}
        {% if vpState.phase == 'scheduled' %}
          {{ ui_v1.alert(_('VP is scheduled. Problems and results remain closed until your window starts.'), tone='info') }}
          <p>{{ _('Start at') }}: {{ contest.render_time(vpState.startAt) }}</p>
        {% else %}
          <p>{{ _('Choose VP before viewing the problems or results. You may start now or schedule a future start.') }}</p>
        {% endif %}
        <div class="ui-grid ui-grid--2 ui-print-hidden">
          <section class="ui-card"><div class="ui-card__body ui-stack">
            <h2 class="ui-card__title">{{ _('Start VP now') }}</h2>
            <p>{{ _('Your personal timer starts immediately after confirmation.') }}</p>
            <form method="post"><input type="hidden" name="operation" value="start"><button class="button primary" type="submit">{{ _('Start VP now') }}</button></form>
          </div></section>
          <section class="ui-card"><div class="ui-card__body ui-stack">
            <h2 class="ui-card__title">{{ _('Schedule VP') }}</h2>
            <form method="post" class="ui-stack">
              <input type="hidden" name="operation" value="schedule">
              <label class="ui-field" for="contest-vp-start"><span class="ui-field__label">{{ _('Start at') }} ({{ timezone }})</span></label>
              <input id="contest-vp-start" class="textbox ui-field__control" type="datetime-local" name="localStartAt" value="{{ scheduledLocal }}" required aria-describedby="contest-vp-timezone">
              <p id="contest-vp-timezone" class="ui-field__help">{{ _('Times use your account timezone shown above.') }}</p>
              <button class="button" type="submit">{{ _('Save schedule') }}</button>
            </form>
          </div></section>
        </div>
        {% if vpState.phase == 'none' %}
          <details class="ui-print-hidden"><summary>{{ _('Skip VP and view the contest') }}</summary>
            <form method="post" class="ui-stack">
              <input type="hidden" name="operation" value="decline">
              <p>{{ _('Skipping VP opens the problems and results. You cannot start VP for this contest later.') }}</p>
              <button class="button" type="submit">{{ _('Confirm skip VP') }}</button>
            </form>
          </details>
        {% endif %}
      {% else %}
        {{ ui_v1.alert(vpState.reason or _('VP is unavailable for this contest.'), tone='neutral') }}
        <a class="button" href="{{ url('contest_main') }}">{{ _('Back to contest list') }}</a>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}