<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-floor-selector.css?cb=">

<div class="property-floor-selector " data-endpoint="/data/property-floor-selector-data.json" data-no-unit-text="no office spaces available" data-unit-text="{0} office spaces available" data-singular-unit-text="1 office space available" data-available-units-title="" data-available-units-small-title="" data-module="propertyFloorSelector">

    <link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">

    <div class="property-floor-selector__overlay property-floor-selector__overlay--secondary js-unit-details-overlay">
    </div>

    <div class="property-floor-selector-modal js-unit-details">
        <div class="property-floor-selector-modal__container">
            <a href="#" class="property-floor-selector-modal__close js-unit-details-close"></a>
            <div class="property-floor-selector-modal__tab-content-panels">
                <div class="property-floor-selector-modal__tab-content js-tab-content js-gallery-content active">
                    <div class="property-floor-selector-gallery">
                        <link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">

                        <div class="gallery gallery--vertical-scroll js-vertical-scroll" data-module="gallery">
                            <div class="gallery__slides-container">
                                <div class="gallery__slides js-slides">
                                </div>
                                <span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
                                <div class="gallery__selection-label">
                                    <span class="gallery__current-slide js-current-slide">1</span>
                                    <span class="gallery__total-slides js-total-slides"></span>
                                </div>
                                <span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
                            </div>
                            <div class="gallery__dots js-dots">
                            </div>
                        </div>
                    </div>

                    <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                        <span class="property-floor-selector-modal__box-eyebrow js-eyebrow"></span>
                        <h4 class="property-floor-selector-modal__box-title js-title"></h4>
                        <span class="property-floor-selector-modal__box-meta">
                            <span class="property-floor-selector-modal__box-unit js-unit">
                            </span>
                            <span class="property-floor-selector-modal__box-spacer"></span>
                            <span class="property-floor-selector-modal__box-sqft js-square-footage">
                            </span>
                            <span class="property-floor-selector-modal__box-spacer"></span>
                            <span class="property-floor-selector-modal__box-floor js-floor">

                            </span>
                        </span>
                        <div class="property-floor-selector-modal__box-footer">
                            <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">Enquire</a>
                        </div>
                    </div>
                </div>
                <div class="property-floor-selector-modal__tab-content property-floor-selector-modal__tab-content--tour js-tab-content js-virtual-tour-content">
                    <iframe src="" loading="lazy" class="property-floor-selector-modal__virtual-tour"></iframe>
                    <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">Enquire</a>
                </div>
                <div class="property-floor-selector-modal__tab-content js-tab-content js-map-content">
                    <link media="all" href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
                    <link media="all" rel="stylesheet" href="/assets/themes/default/css/mapbox.css?cb=">

                    <div class="mapbox js-mapbox" data-longitude="-81.378112" data-latitude="19.322003" data-map-key="" data-map-style="" data-zoom="" data-pitch="0">
                        <div class="mapbox__map js-map"></div>
                    </div>
                    <div class="js-unit-details-modal-box property-floor-selector-modal__box">
                        <span class="property-floor-selector-modal__description">

                        </span>

                        <div class="property-floor-selector-modal__box-footer">
                            <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">Enquire</a>
                        </div>
                    </div>
                </div>
                <div class="property-floor-selector-modal__tab-content js-tab-content js-floorplan-content">
                    <div class="property-floor-selector-modal__floorplan-content">
                        <a href="#" class="property-floor-selector-modal__enquire-cta js-enquire-trigger">Enquire</a>
                        <aside class="property-floor-selector-modal__floorplan-info">
                            <div class="js-floorplan-unit-no"><span class="property-floor-selector-modal__floorplan-info-value--unit-no js-value">1</span> <span class="property-floor-selector-modal__floorplan-info-field">Unit No.</span></div>
                            <div class="js-floorplan-floor-size"><span class="property-floor-selector-modal__floorplan-info-value js-value">1/2 Floor</span> <span class="property-floor-selector-modal__floorplan-info-field">Space</span></div>
                            <div class="js-floorplan-square-footage"><span class="property-floor-selector-modal__floorplan-info-value js-value">3,349</span> <span class="property-floor-selector-modal__floorplan-info-field">SQFT</span></div>
                            <div class="js-floorplan-floor"><span class="property-floor-selector-modal__floorplan-info-value js-value">6</span> <span class="property-floor-selector-modal__floorplan-info-field">Floor</span></div>
                        </aside>
                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" class="js-floorplan-image property-floor-selector-modal__floorplan-image" />
                        <iframe loading="lazy" class="js-floorplan-file property-floor-selector-modal__floorplan-file"></iframe>
                    </div>
                </div>
            </div>

            <div class="property-floor-selector-modal__navigation">
                <ul class="property-floor-selector-modal__navigation-list">
                    <li class="property-floor-selector-modal__navigation-list-item">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--images js-tab-trigger js-navigation-link-images active" data-tab-content="js-gallery-content" href="#">
                            <span>Images</span>
                        </a>
                    </li>
                    <li class="property-floor-selector-modal__navigation-list-item">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--map js-tab-trigger" data-tab-content="js-map-content" href="#">
                            <span>Map</span>
                        </a>
                    </li>
                    <li class="property-floor-selector-modal__navigation-list-item">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--plan js-tab-trigger js-navigation-link-floorplan" data-tab-content="js-floorplan-content" href="#">
                            <span>Floor Plan</span>
                        </a>
                    </li>
                    <li class="property-floor-selector-modal__navigation-list-item js-virtual-tour-item">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--tour js-tab-trigger" data-tab-content="js-virtual-tour-content" href="#">
                            <span>360 Tour</span>
                        </a>
                    </li>
                    <li class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--sales js-navigation-link-download">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--download" href="" download target="_blank">
                            <span>Sales Sheet</span>
                        </a>
                    </li>
                    <li class="property-floor-selector-modal__navigation-list-item property-floor-selector-modal__navigation-list-item--contact">
                        <a class="property-floor-selector-modal__navigation-link property-floor-selector-modal__navigation-link--contact js-enquire-trigger" href="#">
                            <span>Enquire</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="property-floor-selector__overlay js-pfs-overlay"></div>

    <div class="property-floor-selector-units js-available-units" data-page-size="" data-unit-text="{0} office spaces available on floor {1}" data-singular-unit-text="1 office space available on floor {0}">

        <div class="property-floor-selector-units__container grid-container">

            <header class="property-floor-selector-units__header">
                <div class="grid-container">
                    <div class="property-floor-selector-units__header-grid grid-x grid-padding-x align-center">
                        <div class="property-floor-selector-units__header-grid-cell cell medium-6">
                            <a class="property-floor-selector-units__back-cta js-pfs-overlay-close" href="#">Back</a>
                        </div>
                        <div class="property-floor-selector-units__header-grid-cell cell medium-6">
                            <div class="property-floor-selector-tabs">
                                <ul class="property-floor-selector-tabs__list js-pfs-tabs">
                                    <li>
                                        <button class="property-floor-selector-tabs__cta active js-pfs-overlay-close" type="button"></button>
                                    </li>
                                    <li>
                                        <button class="property-floor-selector-tabs__cta" type="button"></button>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="property-floor-selector-dropdowns property-floor-selector-units__header-grid-cell cell js-dropdown-filters">
                        </div>

                        <div class="property-floor-selector-units__header-grid-cell cell medium-6">
                            <h4 class="pfs-overlay-title js-pfs-overlay-title"></h4>
                            <h4 class="pfs-overlay-small-title js-pfs-overlay-small-title"></h4>
                        </div>
                        <div class="property-floor-selector-units__header-grid-cell cell medium-6">
                            <div class="property-floor-selector-units__dropdown js-available-units-dropdown">

                                <label for="">Dropdown Example</label>
                                <select id="" name="default-select">
                                    <option value="squareFootage ASC">Size (Low to High)</option>
                                    <option value="squareFootage DESC">Size (High to Low)</option>
                                    <option value="marketStatus ASC">Status ASC</option>
                                    <option value="marketStatus DESC">Status Desc</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="property-floor-selector-units__data grid-container">

                <template>
                    <li class="js-available-units property-floor-selector-units__list-item">
                        <a href="#" class="property-floor-selector-units__link js-unit-data-cta">
                            <div class="property-floor-selector-units__image js-image">
                                <img alt="Unit Image">
                            </div>
                            <div class="property-floor-selector-units__floor js-floor"></div>
                            <div class="property-floor-selector-units__unit js-unit"></div>
                            <div class="property-floor-selector-units__office-space">
                                <span class="js-property-type"></span>
                                <span class="js-floor-space"></span>
                            </div>
                            <div class="property-floor-selector-units__size">
                                <span>
                                    <span class="property-floor-selector-units__highlight js-square-footage"></span>
                                    <span class="js-square-footage-suffix">sqft</span>
                                </span>
                                <span class="property-floor-selector-units__company property-floor-selector-units__company--small js-company-small"></span>
                            </div>
                            <div class="property-floor-selector-units__status js-status"></div>
                            <div class="property-floor-selector-units__company js-company property-floor-selector-units__company--medium"></div>
                            <div class="property-floor-selector-units__cta">
                                <span></span>
                            </div>
                        </a>
                    </li>
                </template>

                <div class="property-floor-selector-units__data-grid grid-x grid-padding-x">
                    <div class="property-floor-selector-units__data-cell medium-12">
                        <ul class="js-available-units-list"></ul>
                    </div>
                </div>
            </div>

            <div class="property-floor-selector-pagination">
                <link rel="stylesheet" href="/assets/themes//css/pagination.css?cb=" />

                <div class="pagination js-pagination">
                    <a href="#top" class="pagination__previous js-previous"><span>Previous</span></a>
                    <a href="#top" class="pagination__page js-page js-first selected" data-page="1">1</a>
                    <span class="pagination__dots js-dots-left">&#8230;</span>
                    <a href="#top" class="pagination__page js-page js-second-page" data-page="2">2</a>
                    <a href="#top" class="pagination__page js-page js-third-page" data-page="3">3</a>
                    <a href="#top" class="pagination__page js-page js-fourth-page" data-page="4">4</a>
                    <span class="pagination__dots js-dots-right">&#8230;</span>
                    <a href="#top" class="pagination__page js-page js-last-page" data-page="5">5</a>
                    <a href="#top" class="pagination__next js-next"><span>Next</span></a>
                </div>
            </div>

        </div>

    </div>

    <div class="property-floor-selector-enquire js-enquire-panel">
        <a class="property-floor-selector-enquire__back-cta js-enquire-panel-close" href="#"><span>Back</span></a>
        <link media="all" rel="stylesheet" href="/assets/themes//css/property-contact.css?cb=">

        <div class="property-contact" data-module="propertyContact,propertyVisualModal">
            <div class="property-contact__wrapper">
                <div class="property-contact__inside js-agent">
                    <div class="property-contact__content">
                        <span class="property-contact__content-eyebrow"></span>
                        <span class="property-contact__content-title"></span>
                    </div>
                    <div class="property-contact__social">
                        <div class="property-contact__social-item">
                            <button class="property-contact__social-trigger">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M5.48298 3C5.19175 3 4.91516 3.11639 4.70417 3.32787C3.66199 4.37912 3.20225 5.02728 3.05593 6.31888C2.68824 9.37092 4.11181 12.1911 7.96903 16.0574C12.5442 20.6433 16.3377 21 17.3912 21C17.5649 21 17.6659 20.9905 17.689 20.9882C19.0234 20.8283 19.653 20.3381 20.6759 19.3346C21.0931 18.9131 21.1096 18.247 20.7132 17.8477L17.7863 14.9139C17.6022 14.7299 17.352 14.6281 17.0825 14.6281C16.7908 14.6281 16.5147 14.744 16.3042 14.9551L15.4616 15.7986C15.1501 16.1104 14.7357 16.2821 14.2953 16.2821C14.0046 16.2821 13.718 16.2045 13.466 16.0579C12.5347 15.5147 11.4331 14.8098 10.3248 13.6994C9.31094 12.6813 8.67609 11.7407 7.98036 10.5528C7.59945 9.90222 7.70518 9.07664 8.23666 8.54439L9.07399 7.70651C9.49266 7.28686 9.50965 6.62025 9.11223 6.22047L6.18674 3.28671C6.00219 3.10172 5.75249 3 5.48298 3Z" stroke="white" stroke-width="2" />
                                </svg>
                            </button>
                            <span class="property-contact__tooltip is-tel js-copy">
                                <a href="tel:" class="property-contact__tooltip-text"></a>
                                <button class="property-contact__tooltip-copy js-copy-trigger" data-copy="" data-index="0">
                                    <i class="property-contact__tooltip-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
                                            <path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
                                            <path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
                                        </svg>
                                    </i>
                                    <span class="property-contact__tooltip-copy-before">
                                        Copy
                                    </span>
                                    <span class="property-contact__tooltip-copy-after">
                                        Copied
                                    </span>
                                </button>
                            </span>
                        </div>
                        <div class="property-contact__social-item">
                            <button class="property-contact__social-trigger">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M2 6H22V19H2V6Z" stroke="white" stroke-width="2" />
                                    <path d="M2 7L12.5 14L22 7" stroke="white" stroke-width="2" />
                                </svg>
                            </button>
                            <span class="property-contact__tooltip is-email js-copy">
                                <a href="mailto:" class="property-contact__tooltip-text"></a>
                                <button class="property-contact__tooltip-copy js-copy-trigger" data-copy="" data-index="1">
                                    <i class="property-contact__tooltip-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
                                            <path d="M1 8H11V18H1V8Z" stroke="#0054A6" stroke-width="2" />
                                            <path d="M8 4.65385V1H18V11H14.3462" stroke="#0054A6" stroke-width="2" />
                                        </svg>
                                    </i>
                                    <span class="property-contact__tooltip-copy-before">
                                        Copy
                                    </span>
                                    <span class="property-contact__tooltip-copy-after">
                                        Copied
                                    </span>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="property-contact__action">
                    <div class="property-contact__action-inside">
                        <button class="property-contact__btn property-contact__btn--secondary js-agent-trigger">
                            Detail
                        </button>
                        <button class="property-contact__btn property-contact__btn--primary js-modal-open">
                            Enquire
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal modal--property-contact-details js-modal">
                <div class="modal__container">
                    <div class="property-contact-details">
                        <div class="property-contact-details__header">
                            <div class="property-contact-details__header-text">
                                <span class="property-contact-details__header-eyebrow"></span>
                                <h2 class="property-contact-details__header-title"></h2>
                            </div>
                            <button class="modal__close property-contact-details__header-close js-modal-close">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path d="M18.3638 4.22168L19.778 5.63589L5.63585 19.778L4.22163 18.3638L18.3638 4.22168Z" fill="white" />
                                    <path d="M19.7783 18.3643L18.3641 19.7785L4.22197 5.63633L5.63619 4.22212L19.7783 18.3643Z" fill="white" />
                                </svg>
                            </button>
                        </div>
                        <div class="property-contact-details__inside">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="property-floor-selector__container js-pfs-container">
        <div class="property-floor-selector__visual-select lazy-load-image js-visual-select-image" data-module="imageLazyLoad">
            <div class="property-floor-selector-tabs">
                <ul class="property-floor-selector-tabs__list js-pfs-tabs">
                    <li>
                        <button class="property-floor-selector-tabs__cta js-visual-select-cta" type="button"></button>
                    </li>
                    <li>
                        <button class="property-floor-selector-tabs__cta active js-open-available-units" type="button" data-floor-id=""></button>
                    </li>
                </ul>
            </div>

            <picture>
                <source media="(max-width: 840px)" type="" srcset="/media/visual-select-mobile.png" />
                <source media="(min-width: 841px)" type="" srcset="/media/visual-select-desktop.png" />
                <img src="/media/visual-select-desktop.png" loading="lazy" alt="Image alt text">
            </picture>

            <a data-building-floor="7" class="property-floor-selector__hotspot property-floor-selector__hotspot--small js-floor-hotspot js-floor-hotspot-small" href="#" style="left: 19%; top: 30%; width: 73%; height: 7%">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">7</span>
                                </h4>
                            </header>
                        </div>
                    </div>
                </div>
            </a>
            <a data-building-floor="7" class="property-floor-selector__hotspot property-floor-selector__hotspot--medium js-floor-hotspot js-open-available-units" href="#" style="left: 24.3%; top: 29.2%; width: 38.5%; height: 8%" data-floor-id="7">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">7</span>
                                    <span class="property-floor-selector__popup-title-text">Floor</span>
                                </h4>
                            </header>
                            <div class="property-floor-selector__popup-companies">
                                <span class="property-floor-selector__popup-label">
                                    Companies on this floor:
                                </span>
                                <ul class="property-floor-selector__popup-list js-popup-list">
                                </ul>
                                <footer class="property-floor-selector__popup-footer">
                                    <span class="property-floor-selector__popup-info js-popup-footer-info"></span>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a data-building-floor="6" class="property-floor-selector__hotspot property-floor-selector__hotspot--small js-floor-hotspot js-floor-hotspot-small" href="#" style="left: 19%; top: 38%; width: 73%; height: 7%">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">6</span>
                                </h4>
                            </header>
                        </div>
                    </div>
                </div>
            </a>
            <a data-building-floor="6" class="property-floor-selector__hotspot property-floor-selector__hotspot--medium js-floor-hotspot js-open-available-units" href="#" style="left: 24.3%; top: 38%; width: 38.5%; height: 8%" data-floor-id="6">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">6</span>
                                    <span class="property-floor-selector__popup-title-text">Floor</span>
                                </h4>
                            </header>
                            <div class="property-floor-selector__popup-companies">
                                <span class="property-floor-selector__popup-label">
                                    Companies on this floor:
                                </span>
                                <ul class="property-floor-selector__popup-list js-popup-list">
                                </ul>
                                <footer class="property-floor-selector__popup-footer">
                                    <span class="property-floor-selector__popup-info js-popup-footer-info"></span>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

        </div>

        <div class="property-floor-selector__small-section">
            <div class="js-small-section">
                <a href="#" class="property-floor-selector__small-section-cta js-popup-footer-info js-open-available-units" data-floor-id="">select floor</a>
                <span class="property-floor-selector__small-section-info js-small-section-info"></span>
            </div>
        </div>

    </div>

