{% extends 'base.html' %}

{% block js %}
    {{ block.super }}
    <script src="{{ STATIC_URL }}js/cirrus.js"></script>
    <script src="https://maps-api-ssl.google.com/maps/api/js?v=3.3&sensor=false&libraries=geometry"
            type="text/javascript"></script>
    <script src="/static/js/jquery.lightbox-0.5.js"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"
            type="text/javascript"></script>
    <script src="/static/js/gmap_script_updated.js" type="text/javascript"></script>
    <link href="/static/css/gmaps_style.css" rel="stylesheet" type="text/css" media="screen">
    <link href="/static/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen">
{% endblock js %}

{% block main %}
    <div class="container">
        <div class="tagline">
            <span>Cirrus Locator</span>
        </div>

        <div class="section" id="themap">
            <section>
                <div class="number-info">
                    <div class="contact">
                    </div>
                    <div class="contact-type">
                        <span class="title">General Inquiries</span>

                        <div class="number-contain">
                            <div class="type">TOLL-FREE</div>
                            <div class="number">800.279.4322</div>
                        </div>
                        <div class="number-contain">
                            <div class="type">INTERNATIONAL</div>
                            <div class="number">+1.218.529.7200</div>
                        </div>

                    </div>
                    <div class="contact-type">
                        <span class="title">Sales</span>

                        <div class="number-contain">
                            <div class="type">TOLL-FREE</div>
                            <div class="number">877.424.7787</div>
                        </div>
                        <div class="number-contain">
                            <div class="type">INTERNATIONAL</div>
                            <div class="number">+1.218.529.7292</div>
                        </div>
                    </div>
                    <div class="button web-request">
                        <a href="/webrequest/">WEB REQUEST</a>
                    </div>
                    <div class="button send-email">
                        <a href="mailto:info@cirrusaircraft.com">SEND EMAIL</a>
                    </div>
                </div>
                <div class="form">

                    <div class="right-box">
                        <div class="region_buttons">
                            <a href="/static/img/region_map.png" class="bigmap usmap">
                                <img src="/static/img/icons/region_map_button.png"/>
                            </a>

                            <a href="/static/img/INTL_Sales_Team.pdf" class="internationalmap" target="_blank">
                                <img src="/static/img/icons/country_map_button.png"/>
                            </a>

                            <a href="/static/img/ChinaSalesList.pdf" class="internationalmap" target="_blank">
                                <img src="/static/img/icons/china_map_button.png"/>
                            </a>
                        </div>

                        <div class="locator_image">
                            <img src="/static/img/locator_plane.png"/>
                        </div>

                    </div>

                    <form id="gmap_search_form">

                        <p>Use the locator below to find a Regional Sales Director ,
                            International Sales Center, Cirrus Sales Center, Authorized
                            Service Center (ASC), Cirrus Training Center (CTC), or
                            Cirrus Standardized Instructor Pilot (CSIP).
                        </p>

                        <br/>

                        <hr/>

                        <span><input type="radio" name="locator" value="zip" checked/>ZIP Code</span>
                        <input id="zipcode" type="text" name="zipcode"/>
                        <select id="radius">
                            <option value="100">100 miles</option>
                            <option value="200">200 miles</option>
                            <option value="300">300 miles</option>
                            <option selected="selected" value="500">500 miles</option>
                        </select><br/>
                        <span><input type="radio" name="locator" value="state"/>State</span>
                        {{ form.state }}
                        <br/>
                        <span><input type="radio" name="locator" value="country"/>Country</span>
                        {{ form.country }}
                        <br/>
                        <hr/>
                        <input id="gmap_search_submit" type="submit" value="SUBMIT"/>
                    </form>
                </div>
            </section>
        </div>


        <div class="section" id="theshops">
            <section>
                <p class="results"></p>

                <p class="results_amount"></p>

                <p class="multiplesales"></p>

                <div id="gmap_categories">
                    <ul></ul>
                </div>
                <ul class="locations">
                    <!--    Use js/jquery to add locations here $('ul.locations').append(stuff); -->
                </ul>
            </section>
        </div>


    </div>
{% endblock main %}