School District Detail page

<header data-dialog="inertcontainer">

    <h1 class="u-visuallyhidden" id="header-document">Program Finder</h1>

    <nav class="quicklinks" aria-label="quicklinks" data-menu="inertcontainer">
        <a href="#main">Go to page content</a>
    </nav>

    <div class="header l-containerxaxis">
        <a href="#">
            <svg>
                <use xlink:href="#icon-logo"></use>
            </svg>
        </a>
    </div>

</header>

<main id="main">

    <div data-dialog="inertcontainer">

        <header class="banner banner-detail l-containerxaxis">
            <div id="banner-x-mapbackground" class="banner-x-mapbackground"></div>
            <div class="banner-x-content">
                <div class="banner-x-title">
                    <h2>Anaheim Union High School District</h2>
                    <div class="banner-x-exporttablet">
                        <button class="button" type="button">Export</button>
                        <button class="button" type="button">Print</button>
                    </div>
                </div>
                <div class="banner-x-link">
                    <span>Part of:&nbsp;</span><strong>North Orange County ROP</strong>
                    <a href="#">
                        <svg>
                            <use xlink:href="#icon-externallink"></use>
                        </svg>
                    </a>
                </div>
                <div class="banner-x-body">
                    <div class="banner-x-bodysection">
                        <div class="banner-x-label">DISTRICT:</div>
                        <div class="banner-x-name">Scott Reindl<span>District CTE Director</span></div>
                        <a href="#">Reindl_s@ahusd.us</a>
                        <a class="banner-x-phone" href="tel:714-728-9763">714-728-9763</a>
                        <a href="#">auhsd.us</a>
                        <div class="banner-x-address">
                            <div><a href="#">501 N. Crescent Way,</a></div>
                            <div><a href="#">Anaheim, CA 92801</a></div>
                        </div>
                    </div>
                    <div class="banner-x-bodysection">
                        <div class="banner-x-label">ROP:</div>
                        <div class="banner-x-name">Terri Giamarino<span>Superintendent, NOCROP</span></div>
                        <a href="#">mtgiamarino@nocrop.com</a>
                        <a class="banner-x-phone" href="tel:502-580-1999">502-580-1999 (3717)</a>
                        <div class="banner-x-address">
                            <div><a href="#">385 N Muller St,</a></div>
                            <div><a href="#">Anaheim, CA 92801</a></div>
                        </div>
                    </div>
                </div>
                <div class="banner-x-exportmobile">
                    <button class="button button-dropshadow" type="button">Export</button>
                    <button class="button button-dropshadow" type="button">Print</button>
                </div>
            </div>
            <div class="banner-x-left-triangle">
                <svg>
                    <use xlink:href="#banner-left-triangle"></use>
                </svg>
            </div>
            <div class="banner-x-right-triangle">
                <svg>
                    <use xlink:href="#banner-right-triangle"></use>
                </svg>
            </div>
        </header>

        <div class="background background-detail l-containerxaxis">

            <div class="table">
                <div class="table-x-caption">Food Service and Hospitality Pathway</div>
                <div class="table-x-thead">
                    <div class="tableheaderrow">
                        <div class="tableheader-x-cell">HIGH SCHOOL</div>
                        <div class="tableheader-x-cell">PATHWAY</div>
                        <div class="tableheader-x-cell">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                    </div>
                </div>
                <div class="table-x-tbody">
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <app-map>
                                        <div id="tablerow-x-map1" class="tablerow-x-map"></div>
                                    </app-map>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <a class="tablerow-x-title" href="#">Anaheim High School</a>
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">PATHWAY</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                            <div class="tablerow-x-studentcount">134</div>
                        </div>
                    </div>
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <div id="tablerow-x-map2" class="tablerow-x-map"></div>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <a class="tablerow-x-title" href="#">Anaheim High School</a>
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">PATHWAY</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                            <div class="tablerow-x-studentcount">134</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table">
                <div class="table-x-caption">Hospitality</div>
                <div class="table-x-thead">
                    <div class="tableheaderrow">
                        <div class="tableheader-x-cell">HIGH SCHOOL</div>
                        <div class="tableheader-x-cell">PATHWAY</div>
                        <div class="tableheader-x-cell">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                    </div>
                </div>
                <div class="table-x-tbody">
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <div id="tablerow-x-map3" class="tablerow-x-map"></div>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <a class="tablerow-x-title" href="#">Anaheim High School</a>
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">PATHWAY</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                            <div class="tablerow-x-studentcount">134</div>
                        </div>
                    </div>
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <div id="tablerow-x-map4" class="tablerow-x-map"></div>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <a class="tablerow-x-title" href="#">Anaheim High School</a>
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">PATHWAY</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY <span>(2017-18)</span></div>
                            <div class="tablerow-x-studentcount">134</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <!-- Dialog content here -->

</main>

<footer class="footer l-containerxaxis" data-dialog="inertcontainer" data-menu="inertcontainer">
    <div class="footer-x-inner">
        <div class="footer-x-leftcol">
            <div class="footer-x-sponsors">
                <span class="footer-x-sponsorslabel">Sponsors:</span>
                <span>LAOCRC</span>
                <span class="footer-x-bullet">•</span>
                <span>Orange County Regional Consortia</span>
            </div>
            <ul>
                <li>
                    <a href="#">Site Map</a>
                </li>
                <li>
                    <a href="#">Local Administrative Control Login</a>
                </li>
                <li>
                    <a href="#">Report a Problem</a>
                </li>
                <li>
                    Want to see your region in Program Finder? <a href="#">Contact us</a>
                </li>
                <li>
                    <a href="#">Resources</a>
                </li>
            </ul>
        </div>
        <div class="footer-x-rightcol">
            <img src="../../assets/images/footer-logo.svg" alt="California Community Colleges logo" width="272" height="34">
        </div>
    </div>
</footer>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<script>
    // Map in banner.
    var bannermap = L.map('banner-x-mapbackground', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(bannermap);
    var circle = L.circle([33.6412, -117.9188], {
        color: 'null',
        fillColor: '#ff426e',
        fillOpacity: 0.19,
        radius: 5000
    }).addTo(bannermap);
    // Maps in table rows.
    var tablerowmap1 = L.map('tablerow-x-map1', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(tablerowmap1);
    // Create the map marker.
    var icon = L.divIcon({
        className: 'mapmarker',
        iconSize: null,
        iconAnchor: [11, 11],
    });
    var marker1 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(tablerowmap1);
    var tablerowmap2 = L.map('tablerow-x-map2', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(tablerowmap2);
    var marker2 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(tablerowmap2);
    var tablerowmap3 = L.map('tablerow-x-map3', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(tablerowmap3);
    var marker3 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(tablerowmap3);
    var tablerowmap4 = L.map('tablerow-x-map4', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(tablerowmap4);
    var marker4 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(tablerowmap4);
</script>