[[$pageTop]]

[[Voyager?
    &propertyResource=`[[*voyager-propertyResource]]`
    &maps=`7,8,6,2,4,9,10`
    &service=`mapLanding`
]]

<section class="pageWrapper portfolio">
    [[-<div class="pageContent voyager residences">
        <figure class="heroImage">
            <div id="map_canvas" class="mapsContainer">
                [[+voyager.mapsContainer]]

            </div>

        </figure>

    </div>-]]

    <figure class="heroImage">
        [[*hero-image]]

        [[*hero-content:notempty=`
            <figcaption>[[*hero-content]]</figcaption>
        `]]

    </figure>

    <div class="pageContent">
        <header class="contentHeader">
            <hgroup>
                <h2 class="contentTitle">[[*pagetitle]]</h2>
                [[*longtitle:notempty=`
                    <h3 class="contentSubTitle">[[*longtitle]]</h3>
                `]]

            </hgroup>
            
        </header>

        <div class="mainContent">
            [[*introtext:notempty=`
                <p class="lead">[[*introtext]]</p>
            `]]
            
            [[*content]]

        </div><!-- /.mainContent -->

    </div>

    [[*ctaContent:notempty=`
        <div class="ctaContentWrapper">
            <div class="ctaContent">
                [[*ctaContent]]
            </div>

        </div>
    `]]

    <div class="portfolio-wrapper">
        <div class="btn-toolbar">
            <a href="#" class="btn btn-default search-filters">
                <i class="i-search"></i> Search Filters
            </a>

            <div class="btn-group btn-group-justified reciprocity-filters" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="residence_fund" value="eef1">
                    Equity Estates Portfolio
                </label>

                <label class="btn btn-default">
                    <input type="radio" name="residence_fund" value="thc">
                    Reciprocity Residences
                </label>
                
            </div><!-- /.btn-group.reciprocity-filters -->

        </div><!-- /.btn-toolbar -->

        <div class="residences-wrapper v-search-results">
            
        </div><!-- /.residences-wrapper.v-search-results -->

        <div class="map-wrapper">
            <div class="residence-lists">
                <div class="column-third">
                    <div class="residence-list-wrapper" id="beach_list">
                        <h4 class="residence-list-header">Beach Residences</h4>

                        <ul class="residence-list">
                            [[+voyager.megaMenuList_beach]]

                        </ul><!-- /.residence-list -->

                    </div><!-- /#beach_list -->

                </div><!-- /.column-third -->

                <div class="column-third">
                    <div class="residence-list-wrapper" id="city_list">
                        <h4 class="residence-list-header">City Residences</h4>

                        <ul class="residence-list">
                            [[+voyager.megaMenuList_city]]

                        </ul><!-- /.residence-list -->

                    </div><!-- /#city_list -->

                </div><!-- /.column-third -->

                <div class="column-third">
                    <div class="residence-list-wrapper" id="leisure_list">
                        <h4 class="residence-list-header">Leisure Residences</h4>

                        <ul class="residence-list">
                            [[+voyager.megaMenuList_leisure]]

                        </ul><!-- /.residence-list -->

                    </div><!-- /#leisure_list -->

                    <div class="residence-list-wrapper" id="mtn_list">
                        <h4 class="residence-list-header">Mountain Residences</h4>

                        <ul class="residence-list">
                            [[+voyager.megaMenuList_mtn]]

                        </ul><!-- /.residence-list -->

                    </div><!-- /#mtn_list -->

                </div><!-- /.column-third -->

            </div><!-- /.residence-lists -->

        </div><!-- /.map-wrapper -->

    </div><!-- /.portfolio-wrapper -->

    [[$pageFooter]]

</section>

