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

{% block head %}
    <script>
        $(function() {
            // Show modal for live youtube conference
            {% if youtube %}
                $('#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">
                    <p>
                        The Ontario Association of Child Protection Lawyers consists of parents council, children's council who also do parent side work, representatives of Native Canadian organizations,
                        law students, and students-at-law who are completing their articles under the direction of parents council.
                    </p>
                    <p>
                        It started in Spring 2017 in Windsor, Ontario with a
                        group
                        of Family Lawyers who saw a need to increase the level of advocacy for children, families, and
                        communities
                        that were struggling in terms of Child Welfare.
                    </p>
                    <p>
                        The OACPL as an organization seeks to:
                    </p>
                    <p>
                        - increase the efficiency and level of professional expertise offered by Child Protection Lawyers in
                        Ontario
                    </p>
                    <p>
                        - provide public and professional education and input from Recognized Child Protection Lawyers on Child
                        Welfare Reform and Practice
                    </p>
                    <p>
                        - provide an organized body of Recognized Child Protection Lawyers that advocate politically and
                        socially on Child Welfare Matters in Ontario
                    </p>
                    <p>
                        - encourage the highest standards of practice and support for children, families and communities
                        affected by Child Protection Litigation.
                    </p>
                </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">
                    P.O. BOX 33010
                    <br>
                    LAKEVIEW R.O.
                    <br>
                    WINDSOR, ONTARIO
                    <br>
                    N8Y 0A2
                    <br>
                    Phone: (519) 566-1677
                    <br>
                    Fax: 1-226-318-0665
                    <br>
                    Email Care of David A. Sandor, Barrister & Solicitor, Acting Director:
                    <br>
                    {{ contact }}
                    <br>
                    <br>
                    <br>
                    For any general inquiries, please fill in the following contact form:
                    <br>
                    <br>
                    <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 youtube %}
        <div id="liveModal" class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel"><i class="fa fa-circle text-danger"></i> Live Conference</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <iframe width="100%" height="400px" src="{{ youtube }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}