From c1b25dee26f5fb0ca7511a530f2df27ad2d64f44 Mon Sep 17 00:00:00 2001
From: Daniel Malachovsky <dmalacho@cisco.com>
Date: Tue, 10 May 2016 13:29:22 +0200
Subject: [PATCH] Angular material libraries include

- npm and bower install added
- .bowerrc and bower.json and package.json files added
- layout started
- proper (?) routing added
- tenant table added

Change-Id: I1f36f74f2d0b070dcda6c52e9c10d1a9dd4f643d
Signed-off-by: Daniel Malachovsky <dmalacho@cisco.com>
---
 groupbasedpolicy-ui/.gitignore                |  3 ++
 .../OSGI-INF/blueprint/blueprint.xml          |  6 ++-
 groupbasedpolicy-ui/module/pom.xml            | 31 +++++++++++++
 .../module/src/main/resources/gbp/.bowerrc    |  3 ++
 .../module/src/main/resources/gbp/bower.json  | 11 +++++
 .../resources/gbp/common/gbp.controller.js    | 45 ++++++++++++++++++-
 .../src/main/resources/gbp/common/gbp.css     | 39 ++++++++++++++++
 .../main/resources/gbp/common/gbp.module.js   | 45 ++++++++++++++++---
 .../main/resources/gbp/common/gbp.service.js  | 11 +++++
 .../resources/gbp/common/views/index.tpl.html | 31 +++++++++++--
 .../module/src/main/resources/gbp/main.js     | 15 ++++++-
 .../src/main/resources/gbp/package.json       | 17 +++++++
 .../resources/gbp/policy/policy.controller.js | 14 ++++++
 .../main/resources/gbp/policy/policy.tpl.html |  2 +
 .../resources/gbp/tenant/tenant.controller.js | 14 +++---
 .../resources/gbp/tenant/tenant.service.js    |  2 +-
 .../main/resources/gbp/tenant/tenant.tpl.html | 40 ++++++++++++++---
 17 files changed, 301 insertions(+), 28 deletions(-)
 create mode 100644 groupbasedpolicy-ui/.gitignore
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/.bowerrc
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/bower.json
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/package.json
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.controller.js
 create mode 100644 groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.tpl.html

diff --git a/groupbasedpolicy-ui/.gitignore b/groupbasedpolicy-ui/.gitignore
new file mode 100644
index 000000000..78add0be6
--- /dev/null
+++ b/groupbasedpolicy-ui/.gitignore
@@ -0,0 +1,3 @@
+module/node
+module/src/main/resources/gbp/node_modules
+module/src/main/resources/gbp/vendor
diff --git a/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml b/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
index d72587c44..59ee158ad 100644
--- a/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
+++ b/groupbasedpolicy-ui/bundle/src/main/resources/OSGI-INF/blueprint/blueprint.xml
@@ -10,7 +10,11 @@
         <property name="requireJs" value="app/gbp/main"/>
         <property name="angularJs" value="app.gbp"/>
 		<property name="cssDependencies">
-            <list></list>
+            <list>
+                <value>src/app/gbp/common/gbp.css</value>
+                <value>src/app/gbp/vendor/angular-material/angular-material.css</value>
+                <value>src/app/gbp/vendor/angular-material-data-table/dist/md-data-table.min.css</value>
+            </list>
         </property>
     </bean>
 </blueprint>
