{% extends "layout/basic.html" %}
{% import "components/user.html" as user with context %}
{% import "components/contest.html" as contest with context %}
{% block content %}
<style>
.contest-vp .vp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.contest-vp .vp-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.contest-vp .vp-choice {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 10px;
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(12px);
}
.contest-vp .vp-choice h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.contest-vp .vp-schedule-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
  align-items: end;
}
.contest-vp .vp-schedule-form label {
  margin: 0;
}
.contest-vp .vp-schedule-form input[type="datetime-local"] {
  width: 100%;
  margin-top: 4px;
}
.contest-vp .vp-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.contest-vp .vp-meta-item {
  display: block;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}
.contest-vp .vp-muted,
.contest-vp .button.disabled {
  color: #64748b;
}
.contest-vp .button.disabled {
  opacity: .65;
  cursor: not-allowed;
}
.theme--dark .contest-vp .vp-meta-item {
  border-color: rgba(148, 163, 184, .28);
  background: rgba(31, 41, 55, .72);
  color: #e2e8f0;
}
.theme--dark .contest-vp .vp-choice {
  border-color: rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .5);
}
.theme--dark .contest-vp .vp-muted,
.theme--dark .contest-vp .button.disabled {
  color: #94a3b8;
}
@media screen and (max-width: 800px) {
  .contest-vp .vp-meta,
  .contest-vp .vp-choice-grid,
  .contest-vp .vp-schedule-form { grid-template-columns: 1fr; }
}
</style>
<div class="row contest-vp">
  <div class="medium-9 columns">
    <div class="section">
      <div class="section__header">
        <h1 class="section__title">{{ _('VP 虚拟参赛') }}</h1>
      </div>
      <div class="section__body typo">
        <p>
          <a href="{{ url('contest_detail', tid=tdoc.docId) }}">{{ tdoc.title }}</a>
          <span class="bp6-tag bp6-minimal">{{ _(model.contest.RULES[tdoc.rule].TEXT) }}</span>
        </p>
        <div class="vp-meta">
          <div class="vp-meta-item">{{ _('原比赛') }}<br>{{ contest.render_time(tdoc.beginAt) }} - {{ contest.render_time(tdoc.endAt) }}</div>
          <div class="vp-meta-item">{{ _('VP 时长') }}<br>{{ durationText }} {{ _('小时') }}</div>
          <div class="vp-meta-item">
            {{ _('榜单') }}<br>
            {% if vpState.canViewRanking %}
              <a href="{{ url('contest_scoreboard_view', tid=tdoc.docId, view='vp') }}" target="_blank">{{ _('VP 排名') }}</a>
              ·
              <a href="{{ url('contest_scoreboard', tid=tdoc.docId) }}" target="_blank">{{ _('比赛排名') }}</a>
            {% else %}
              <span class="vp-muted">{{ vpState.rankingLockedReason }}</span>
            {% endif %}
          </div>
        </div>

        {% if vpState.active %}
          <blockquote class="note">{{ _('VP 正在进行中。') }} {{ _('结束时间') }}: {{ contest.render_time(vpState.endAt) }}</blockquote>
          <div class="vp-actions">
            <a class="button rounded primary" href="{{ url('contest_problemlist', tid=tdoc.docId) }}">
              <span class="icon icon-play"></span> {{ _('继续 VP') }}
            </a>
            <span class="button rounded disabled" aria-disabled="true">
              <span class="icon icon-statistics"></span> {{ _('VP 完成后看榜') }}
            </span>
          </div>
        {% elif vpState.scheduled %}
          <blockquote class="note">
            {{ _('VP 已预约。') }}
            {{ _('开始时间') }}: {{ contest.render_time(vpState.startAt) }}，
            {{ _('结束时间') }}: {{ contest.render_time(vpState.endAt) }}。
            {{ _('预约开始前不能查看题目和榜单。') }}
          </blockquote>
          <div class="vp-choice-grid">
            <div class="vp-choice">
              <h2>{{ _('现在开始') }}</h2>
              <p>{{ _('放弃等待，立即开始个人 VP 计时。') }}</p>
              <form method="post" class="vp-actions">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="start">
                <button class="button rounded primary" type="submit">
                  <span class="icon icon-play"></span> {{ _('立即开始 VP') }}
                </button>
              </form>
            </div>
            <div class="vp-choice">
              <h2>{{ _('修改预约') }}</h2>
              <p>{{ _('可以在开始前调整预约时间。') }}</p>
              <form method="post" class="vp-schedule-form" data-vp-schedule data-start-at="{{ scheduledStartIso }}">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="schedule">
                <input type="hidden" name="startAt" data-vp-start-at>
                <label>
                  {{ _('开始时间') }}
                  <input type="datetime-local" name="localStartAt" data-vp-local-start required>
                </label>
                <button class="button rounded" type="submit">{{ _('更新预约') }}</button>
              </form>
            </div>
          </div>
        {% elif vpState.ended %}
          <blockquote class="note">{{ _('VP 已结束，可以查看榜单。') }}</blockquote>
          <div class="vp-actions">
            <a class="button rounded primary" href="{{ url('contest_scoreboard_view', tid=tdoc.docId, view='vp') }}" target="_blank">
              <span class="icon icon-statistics"></span> {{ _('VP 排名') }}
            </a>
            <a class="button rounded" href="{{ url('contest_scoreboard', tid=tdoc.docId) }}" target="_blank">
              <span class="icon icon-list"></span> {{ _('比赛排名') }}
            </a>
            <a class="button rounded" href="{{ url('record_main', query={tid:tdoc.docId}) }}">
              <span class="icon icon-flag"></span> {{ _('All Submissions') }}
            </a>
          </div>
        {% elif vpState.declined %}
          <blockquote class="note">{{ _('你已选择不参加本场 VP，可以直接查看题目和成绩表。') }}</blockquote>
          <div class="vp-actions">
            <a class="button rounded primary" href="{{ url('contest_problemlist', tid=tdoc.docId) }}">
              <span class="icon icon-list"></span> {{ _('查看题目') }}
            </a>
            <a class="button rounded" href="{{ url('contest_scoreboard', tid=tdoc.docId) }}">
              <span class="icon icon-statistics"></span> {{ _('查看成绩表') }}
            </a>
          </div>
        {% elif eligibility.ok %}
          <blockquote class="note">
            {{ _('这是你第一次访问这场已结束的比赛。请先选择是否参加 VP；选择后才能进入题目或成绩表。') }}
          </blockquote>
          <div class="vp-choice-grid">
            <div class="vp-choice">
              <h2>{{ _('不参加 VP') }}</h2>
              <p>{{ _('确认后立即开放题目和成绩表，本场比赛将不能再开启 VP。') }}</p>
              <form method="post" class="vp-actions">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="decline">
                <button class="button rounded" type="submit">
                  <span class="icon icon-list"></span> {{ _('不 VP，直接查看') }}
                </button>
              </form>
            </div>
            <div class="vp-choice">
              <h2>{{ _('参加 VP') }}</h2>
              <p>{{ _('可以立即开始，也可以预约未来的开始时间。选择 VP 后，结束前不能查看成绩表。') }}</p>
              <form method="post" class="vp-actions">
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="start">
                <button class="button rounded primary" type="submit">
                  <span class="icon icon-play"></span> {{ _('立即开始 VP') }}
                </button>
              </form>
              <form method="post" class="vp-schedule-form" data-vp-schedule>
                <input type="hidden" name="csrfToken" value="{{ handler.csrfToken }}">
                <input type="hidden" name="operation" value="schedule">
                <input type="hidden" name="startAt" data-vp-start-at>
                <label>
                  {{ _('预约开始时间') }}
                  <input type="datetime-local" name="localStartAt" data-vp-local-start required>
                </label>
                <button class="button rounded" type="submit">{{ _('预约 VP') }}</button>
              </form>
            </div>
          </div>
        {% else %}
          <blockquote class="warn">{{ eligibility.reason }}</blockquote>
          <div class="vp-actions">
            <a class="button rounded" href="{{ url('contest_detail', tid=tdoc.docId) }}">{{ _('返回比赛') }}</a>
            {% if vpState.canViewRanking %}
              <a class="button rounded" href="{{ url('contest_scoreboard_view', tid=tdoc.docId, view='vp') }}" target="_blank">{{ _('VP 排名') }}</a>
              <a class="button rounded" href="{{ url('contest_scoreboard', tid=tdoc.docId) }}" target="_blank">{{ _('比赛排名') }}</a>
            {% else %}
              <span class="button rounded disabled" aria-disabled="true">{{ _('VP 完成后看榜') }}</span>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
    {% include "partials/contest_sidebar.html" %}
  </div>
</div>
{% endblock %}