{% extends 'eventauthorisation.html' %}
{% load widget_tweaks %}

{% block js %}
{% endblock %}

{% block authorisation %}
<div class="row">
    <div class="col-sm-12">
        <div class="card border-primary">
            <div class="card-header" id="eventauth">Event Authorisation</div>

            <div class="card-body">
                <form class=" itemised_form" role="form" method="POST" action="#eventauth">
                    {% csrf_token %}
                    {% include 'form_errors.html' %}
                    <div class="row">
                        <div class="col-sm-12">
                            <p>
                                I agree that I am authorised to approve this event. I agree that I am the
                                <strong>President/Treasurer or account holder</strong> of the hirer, or that I
                                have the written permission of the
                                <strong>President/Treasurer or account holder</strong> of the hirer stating that
                                I can authorise this event.
                            </p>
                        </div>

                        <div class="col-sm-12 col-md-6">
                            <div class="col-sm-12 form-group form-row" data-toggle="tooltip"
                                 title="Your name as the person authorising the event.">
                                <label for="{{ form.name.id_for_label }}"
                                       class="col-sm-4 col-form-label">{{ form.name.label }}</label>

                                <div class="col-sm-8">
                                    {% render_field form.name class+="form-control" %}
                                </div>
                            </div>

                            <div class="col-sm-12 form-group form-row" data-toggle="tooltip"
                                 title="Your Student ID or Staff username as the person authorising the event.">
                                <label for="{{ form.uni_id.id_for_label }}"
                                       class="col-sm-4 col-form-label">{{ form.uni_id.label }}</label>
                                <div class="col-sm-8">
                                    {% render_field form.uni_id class+="form-control" %}
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12 col-md-6">
                            <div class="col-sm-12 form-group form-row" data-toggle="tooltip"
                                 title="The Students' Union account code you wish this event to be charged to.">
                                <label for="{{ form.account_code.id_for_label }}"
                                       class="col-sm-4 col-form-label">{{ form.account_code.label }}</label>
                                <div class="col-sm-8">
                                    {% render_field form.account_code class+="form-control" %}
                                </div>
                            </div>

                            <div class="col-sm-12 form-group form-row" data-toggle="tooltip"
                                 title="The full amount chargable for this event as displayed above, including VAT.">
                                <label for="{{ form.amount.id_for_label }}"
                                       class="col-sm-4 col-form-label">{{ form.amount.label }}</label>
                                <div class="col-sm-8">
                                    <div class="input-group mb-3">
                                      <div class="input-group-prepend">
                                        <span class="input-group-text">£</span>
                                      </div>
                                    {% render_field form.amount class+="form-control" %}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-12">
                            <div class="col-sm-12 col-md-8 form-group">
                                <div class="col-sm-offset-4 col-sm-8 col-md-offset-3" data-toggle="tooltip"
                                     title="In order to book an event you must agree to the TEC Terms of Hire.">
                                    <div class="checkbox">
                                        <label>
                                            {% render_field form.tos %} I have read and agree to the TEC
                                            <a href="{{ tos_url }}">Terms of Hire</a>. E&OE.
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="text-right">
                                <div class="btn-group">
                                    <button class="btn btn-primary btn-lg" type="submit">Authorise</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}