<script type="text/html" id="residence-details-tpl">
    <div class="v-residence-details">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">{{title}} <small>{{destination_title}}</small></h3>

        </div><!-- /.modal-header -->

        <div class="modal-body">
            <div id="v-img-gallery" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    {{#medias}}
                        <li data-target="#v-img-gallery" data-slide-to="{{display_order}}" class={{active}}></li>
                    {{/medias}}
                    {{^medias}}
                    {{/medias}}
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    {{#medias}}
                        <div class="item {{active}}">
                            <img src="{{mktg_url}}" alt="{{label}}">
                            <div class="carousel-caption">{{label}}</div>
                        </div>
                    {{/medias}}
                    {{^medias}}
                    {{/medias}}

                </div><!-- /.carousel-inner -->

                <!-- Controls -->
                <a class="left carousel-control" href="#v-img-gallery" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#v-img-gallery" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

            </div>

            <div class="v-toolbar">
                <ul class="v-stats">
                    <li class="v-stat hidden">
                        <i class="glyphicons glyphicons-ruler" title="SQ FT"></i>
                        <span class="v-stat-quantity">{{interior_sqft}}</span>
                    </li>

                    <li class="v-stat">
                        <i class="glyphicons glyphicons-family" title="Occupancy"></i>
                        <span class="v-stat-quantity">{{max_occupancy}}</span>
                    </li>

                    <li class="v-stat">
                        <i class="glyphicons glyphicons-bed" title="Bedrooms"></i>
                        <span class="v-stat-quantity">{{num_bedrooms}}</span>
                    </li>

                    <li class="v-stat">
                        <i class="glyphicons glyphicons-bath-shower" title="Bathrooms"></i>
                        <span class="v-stat-quantity">{{num_bathrooms}}</span>
                    </li>

                </ul>

            </div><!-- /.v-toolbar -->

            <div class="v-description">
                <nav class="v-nav">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#description" data-toggle="tab">Description</a></li>
                        <li><a href="#bed-config" data-toggle="tab">Bed Configuration</a></li>
                        <li><a href="#avail-calendar" data-toggle="tab">Availability Calendar</a></li>
                    </ul>
                </nav>

                <div class="tab-content">
                    <div id="description" class="tab-pane active">
                        <div class="row">
                            <div class="col-sm-8">
                                {{& description}}
                            </div>
                            <div class="col-sm-4">
                                {{#floor_plans}}
                                    
                                {{/floor_plans}}
                                {{^floor_plans}}
                                {{/floor_plans}}

                            </div>

                        </div>

                    </div>

                    <div id="bed-config" class="tab-pane">
                        {{& bed-config}}
                    </div>

                    <div id="avail-calendar" class="tab-pane">
                    </div>

                </div><!-- /.tab-content -->

            </div><!-- /.v-description -->

        </div><!-- /.modal-body -->

    </div>
</script>

<script type="text/html" id="residence-search-result-tpl">
    <div class="v-search-result residence" data-residence-id="{{id}}" data-img-url="{{mainImg}}" data-location-type="{{destination_location_type}}">
        <h3>{{title}}</h3>

        <figure class="main-img">
            <div class="main-img-bg"></div>
        </figure>

        <div class="v-toolbar">
            <ul class="v-stats">
                <li class="v-stat hidden">
                    <i class="glyphicons glyphicons-ruler" title="SQ FT"></i>
                    <span class="v-stat-quantity">{{interior_sqft}}</span>
                </li>

                <li class="v-stat">
                    <i class="glyphicons glyphicons-family" title="Occupancy"></i>
                    <span class="v-stat-quantity">{{max_occupancy}}</span>
                </li>

                <li class="v-stat">
                    <i class="glyphicons glyphicons-bed" title="Bedrooms"></i>
                    <span class="v-stat-quantity">{{num_bedrooms}}</span>
                </li>

                <li class="v-stat">
                    <i class="glyphicons glyphicons-bath-shower" title="Bathrooms"></i>
                    <span class="v-stat-quantity">{{num_bathrooms}}</span>
                </li>
            </ul>

            <a href="#" class="btn btn-primary btn-sm" data-id="{{id}}">View Details</a>

        </div>

    </div>
</script>

[[$pageBottom]]