Business Partner 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>John’s Agriculture</h2>
                </div>
                <div class="banner-x-link">
                    <span>Business Partner Related to:&nbsp;</span><strong>Animal Science</strong>
                </div>
                <div class="banner-x-body banner-x-bodysmall">
                    <div class="banner-x-bodysection">
                        <p>Business partners are open to work-based learning, corporate training, and building relations with community college programs. Contact a business directly for more information.</p>
                    </div>
                </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">Locations</div>
                <div class="table-x-thead">
                    <div class="tableheaderrow">
                        <div class="tableheader-x-cell">LOCATION</div>
                        <div class="tableheader-x-cell">RELATED PROGRAMS</div>
                    </div>
                </div>
                <div class="table-x-tbody">
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">LOCATION</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">
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">John Smith</div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">john@johnsagriculture.com</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                    <a class="tablerow-x-link" href="https://example.com">johnsagriculture.com</a>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">RELATED PROGRAMS</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                            <div class="tablerow-x-pathway">Hospitality Services</div>
                            <div class="tablerow-x-pathway">Diesel Technology</div>
                            <div class="tablerow-x-pathway">Food Service</div>
                        </div>
                    </div>
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">LOCATION</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <app-map>
                                        <div id="tablerow-x-map2" class="tablerow-x-map"></div>
                                    </app-map>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">John Smith</div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">john@johnsagriculture.com</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                    <a class="tablerow-x-link" href="https://example.com">johnsagriculture.com</a>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">RELATED PROGRAMS</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                            <div class="tablerow-x-pathway">Hospitality Services</div>
                            <div class="tablerow-x-pathway">Diesel Technology</div>
                            <div class="tablerow-x-pathway">Food Service</div>
                        </div>
                    </div>
                    <div class="tablerow">
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">LOCATION</div>
                            <div class="tablerow-x-columns">
                                <div class="tablerow-x-col1">
                                    <app-map>
                                        <div id="tablerow-x-map3" class="tablerow-x-map"></div>
                                    </app-map>
                                </div>
                                <div class="tablerow-x-col2">
                                    <div class="tablerow-x-subsection">
                                        <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                                    </div>
                                    <div class="tablerow-x-name">John Smith</div>
                                    <a class="tablerow-x-link" href="mailto:foo@bar.org">john@johnsagriculture.com</a>
                                    <div class="tablerow-x-phone">714-559-7925</div>
                                    <a class="tablerow-x-link" href="https://example.com">johnsagriculture.com</a>
                                </div>
                            </div>
                        </div>
                        <div class="tablerow-x-cell">
                            <div class="tablerow-x-mobileheader">RELATED PROGRAMS</div>
                            <div class="tablerow-x-pathway">Service & Hospitality</div>
                            <div class="tablerow-x-pathway">Hospitality Services</div>
                            <div class="tablerow-x-pathway">Diesel Technology</div>
                            <div class="tablerow-x-pathway">Food Service</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>