{% extends request.is_ajax|yesno:'base_ajax.html,base_rigs.html' %}
{% load widget_tweaks %}
{% load static %}
{% load button from filters %}

{% block title %}Request Authorisation{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="alert alert-warning pb-0">
                <h1>Send authorisation request email.</h1>
                <p>Pressing send will email the address provided. <strong>Please triple check everything before continuing.</strong></p>
            </div>

            <div class="alert alert-info pb-0">
                {% if object.person.email or object.organisation.email %}
                <dl class="dl-horizontal">
                    {% if object.person.email %}
                    <dt>Person Email</dt>
                    <dd><span id="person-email" class="pr-1">{{ object.person.email }}</span> {% button 'copy' id='#person-email' %}</dd>
                    {% endif %}
                    {% if object.organisation.email %}
                    <dt>Organisation Email</dt>
                    <dd><span id="org-email" class="pr-1">{{ object.organisation.email }}</span> {% button 'copy' id='#org-email' %}</dd>
                    {% endif %}
                </dl>
                {% else %}
                <p>No email addresses saved to the client &#3232;_&#3232;</p>
                {% endif %}
            </div>
            <form action="{{ form.action|default:request.path }}" method="POST" id="auth-request-form">
                {% csrf_token %}
                {% include 'form_errors.html' %}
                <div class="form-group row">
                    <label class="col-sm-4 col-form-label"
                           for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
                    <div class="col-sm-8">
                        {% render_field form.email type="email" class+="form-control" %}
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="{% static 'js/tooltip.js' %}"></script>
    <script src="{% static 'js/popover.js' %}"></script>
    <script src="{% static 'js/clipboard.min.js' %}"></script>
    <script>
        $('#auth-request-form').on('submit', function () {
            $('#auth-request-form button').attr('disabled', true);
        });
        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function(e) {
            $(e.trigger).popover('show');
            window.setTimeout(function () {$(e.trigger).popover('hide')}, 3000);
            e.clearSelection();
        });
    </script>
{% endblock %}

{% block footer %}
<div class="form-row">
    <div class="btn-group" role="group">
        <a type="button" target="_blank" href="{% url 'event_authorise_preview' object.pk %}" class="btn btn-info text-nowrap"><span class="fas fa-drafting-compass"></span> Preview</a>
        <button type="submit" class="form-control btn btn-primary" form="auth-request-form">
            <span class="fas fa-paper-plane"></span> Send
        </button>
    </div>
</div>
{% endblock %}