oglimmer/lunchy

<div class="container">

    <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>

    <h4>{{ data.officialName }}</h4>

    <div class="form-group" ng-controller="LunchyControllerViewTab" ng-show="showTabMode">
        <uib-tabset justified="true">
            <uib-tab heading="Information" active="tabs.active[0]" disable="tabs.disabled[0]">
                <div ng-include="'partials/view-location/base-data.html'"></div>
            </uib-tab>
            <uib-tab heading="Reviews ({{ childScopeHolder.reviews.length }})" active="tabs.active[1]" disable="tabs.disabled[1]">
                <div ng-include="'partials/view-location/review-pane.html'"></div>
            </uib-tab>
            <uib-tab heading="Pictures ({{ childScopeHolder.pictures.length }})" active="tabs.active[2]" disable="tabs.disabled[2]">
                <uib-carousel no-transition="carouselNoTransition">
                    <uib-slide ng-repeat="pic in childScopeHolder.pictures" active="pic.active">
                        <img ng-src="./rest/pictures/{{pic.filename}}" style="margin:auto;"/>
                        <div class="carousel-caption">
                            <p class="removeOnExtraSmall" ng-click="childScopeHolder.editPicCap[$index]=!childScopeHolder.editPicCap[$index]" ng-hide="childScopeHolder.editPicCap[$index] && allowedChangeCaption['pic'+pic.id]">({{pic.upVotes}}) {{pic.caption}} by {{pic.creationUser}}</p>
                            <picture-edit ng-show="childScopeHolder.editPicCap[$index]" ng-disable="!allowedChangeCaption['pic'+pic.id]" ng-model="pic.caption" />
                        </div>
                    </uib-slide>
                </uib-carousel>                
                <div class="top17" ng-show="showButtonsMode && childScopeHolder.pictures.length > 0">
                    <div class="btn btn-success pull-right" uib-btn-checkbox ng-model="childScopeHolder.currentPicVoted" ng-click="picVoteClicked()">
                        <span class="glyphicon glyphicon-thumbs-up" style="font-size: 22px"></span>
                    </div>
                </div>
                <div ng-show="addPictureMode" ng-include="'partials/view-location/add-picture.html'"></div>
            </uib-tab>
            <uib-tab heading="Map" select="mapSelected()" deselect="mapDeselected()" active="tabs.active[3]" disable="tabs.disabled[3]">
                <!-- ui-gmap-google-map is not working properly inside a uib-tab -->
            </uib-tab>
        </uib-tabset>
        <ui-gmap-google-map id="locationMap" center="map.center" zoom="map.zoom" draggable="true" events='map.events' ng-if="childScopeHolder.mapTabShown">
            <ui-gmap-marker idKey='childScopeHolder.marker.id' coords='childScopeHolder.marker.coords' options="childScopeHolder.marker.markerOptions" events="childScopeHolder.marker.events" />
            <ui-gmap-marker ng-repeat="marker in officeMarker" idKey='marker.id' coords='marker.coords' options="marker.markerOptions" />
        </ui-gmap-google-map>
    </div>

    <div ng-show="editLocationMode" ng-include="'partials/view-location/edit-location.html'"></div>

    <div ng-show="modifyReviewMode" ng-include="'partials/view-location/modify-review.html'"></div>

    <div class="form-group top17" ng-show="showButtonsMode">

        <button ng-show="allowedToEditPermission" type="button" class="btn btn-primary" ng-click="editLocationStart()">Edit</button>

        <button type="button" class="btn btn-default" ng-click="modifyReviewStart()">{{childScopeHolder.reviewButton}}</button>

        <button type="button" class="btn btn-default" ng-click="addPictureStart()">Add Picture</button>
        
        <input type="checkbox" ng-show="specialOption.enabledForLocation" ng-model="specialOption.enabledForUser" ng-change="specialOptionChanged()" /> {{specialOption.desciption}} 

        <button ng-show="childScopeHolder.marker.pinMoved" type="button" class="btn btn-default pull-right" ng-click="saveMovedPin()">Save Pin</button>
    </div>
</div>