{% if vpState %}
<section class="contest-vp-card ui-panel">
  <header class="ui-panel__header"><h2 class="ui-panel__title">{{ _('Virtual Participation') }}</h2></header>
  <div class="ui-panel__body ui-stack">
    {% if vpState.phase == 'active' %}
      <p>{{ _('VP is in progress. Results will open after your participation ends.') }}</p>
      <p>{{ _('End at') }}: {{ contest.render_time(vpState.endAt) }}</p>
    {% elif vpState.phase == 'ended' %}
      <p>{{ _('VP has ended. You can now view the results.') }}</p>
    {% elif vpState.phase == 'declined' %}
      <p>{{ _('You chose not to participate virtually. This choice is final.') }}</p>
    {% else %}
      <p>{{ vpState.reason or _('Choose VP before viewing the problems or results. You may start now or schedule a future start.') }}</p>
    {% endif %}
    <div class="ui-actions ui-actions--start">
      <a class="button" href="{{ url('contest_vp', tid=tdoc.docId) }}">{{ _('Virtual Participation') }}</a>
      {% if vpState.canViewRanking %}<a class="button" href="{{ url('contest_scoreboard_view', tid=tdoc.docId, view='vp') }}">{{ _('VP Standings') }}</a>{% endif %}
    </div>
  </div>
</section>
{% endif %}