</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-floor-selector.css?cb={{cacheBuster}}">
{{/if}}

<div class="property-floor-selector {{#if formSubmitted}}umbraco-forms-submitmessage{{/if}}"
    data-endpoint="{{endpoint}}" data-no-unit-text="{{buildingView.noUnitText}}"
    data-unit-text="{{buildingView.unitText}}" data-singular-unit-text="{{buildingView.singularUnitText}}"
    data-available-units-title="{{ availableUnits.title }}"
    data-available-units-small-title="{{ availableUnits.smallTitle }}" data-module="propertyFloorSelector">

    {{> @unit-details }}

    {{> @available-units availableUnits }}

    {{> @pfs-enquire }}

    <div class="property-floor-selector__container js-pfs-container">
        <div class="property-floor-selector__visual-select lazy-load-image js-visual-select-image"
            data-module="imageLazyLoad">
            <div class="property-floor-selector-tabs">
                <ul class="property-floor-selector-tabs__list js-pfs-tabs">
                    <li>
                        <button class="property-floor-selector-tabs__cta js-visual-select-cta" type="button">{{
                            availableUnits.visualSelectionLabel }}</button>
                    </li>
                    <li>
                        <button class="property-floor-selector-tabs__cta active js-open-available-units" type="button"
                            data-floor-id="">{{ availableUnits.searchByCriteriaLabel }}</button>
                    </li>
                </ul>
            </div>

            {{> @picture buildingView.image }}

            {{#each buildingView.floors}}
            <a data-building-floor="{{this.floor}}"
                class="property-floor-selector__hotspot property-floor-selector__hotspot--small js-floor-hotspot js-floor-hotspot-small"
                href="#"
                style="left: {{this.smallHotspot.x}}; top: {{this.smallHotspot.y}}; width: {{this.smallHotspot.width}}; height: {{this.smallHotspot.height}}">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">{{floor}}</span>
                                </h4>
                            </header>
                        </div>
                    </div>
                </div>
            </a>
            <a data-building-floor="{{this.floor}}"
                class="property-floor-selector__hotspot property-floor-selector__hotspot--medium js-floor-hotspot js-open-available-units"
                href="#"
                style="left: {{this.mediumHotspot.x}}; top: {{this.mediumHotspot.y}}; width: {{this.mediumHotspot.width}}; height: {{this.mediumHotspot.height}}"
                data-floor-id="{{floor}}">
                <div>
                    <div class="property-floor-selector__popup js-property-floor-selector-popup">
                        <div class="property-floor-selector__popup-inner">
                            <header class="property-floor-selector__popup-header">
                                <h4 class="property-floor-selector__popup-title">
                                    <span class="property-floor-selector__popup-title-number">{{this.floor}}</span>
                                    <span class="property-floor-selector__popup-title-text">Floor</span>
                                </h4>
                            </header>
                            <div class="property-floor-selector__popup-companies">
                                <span class="property-floor-selector__popup-label">
                                    {{../buildingView.companiesLabel}}
                                </span>
                                <ul class="property-floor-selector__popup-list js-popup-list">
                                </ul>
                                <footer class="property-floor-selector__popup-footer">
                                    <span class="property-floor-selector__popup-info js-popup-footer-info"></span>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            {{/each}}

        </div>

        <div class="property-floor-selector__small-section">
            <div class="js-small-section">
                <a href="#"
                    class="property-floor-selector__small-section-cta js-popup-footer-info js-open-available-units"
                    data-floor-id="">{{ buildingView.smallNavCtaText }}</a>
                <span class="property-floor-selector__small-section-info js-small-section-info"></span>
            </div>
        </div>

    </div>

    {{#if formSubmitted}}
    {{> @pfs-enquiry-submitted }}
    {{/if}}
</div>
{
  "theme": "default",
  "firstInstance": true,
  "endpoint": "/data/property-floor-selector-data.json",
  "boxCtaText": "Download Brochure",
  "boxContactText": "Enquire",
  "buildingView": {
    "title": "Discover our spaces",
    "image": {
      "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
      "fallbackImageUrl": "/media/visual-select-desktop.png",
      "sources": [
        {
          "types": "image/png",
          "mobileImageUrl": "/media/visual-select-mobile.png",
          "desktopImageUrl": "/media/visual-select-desktop.png"
        }
      ],
      "altText": "Image alt text"
    },
    "floors": [
      {
        "floor": 7,
        "smallHotspot": {
          "x": "19%",
          "y": "30%",
          "width": "73%",
          "height": "7%"
        },
        "mediumHotspot": {
          "x": "24.3%",
          "y": "29.2%",
          "width": "38.5%",
          "height": "8%"
        }
      },
      {
        "floor": 6,
        "smallHotspot": {
          "x": "19%",
          "y": "38%",
          "width": "73%",
          "height": "7%"
        },
        "mediumHotspot": {
          "x": "24.3%",
          "y": "38%",
          "width": "38.5%",
          "height": "8%"
        }
      }
    ],
    "companiesLabel": "Companies on this floor:",
    "floorSelectText": "Floor",
    "noUnitText": "no office spaces available",
    "unitText": "{0} office spaces available",
    "singularUnitText": "1 office space available",
    "smallNavCtaText": "select floor"
  },
  "availableUnits": {
    "smallUnitText": "{0} spaces available",
    "smallSingularUnitText": "1 office space available",
    "unitText": "{0} office spaces available on floor {1}",
    "singularUnitText": "1 office space available on floor {0}",
    "sortbyDropDown": {
      "label": "Dropdown Example",
      "name": "default-select",
      "options": [
        {
          "text": "Size (Low to High)",
          "value": "squareFootage ASC"
        },
        {
          "text": "Size (High to Low)",
          "value": "squareFootage DESC"
        },
        {
          "text": "Status ASC",
          "value": "marketStatus ASC"
        },
        {
          "text": "Status Desc",
          "value": "marketStatus DESC"
        }
      ]
    }
  }
}

Property Floor Selector (PFS)