{% extends "registrasion/base.html" %}
{% load registrasion_tags %}
{% load lca2018_tags %}

{% block page_title %}Review your selection{% endblock %}
{% block page_lead %}
  Please ensure that you have selected all of the products you require, including
  t-shirts and social event tickets.
{% endblock %}

{% block scripts_extra %}
  {{ voucher_form.media.js }}
  {{ form.media.js }}
{% endblock %}


{% block proposals_body %}
  <h1 class="mb-4">Order Review</h1>

  {% items_pending as pending %}
  {% if pending %}
  <div class="my-4">
    <h2>Current selection</h2>
    <p>You've selected the following items, which will be in your invoice when you check out:<p>
    {% include "registrasion/_items_list.html" with items=pending %}
  </div>
  {% endif %}

  {% items_purchased as purchased %}
  {% if purchased %}
  <div class="my-4">
    <h2>Previously purchased</h2>
    <p>You've already paid for the following items:</p>
    {% include "registrasion/_items_list.html" with items=purchased suffix="<em>(PAID)</em>" %}
  </div>
  {% endif %}

  <div class="my-4">
    <h2>Modify your selection</h2>

    {% missing_categories as missing %}
    {% if missing %}
    <div class="alert alert-warning my-4 pb-4">
      <h4 class="alert-heading">You have empty categories</h4>
      <p>You have <em>not</em> selected anything from the following
        categories. If your ticket includes any of these, you still need to
        make a selection:
      </p>

      {% include "registrasion/_category_list.html" with categories=missing %}
    </div>
    {% endif %}

    <p>
      <strong>You can change your selection from these categories:</strong>
      {% available_categories as available %}
      {% include "registrasion/_category_list.html" with categories=available exclude=missing %}
    </p>
  </div>

  <div class="my-4">
    <h2>Voucher</h2>
    <p>If you have been given a voucher, please <a id="voucher-form-button" href="{% url "voucher_code" %}">enter your voucher code</a> now.
    </p>
  </div>

  <div class="my-4">
    <h2>What next?</h2>
    {% if pending %}
    <p>You can either check out an invoice and pay for your selections, or return to
        the dashboard.</p>

    <a class="btn btn-primary" href="{% url "checkout" %}">
      <i class="fa fa-credit-card"></i> Check out and pay
    </a>

    <a class="btn btn-light" href="{% url "dashboard" %}">Return to dashboard</a>

    {% else %}

    <p>You have no items that need to be paid.</p>

    <div class="form-actions">
      <a class="btn btn-light" href="{% url "dashboard" %}">Return to dashboard</a>
    </div>

    {% endif %}
  </div>

{% endblock %}