{% extends "./template.html" %}
{% block content %}
<form action={% url 'new_organisation' %} method="post" class="new_organisation">
    {% csrf_token %}
    <div class="card mt-4">
        <div class="card-header">
            <h2>New Organisation</h2>
        </div>
        <div class="card-body">
            {% if form_errors %}
                <div class="alert-danger">
                    {{ form_errors }}
                </div>
            {% endif %}

            <div class="form-group">
                <label for="id_organisation_name">Organisation Name</label>
                {{ new_organisation_form.organisation_name }}
            </div>
            <div class="form-group">
                <label for="id_organisation_website">Organisation Website</label>
                <div class="alert alert-danger" id="id_organisation_website_error">Sorry - but this is not a website. Please make sure it starts with https://</div>
                {{ new_organisation_form.organisation_website }}
            </div>
            <div class="form-group">
                <label for="id_organisation_email">Organisation Email</label>
                {{ new_organisation_form.organisation_email }}
            </div>
            {% if duplication_count == 0 %}
                <div class="form-row">
                    <input id="submit_organisation" type="submit" name="save" value="Submit New Organisation" class="btn btn-primary form-control col-md-6">
                    <a href={% url 'dashboard' %} class="btn btn-warning form-control col-md-6">Cancel</a>
                </div>
            {% endif %}
        </div>
    </div>

    {% if duplication_count > 0 %}
        <div class="card mt-4">
            <div class="card-header">
                <h2>Possible Duplication</h2>
            </div>
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <td>Organisation Name</td>
                            <td>Organisation Website</td>
                            <td>Organisation Email</td>
                        </tr>
                    </thead>
                    {% for row in duplicate_results %}
                        <tr>
                            <td>{{ row.organisation_name }}</td>
                            <td>{{ row.organisation_website }}</td>
                            <td>{{ row.organisation_email }}</td>
                        </tr>
                    {% endfor %}
                </table>
                <div class="form-row">
                    <input type="submit" name="save_duplicate" value="Yes Create Organisation" class="btn btn-primary form-control col-md-6">
                    <input type="button" onclick="location.href='{% url 'dashboard' %}'" value="No - Take me away" class="btn btn-warning form-control col-md-6">
                </div>
            </div>
        </div>
    {% endif %}
</form>
    <script>
        window.document.onload = check_url();

        function check_url() {
            /*
            The following function will check the URL input to make sure it starts with https://

            Method
            ~~~~~~
            1. Create a regexp
            2. Compare the string with that of the regexp
            3. If there is an error - show the error
            4. If there is no error - hide the error
             */
            var html_pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
                '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
                '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
                '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
            var url_string = document.getElementById("id_organisation_website").value;

            if (!html_pattern.test(url_string)) {
                $("#id_organisation_website_error").show();
            } else {
                $("#id_organisation_website_error").hide();
            }
        }
    </script>
{% endblock %}

