{% extends 'base.html' %}
{% load static %}

{% block head %}
    <script>
        $(function() {
            // Show modal for live youtube conference
            {% if popup_header.value %}
                $('#liveModal').modal('show');
            {% endif %}

            $('#top').click(function() {
                $("html, body").animate({ scrollTop: 0 }, "slow");
            });

            $('#contact-submit').click(function() {
                var name = $('#contact-name');
                var email = $('#contact-email');
                var subject = $('#contact-subject');
                var body = $('#contact-body');

                function validateEmail($email) {
                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    return emailReg.test( $email );
                }

                if(!name.val()) name.effect('shake');
                if(!email.val() || !validateEmail(email.val())) email.effect('shake');
                if(!subject.val()) subject.effect('shake');
                if(!body.val()) body.effect('shake');

                if(name.val() && email.val() && validateEmail(email.val()) && subject.val() && body.val()) {
                    $.post({% url 'contact' %}, {
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                        name: name.val(),
                        email: email.val(),
                        subject: subject.val(),
                        body: body.val()
                    }).done(function(resp) {
                        if(resp['success']) {
                            name.val('');
                            email.val('');
                            subject.val('');
                            body.val('');
                            $('#contact-success').collapse('show');
                            setTimeout(function() {$('#contact-success').collapse('hide');}, 5000);
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}

{% block body %}
    <!-- Home -->
    <div class="container-fluid baby">
        <div class="row h-100">
            <div class="col-sm-6 col-md-5 py-5" style="background-color: rgba(0, 48, 91, 0.65)">
                <h1 class="float-right d-inline-block mr-5 pl-4 text-white"><strong>
                    Ontario<br>Association Of<br>Child<br>Protection<br>Lawyers
                </strong></h1>
            </div>
        </div>
    </div>

    <!-- Information -->
    <div class="container-fluid bg-light-blue py-5">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-4">
                    <h2 class="text-dark-primary">INFORMATION FOR THE PUBLIC</h2>
                </div>
                <div class="col-sm-12 col-md-4" style="font-size: 22px">
                    <ul class="mb-0">
                        <li class="text-dark-primary">FIND A CHILD PROTECTION LAWYER</li>
                        <li class="text-dark-primary">FIND AN EXPERT</li>
                        <li class="text-dark-primary">RESEARCH</li>
                    </ul>
                </div>
                <div class="col-sm-12 col-md-4" style="font-size: 22px">
                    <ul class="mb-0">
                        <li class="text-dark-primary">BECOME A MEMBER</li>
                        <li class="text-dark-primary">HOT TOPICS IN CHILD PROTECTION</li>
                        <li class="text-dark-primary">SEMINARS AND CLE</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- Our Objectives -->
    <div class="container-fluid bg-dark-primary text-white py-5">
        <div class="container">
            <div class="row text-center">
                <h2 class="mx-auto mb-5">OUR OBJECTIVES</h2>
                <div style="font-size: 22px">
                    {{ objectives.value | safe }}
                </div>
            </div>
        </div>
    </div>

    <!-- Page Brake -->
    <div class="cotainer-fluid hands"></div>

    {% if attorneys %}
    <!-- Attorneys -->
    <div class="cotainer-fluid bg-light-blue py-5">
        <div class="container">
            <div class="row">
                <h2 class="mx-auto text-dark-primary">CHARTER MEMBERS</h2>
            </div>
            <div class="row">
                {% for attorney in attorneys %}
                    <a class="col-4 text-center pt-5" href="{% url 'attorney' attorney.id %}">
                        <div>
                            <img class="pb-3" src="/media/{{ attorney.image }}" style="width: auto; max-width: 100%; height: 200px"/>
                            <h5 class="text-dark-primary">{{ attorney.first_name }} {{ attorney.last_name }}</h5>
                            <span class="text-light-primary">{{ attorney.position }}</span>
                            <hr>
                        </div>
                    </a>
                {% endfor %}
            </div>
            <div class="col-12 mt-3 text-center">
                <a class="text-dark-primary" href="{% url 'members' %}">View All</a>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Contact -->
    <div class="container-fluid architecture text-white">
        <div class="row h-100">
            <div class="col-lg-5 py-5 d-none d-sm-block" style="background-color: rgba(0, 63, 120, 0.95)">
                <h1 class="float-lg-right pl-4 d-inline-block mr-5 text-white"><strong>
                    Ontario <br class="d-none d-lg-inline">Association Of <br class="d-none d-lg-inline"> Child<br class="d-none d-lg-inline"> Protection<br class="d-none d-lg-inline"> Lawyers
                </strong></h1>
            </div>
            <div class="col-lg-7 py-5" style="background-color: rgba(0, 63, 120, 0.8)">
                <div class="col-lg-8 pl-4">
                    {{ contact.value|safe }}
                    <div class="form-row">
                        <div id="contact-success" class="col-12 collapse" aria-expanded="false">
                            <div class=" alert alert-success">Successfully sent email!</div>
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <input id="contact-name" class="form-control" placeholder="Name">
                        </div>
                        <div class="form-group col-12 col-md-6">
                            <input id="contact-email" class="form-control" placeholder="Email">
                        </div>
                        <div class="form-group col-12">
                            <input id="contact-subject" class="form-control" placeholder="Subject">
                        </div>
                        <div class="col-12">
                            <textarea id="contact-body" class="form-control h-100" placeholder="Message" rows="4"></textarea>
                        </div>
                        <div class="col-12 mt-2">
                            <button id="contact-submit" class="btn btn-primary float-right">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Back to top -->
    <div class="container-fluid bg-dark-primary text-center py-4">
        <a id="top" class="text-white curs-pointer">
            <img class="mx-auto" src="{% static 'main/img/arrow.png' %}" style="transform: rotate(180deg)">
            <br>
            BACK TO TOP
        </a>
    </div>

    {% if popup_header.value %}
        <div id="liveModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg modal-fade" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ popup_header.value | safe }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ popup_body.value | safe }}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}