diff --git a/groupbasedpolicy-ui/module/pom.xml b/groupbasedpolicy-ui/module/pom.xml
index 8060b1569..d8df3bb6b 100644
--- a/groupbasedpolicy-ui/module/pom.xml
+++ b/groupbasedpolicy-ui/module/pom.xml
@@ -20,4 +20,35 @@
   <description>GBP UI Module Resources</description>
   <packaging>jar</packaging>
 
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>0.0.24</version>
+                <configuration>
+                    <nodeVersion>v0.12.7</nodeVersion>
+                    <npmVersion>3.1.3</npmVersion>
+                    <workingDirectory>src/main/resources/gbp/</workingDirectory>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                            <goal>npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                    </execution>
+                    <execution>
+                        <id>bower</id>
+                        <goals>
+                            <goal>bower</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
+        </plugins>
+    </build>
+
 </project>
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/.bowerrc b/groupbasedpolicy-ui/module/src/main/resources/gbp/.bowerrc
new file mode 100644
index 000000000..5bdbb80b0
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/.bowerrc
@@ -0,0 +1,3 @@
+{
+	"directory" : "vendor"
+}
\ No newline at end of file
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/bower.json b/groupbasedpolicy-ui/module/src/main/resources/gbp/bower.json
new file mode 100644
index 000000000..34050fdee
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/bower.json
@@ -0,0 +1,11 @@
+{
+  "name": "opendaylight-gbp",
+  "version": "0.4.0",
+  "dependencies": {
+    "angular-animate": "~1.5.0",
+    "angular-aria": "~1.5.0",
+    "angular-material": "1.0.5",
+    "roboto-fontface": "~0.4.3",
+    "angular-material-data-table": "~0.9.11"
+  }
+}
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
index ede0effca..0b6d52cb9 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.controller.js
@@ -3,9 +3,50 @@ define(['app/gbp/common/gbp.service'], function () {
 
     angular.module('app.gbp').controller('RootGbpCtrl', RootGbpCtrl);
 
-    RootGbpCtrl.$inject = ['$scope', 'RootGbpService'];
+    RootGbpCtrl.$inject = ['$state', '$scope', 'RootGbpService'];
 
-    function RootGbpCtrl($scope, RootGbpService) {
+    function RootGbpCtrl($state, $scope, RootGbpService) {
+        /* properties */
+        $scope.stateUrl = null;
+        $scope.sidePanelPage = false;
+
+        /* methods */
+        $scope.closeSidePanel = closeSidePanel;
+        $scope.openSidePanel = openSidePanel;
+
+        RootGbpService.setMainClass();
+        console.log('RootGbpCtrl initialized');
+
+        /* implementations */
+        /**
+         * Sets '$scope.sidePanelPage' to false. This variable is watched in index.tpl.html template
+         * and opens/closes side panel
+         */
+        function closeSidePanel() {
+            $scope.sidePanelPage = false;
+        }
+
+        /**
+         * fills $scope.stateUrl with loaded url
+         * It's called on $viewContentLoaded event
+         */
+        function setStateUrl() {
+            $scope.stateUrl = $state.current.url;
+        }
+
+        /**
+         * Sets '$scope.sidePanelPage' to true. This variable is watched in index.tpl.html template
+         * and opens/closes side panel
+         */
+        function openSidePanel() {
+            $scope.sidePanelPage = true;
+        }
+
+        /* event listeners */
+        /**
+         * Event fired after content loaded, setStateUrl function is called to fill stateUrl method
+         */
+        $scope.$on('$viewContentLoaded', setStateUrl);
 
     }
 });
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
new file mode 100644
index 000000000..9c3bb0e55
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.css
@@ -0,0 +1,39 @@
+.gbpUiGlobalWrapper {
+    background: #ffffff;
+    margin-bottom: 0!important;
+    min-height: 100%;
+    padding: 0px;
+}
+
+.gbpUiGlobalWrapper .main {
+    top: 0px;
+}
+
+.gbpUiWrapper {
+    background-color: #414042;
+}
+
+.gbpUiWrapper .pageContent {
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.gbpUiWrapper .side-panel {
+    width: 400px;
+    color: #000 ! important;
+    border: 1px solid #000;
+}
+
+.gbpUiWrapper .h100 {
+    height: 100%;
+}
+
+.gbpUiWrapper.w100 {
+    width: 100%;
+}
+
+.gbpUiWrapper.flt-r {
+    float: right;
+}
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
index 37eaf5dd0..9a00557a1 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.module.js
@@ -1,17 +1,21 @@
 define([
     'app/routingConfig',
     'Restangular',
-    'angular-translate-loader-partial'], function () {
+    'angular-translate-loader-partial',
+    'angular-animate',
+    'angular-aria',
+    'angular-material',
+    'angular-material-data-table'], function () {
 
     var gbp = angular.module('app.gbp',
         [
-            'app.core', 'ui.router.state', 'restangular',
+            'app.core', 'ui.router.state', 'restangular', 'ngAnimate', 'ngAria', 'ngMaterial', 'md.data.table',
         ]);
 
     gbp.register = gbp; // for adding services, controllers, directives etc. to angular module before bootstrap
 
     gbp.config(function ($stateProvider, $compileProvider, $controllerProvider, $provide, NavHelperProvider,
-                         $translateProvider, $translatePartialLoaderProvider) {
+                         $translateProvider, $translatePartialLoaderProvider, $mdThemingProvider) {
         gbp.register = {
             controller: $controllerProvider.register,
             directive: $compileProvider.directive,
@@ -21,9 +25,10 @@ define([
 
         /*$translatePartialLoaderProvider.addPart('app/gbp/assets/data/locale');*/
 
+        NavHelperProvider.addControllerUrl('app/gbp/common/gbp.controller');
         NavHelperProvider.addControllerUrl('app/gbp/contract/contract.controller');
         NavHelperProvider.addControllerUrl('app/gbp/epg/epg.controller');
-        NavHelperProvider.addControllerUrl('app/gbp/common/gbp.controller');
+        NavHelperProvider.addControllerUrl('app/gbp/policy/policy.controller');
         NavHelperProvider.addControllerUrl('app/gbp/tenant/tenant.controller');
 
         NavHelperProvider.addToMenu('gbp', {
@@ -62,9 +67,10 @@ define([
             },
         });
 
-        $stateProvider.state('main.gbp.tenant', {
+        $stateProvider.state('main.gbp.index.tenant', {
             url: '/tenant',
             access: access.admin,
+            templateUrl: 'src/app/gbp/common/views/index.tpl.html',
             views: {
                 '': {
                     controller: 'TenantController',
@@ -73,28 +79,53 @@ define([
             },
         });
 
-        $stateProvider.state('main.gbp.epg', {
+        $stateProvider.state('main.gbp.index.policy', {
+            url: '/policy',
+            access: access.admin,
+            templateUrl: 'src/app/gbp/common/views/index.tpl.html',
+            views: {
+                '': {
+                    controller: 'PolicyController',
+                    templateUrl: 'src/app/gbp/policy/policy.tpl.html',
+                },
+            },
+        });
+
+        $stateProvider.state('main.gbp.index.policy.epg', {
             url: '/epg',
             access: access.admin,
+            templateUrl: 'src/app/gbp/common/views/index.tpl.html',
             views: {
                 '': {
+                    controller: 'PolicyController',
+                    templateUrl: 'src/app/gbp/policy/policy.tpl.html',
+                },
+                'sidePanel': {
                     controller: 'EpgController',
                     templateUrl: 'src/app/gbp/epg/epg.tpl.html',
                 },
             },
         });
 
-        $stateProvider.state('main.gbp.contract', {
+        $stateProvider.state('main.gbp.index.policy.contract', {
             url: '/contract',
             access: access.admin,
+            templateUrl: 'src/app/gbp/common/views/index.tpl.html',
             views: {
                 '': {
+                    controller: 'PolicyController',
+                    templateUrl: 'src/app/gbp/policy/policy.tpl.html',
+                },
+                'sidePanel': {
                     controller: 'ContractController',
                     templateUrl: 'src/app/gbp/contract/contract.tpl.html',
                 },
             },
         });
 
+        $mdThemingProvider.theme('default')
+            .primaryPalette('blue')
+            .accentPalette('blue-grey');
     });
 
     return gbp;
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.service.js
index 00e57681f..7eb65a537 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.service.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/gbp.service.js
@@ -6,6 +6,17 @@ define([], function () {
     RootGbpService.$inject = [];
 
     function RootGbpService() {
+        this.setMainClass = setMainClass;
 
+        /**
+         * Sets gbpUiGlobalWrapper to override padding on parent class
+         */
+        function setMainClass(){
+            if ($('.gbpUiWrapper').length) {
+                $('.gbpUiWrapper').closest('.col-xs-12').addClass('gbpUiGlobalWrapper');
+            }
+        }
     }
+
+    return RootGbpService;
 });
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html
index e3959e5d2..e515d2e17 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/common/views/index.tpl.html
@@ -1,3 +1,28 @@
-<section class="gbpWrapper clearfix">
-    New GBP UI
-</section>
+<div layout="row" class="gbpUiWrapper" flex>
+    <div layout="column" role="main" flex class="master-view">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <md-button ng-href="#/gbp/index/tenant" ng-click="closeSidePanel()" class="md-primary">Tenant</md-button>
+                <md-button ng-href="#/gbp/index/policy" ng-click="closeSidePanel()" class="md-primary">Policy</md-button>
+                <span flex></span>
+                <md-button ng-if="stateUrl === '/policy'" ng-href="#/gbp/index/policy/epg" ng-click="openSidePanel()" class="md-primary">EPGs</md-button>
+                <md-button ng-if="stateUrl === '/policy'" ng-href="#/gbp/index/policy/contract" ng-click="openSidePanel()" class="md-primary">Contracts</md-button>
+            </div>
+        </md-toolbar>
+        <md-content md-scroll-y flex ui-view></md-content>
+    </div>
+    <md-sidenav class="md-sidenav-right md-whiteframe-z1 detail-view" md-is-locked-open="sidePanelPage">
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2>
+                    <span>Sidepanel</span>
+                </h2>
+                <span flex></span>
+                <md-button ng-href="#/gbp/index/policy" ng-click="closeSidePanel()" class="md-button">Close panel</md-button>
+            </div>
+        </md-toolbar>
+        <md-content flex>
+            <div flex layout="column" ui-view="sidePanel"></div>
+        </md-content>
+    </md-sidenav>
+</div>
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
index 2dac6b0cf..6bff65135 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/main.js
@@ -1,6 +1,17 @@
 require.config({
-    paths: {},
-    shim: {},
+    paths: {
+        'angular-material': 'app/gbp/vendor/angular-material/angular-material.min',
+        'angular-animate': 'app/gbp/vendor/angular-animate/angular-animate.min',
+        'angular-aria': 'app/gbp/vendor/angular-aria/angular-aria.min',
+        'lodash': 'app/gbp/vendor/lodash/dist/lodash.min',
+        'angular-material-data-table': 'app/gbp/vendor/angular-material-data-table/dist/md-data-table.min',
+    },
+    shim: {
+        'angular-material': ['angular'],
+        'angular-animate': ['angular'],
+        'angular-aria': ['angular'],
+        'angular-material-data-table': ['angular', 'angular-material'],
+    },
 });
 
 define(['app/gbp/common/gbp.module']);
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/package.json b/groupbasedpolicy-ui/module/src/main/resources/gbp/package.json
new file mode 100644
index 000000000..c888732ca
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/package.json
@@ -0,0 +1,17 @@
+{
+  "author": "Daniel Malachovsky",
+  "name": "opendaylight-gbp",
+  "description": "openDayLight GBP UI",
+  "version": "0.1.0",
+  "homepage": "http://opendaylight.org",
+  "license": "EPL-1.0",
+  "bugs": "https://bugs.opendaylight.org/",
+  "repository": {
+    "type": "git",
+    "url": "https://git.opendaylight.org/gerrit/groupbasedpolicy.git"
+  },
+  "dependencies": {
+    "bower": "1.7.7"
+  },
+  "devDependencies": {}
+}
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.controller.js
new file mode 100644
index 000000000..925bfdb08
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.controller.js
@@ -0,0 +1,14 @@
+define([], function () {
+    'use strict';
+
+    angular.module('app.gbp').controller('PolicyController', PolicyController);
+
+    PolicyController.$inject = ['$scope'];
+
+    /* @ngInject */
+    function PolicyController($scope) {
+        console.log('PolicyController initialized');
+    }
+
+});
+
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.tpl.html
new file mode 100644
index 000000000..510eb5284
--- /dev/null
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/policy/policy.tpl.html
@@ -0,0 +1,2 @@
+<div ui-view="epg"></div>
+<div ui-view="contract"></div>
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
index 63ae55370..d252b43a5 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.controller.js
@@ -7,15 +7,17 @@ define([
     angular.module('app.gbp').controller('TenantController', TenantController);
 
     TenantController.$inject = ['$scope', 'TenantService', 'TenantListService'];
-
+    /* @ngInject */
     function TenantController($scope, TenantService, TenantListService) {
-        $scope.tenant = TenantService.createObject();
-        $scope.tenant.get('newTenant');
-        console.log('Tenant', $scope.tenant);
+        $scope.tenantsTableQuery = {
+            order: "data.id",
+            limit: 25,
+            page: 1,
+            options: [25, 50, 100],
+            filter: ''
+        };
 
         $scope.tenants = TenantListService.createList();
         $scope.tenants.get('config');
-
-        console.log('Tenants', $scope.tenants);
     }
 });
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
index 7ec1ea8a3..8d9d3891e 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.service.js
@@ -4,7 +4,7 @@ define([], function () {
     angular.module('app.gbp').service('TenantService', TenantService);
 
     TenantService.$inject = ['Restangular'];
-
+    /* @ngInject */
     function TenantService(Restangular) {
         /* methods */
         this.createObject = createObject;
diff --git a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
index 7bc343616..92eca4dd1 100644
--- a/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
+++ b/groupbasedpolicy-ui/module/src/main/resources/gbp/tenant/tenant.tpl.html
@@ -1,8 +1,36 @@
-Tenant<br/>
-id: {{tenant.data.id}}<br/>
-name: {{tenant.data.name}}<br/>
-description: {{tenant.data.description}}<br/>
+<section flex layout="column">
+    <md-table-container ng-if="tenants.data.length">
+        <table md-table>
+            <thead md-head md-order="tenantsTableQuery.order">
+            <tr md-row>
+                <th md-column md-order-by="data.id"><span>Id</span></th>
+                <th md-column md-order-by="data.name"><span>Name</span></th>
+                <th md-column md-order-by="data.description"><span>Description</span></th>
+                <th md-column><span>Actions</span></th>
+            </tr>
+            </thead>
+            <tbody md-body>
+            <tr md-row ng-repeat="tenant in tenants.data | filter: tenantsTableQuery.filter  | orderBy : tenantsTableQuery.order | limitTo: tenantsTableQuery.limit : (tenantsTableQuery.page -1) * tenantsTableQuery.limit">
+                <td md-cell>{{tenant.data.id}}</td>
+                <td md-cell>{{tenant.data.name}}</td>
+                <td md-cell>{{tenant.data.description}}</td>
+                <td md-cell>
+                    <md-button class="md-icon-button" ng-click="edit(tenant)">
+                        <md-icon>edit</md-icon>
+                    </md-button>
+                    <md-button class="md-icon-button" ng-click="delete(tenant)">
+                        <md-icon>delete</md-icon>
+                    </md-button>
+                </td>
+            </tr>
 
-<section ng-repeat="tenantElement in tenants.data">
-    {{tenantElement.data.id}}, {{tenantElement.data.name}}, {{tenantElement.data.description}}<br/>
+            </tbody>
+        </table>
+        <md-table-pagination md-limit="tenantsTableQuery.limit"
+                             md-page="tenantsTableQuery.page"
+                             md-options="tenantsTableQuery.options"
+                             md-total="{{tenants.data.length}}"
+                             md-page-select="options.pageSelect">
+        </md-table-pagination>
+    </md-table-container>
 </section>
-- 
2.36.6