<!-- Display for only remote 1 -->
<div class="charts-container" ng-class="{'container': remotesToDisplay.value != 3, 'container-fluid cc-wide': remotesToDisplay.value == 3}">
    <div class="row">
        <div ng-class="{'wrapper-box':remotesToDisplay.value != 3}">
            <div class="wrapper" ng-class="{'wrapper-wide':remotesToDisplay.value != 3}">
                <div id="Page1" class="column" ng-class="{'page':remotesToDisplay.value != 3, 'column-left':remotesToDisplay.value == 3,
                                                          'hide-move-left': remotesToDisplay.value == 2,
                                                          'show-move-right':remotesToDisplay.value == 1 }">

                    <!-- Sensor selection for Remote 1 when screen is wide -->
                    <div class="col-sm-3 hidden-xs" ng-show="remotesToDisplay.value != 3">
                        <section>
                            <acquisition-set></acquisition-set>
                        </section>
                        <section>
                            <sensor-selector remote="1"></sensor-selector>
                        </section>
                        <section>
                            <acquisition-snapshot></acquisition-snapshot>
                        </section>
                        <section>
                            <output-config remote="1"></output-config>
                        </section>
                    </div>

                    <!-- Remote 1 -->
                    <div id="Remote1Charts" ng-class="{'col-sm-9': remotesToDisplay.value != 3, 'col-sm-6 two-columns right-divider': remotesToDisplay.value == 3}">
                        <!-- Sensor selection for Remote 1 when screen is narrow or when both remotes are being displayed -->
                        <section class="three-columns" ng-show="remotesToDisplay.value == 3" ng-class="{'visible-xs': remotesToDisplay.value != 3}">
                            <sensor-selector remote="1"></sensor-selector>
                        </section>
                        <section ng-show="remotesToDisplay.value == 3" ng-class="{'visible-xs': remotesToDisplay.value != 3}">
                            <output-config remote="1"></output-config>
                        </section>
                        <!-- Data display for Remote 1 -->
                        <section class="text-center">
                            <chart-list remote="1"></chart-list>
                        </section>
                    </div>
                </div>

                <div id="Page2" class="column" ng-class="{'page':remotesToDisplay.value != 3, 'column-right':remotesToDisplay.value == 3,
                                                          'hide-move-right':remotesToDisplay.value == 1,
                                                          'show-move-left': remotesToDisplay.value == 2 }">
                    <!-- Sensor selection for Remote 2 when screen is wide -->
                    <div class="col-sm-3 hidden-xs" ng-show="remotesToDisplay.value != 3">
                        <section>
                            <sensor-selector remote="2"></sensor-selector>
                        </section>
                        <section>
                            <acquisition-snapshot></acquisition-snapshot>
                        </section>
                        <section>
                            <output-config remote="2"></output-config>
                        </section>
                    </div>

                    <!-- Remote 2 -->
                    <div ng-class="{'col-sm-9': remotesToDisplay.value != 3, 'col-sm-6 two-columns left-divider': remotesToDisplay.value == 3}">
                        <!-- Sensor selection for Remote 2 when screen is narrow or when both remotes are being displayed -->
                        <section class="three-columns" ng-show="remotesToDisplay.value == 3" ng-class="{'visible-xs': remotesToDisplay.value != 3}">
                            <sensor-selector remote="2"></sensor-selector>
                        </section>
                        <section ng-show="remotesToDisplay.value == 3" ng-class="{'visible-xs': remotesToDisplay.value != 3}">
                            <output-config remote="2"></output-config>
                        </section>
                        <!-- Data display for Remote 2 -->
                        <section class="text-center">
                            <chart-list remote="2"></chart-list>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
