{% extends &quot;ngux-tophat/base.html&quot; %}

{% block footer %}{% endblock %}

{% block css %}
    
    {% block map-css %}<link rel="stylesheet" type="text/css" href="//cookbook.latimes.com/js/leaflet-1.0.0-b1/leaflet.css" />{% endblock %}
    <link rel="stylesheet" type="text/css" href="//cookbook.latimes.com/css/ngux-big-map-1.0.9.min.css" />
{% endblock %}

{% block extra-js %}
    
    {% block map-js %}<script src="//cookbook.latimes.com/js/leaflet-1.0.0-b1/leaflet.js" type="text/javascript"></script>{% endblock %}
{% endblock %}

{% block extra-head %}
    {% include "ngux-tophat/maps/custom-tools.html" %}
{% endblock %}

{% block nav %}
<div id="tophat-container">
    <div id="tophat" class="visible-desktop">
        <a id="tophat-logo" href="//www.latimes.com/"></a>
        <div class="tophat-links">
            {% include "ngux-tophat/nav/links.html" %}
            <div class="tophat-sharebuttons visible-desktop">
                <div class="sharebuttons">
                    <i class="LATFacebook" data-socialshare-type="facebook"></i>
                    <i class="LATTwitter" data-socialshare-type="twitter"></i>
                    <i class="LATEmail" data-socialshare-type="email"></i>
                </div>
            </div>
        </div>
    </div>
    <div id="tophat" class="tophat-small hidden-desktop">
        <span id="tophat-dropdown">
            <hr />
            <hr />
            <hr />
        </span>
        <a id="tophat-logo" href="//www.latimes.com/"></a>
        <div id="tophat-title">{% block small-headline %}{% endblock %}</div>
        <div class="tophat-links">
            {% include "ngux-tophat/nav/links.html" %}
            <div class="tophat-sharebuttons visible-desktop">
                <div class="sharebuttons">
                    <i class="LATFacebook" data-socialshare-type="facebook"></i>
                    <i class="LATTwitter" data-socialshare-type="twitter"></i>
                    <i class="LATEmail" data-socialshare-type="email"></i>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block container %}
<div class="container big-map-container" id="container">
    {% block content %}
        {% block big-map-holder %}
        <article class="row-fluid" id="big-map-holder">

            {% block big-box %}
            <hgroup id="big-box" class="overlay visible-desktop">
                <div id="big-box-close">
                    <a><i class="LATClose01"></i></a>
                </div>
                <h1>{% block big-box-headline %}{% endblock %}</h1>
                {% block big-box-byline %}
                <p class="byline">
                    By <span class="author"></span>
                </p>
                {% endblock %}
                <p class="dateline">
                    {% block big-box-dateline %}{% endblock %}
                </p>
                <div class="description">
                    {% block big-box-description %}{% endblock %}
                </div>
                {% block big-box-footnotes %}
                <div id="footnotes">
                    <p>Source{% block big-box-source-plural %}s{% endblock %}: {% block big-box-sources %}{% endblock %}</p>
                    <p>Credit{% block big-box-credit-plural %}s{% endblock %}: {% block big-box-credits %}{% endblock %}</p>
                </div>
                {% endblock %}
            </hgroup>
            <script type="text/javascript">
                $("#big-box-close a").click(function (e) {
                    $("#big-box").removeClass('visible-desktop').hide();
                    $(".info-btn").removeClass('hidden-desktop');
                });
            </script>
            {% endblock %}

            {% block small-box-modal %}
            <aside class="modal" id="small-box-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><i class="LATClose01"></i></button>
                            <h1>{% block small-box-modal-headline %}{% endblock %}</h1>
                        </div>
                        <div class="modal-body">
                            <div class="description">
                            {% block small-box-modal-description %}{% endblock %}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal"><i class="LATLocation"></i> See the map</button>
                        </div>
                    </div>
                </div>
            </aside>
            {% endblock %}

            {% block big-map-canvas %}
            <div id="big-map-canvas"></div>
            {% endblock %}

            {% block about-latimes %}
            <aside class="modal" id="tos-modal">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><i class="LATClose01"></i></button>
                            <h1>About latimes.com</h1>
                        </div>

                        <div class="modal-body">

                            <p>The Los Angeles Times is the largest metropolitan daily newspaper in the country,
                            with a daily readership of 1.4 million and 2.5 million on Sunday, more than 22 million unique
                            latimes.com visitors monthly and a combined print and online local weekly audience of 4.1 million.
                            The Pulitzer Prize-winning Times has been covering Southern California for more than 130 years.</p>

                            <div class="tos">
                                <a href="//www.latimes.com/lat-terms,0,7374802.story">Terms of Service</a> |
                                <a href="//privacy.tribune.com">Privacy Policy</a> |
                                <a href="//www.latimes.com/lat-about-our-ads,0,3875412.htmlstory">About Our Ads</a> |
                                <a href="//www.latimes.com/services/site/la-reprint-request-splash,0,6731163.htmlstory">© <script type="text/javascript">document.write(new Date().getFullYear())</script></a> |
                                <a href="//www.latimes.com/about/">About This Site</a>
                            </div>
                        </div>

                    </div>
                </div>
            </aside>
            <script type="text/javascript">
                $(document).ready(function(){
                    var href = "<a style='cursor:pointer;' onclick=\"$('#tos-modal').modal('toggle');\">About</a> | "
                    $(".leaflet-control-attribution").prepend(href);
                });
            </script>
            {% endblock %}

        </article>
        {% endblock %}

    {% endblock %}
</div>
{% endblock %}
