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

{% block header_title %}Product Category: {{ category.name }}{% endblock %}
{% block header_inset_image %}{% illustration "lavender.svg" %}{% endblock %}

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

  <script type="text/javascript">
    function showVoucherForm() {
      $("#voucher-form").show();
      $("#voucher-form-button").hide();
    }

  </script>

{% endblock %}

{% block content %}

  <button id="voucher-form-button" class="btn" onclick="showVoucherForm()">Enter voucher code</button>

  <form class="form-horizontal" method="post" action="">
    {% csrf_token %}

    <fieldset id="voucher-form" style="display: none;">
      {% include "_form_snippet.html" with form=voucher_form %}
      <div class="btn-group" />
        <input class="btn btn-primary" type="submit" value="Add voucher" />
      </div>
    </fieldset>

    <div class="vertical-bigger"></div>

    {% items_purchased category as items %}
    {% if items %}
      <h3>Paid items</h3>
      <p>You have already paid for the following items:</p>
      {% include "registrasion/_items_list.html" with items=items %}

    {% endif %}


    <h2>{{ category.name }}</h2>
    <blockquote>{{ category.description|safe }}</blockquote>

    <fieldset>

      {% if discounts %}
        <h3>Discounts and Complimentary Items</h3>
        <div class="vertical-small"></div>
        {% include "registrasion/discount_list.html" with discounts=discounts %}
        <blockquote><small>Any applicable discounts will be applied automatically when you check out.</small></blockquote>

        <hr />

      {% endif %}

      <h3>Make a selection</h3>
      {% include "_form_snippet.html" with form=form %}

      <br />
      <div class="btn-group">
          <input class="btn btn-primary" type="submit" value="Add to cart" />
          <a href="{% url "dashboard" %}" class="btn btn-default">Return to dashboard</a>
      </div>
    </fieldset>
  </form>


{% endblock %}