<div id="csLoadingBar" class="csLoadingBar"></div>
<div id="csAddon" class="csAddon" style="visibility: hidden;">
  <div ng-controller="csCtrl" id="csCtrl">
    <div id="resultMessage" ng-show="(resultMessage.length > 0)" class="result-message alert {{resultMessageClass}}">
      <i class="{{resultMessageClassExt}}"></i>
      {{resultMessage}}
    </div>
	
	<ul class="nav nav-tabs addonMenu " id="addonMenu">
	
	                <li class="item active" id="envListTab" >
                    <a class=""
                       ng-click="openTab('envList', 'sittings')">
                        <i class="uiIconEcmsViewList"></i>
<span id="forum" class="tabName">{{i18n.envList}}</span>
                    </a>
</li>

	
	                <li class="item" id="sittingsTab">
                    <a class=""
                       ng-click="openTab('sittings', 'envList'); loadTypes()">
                        <i class="uiIconSettings"></i>
					<span class="tabName">{{i18n.environmentSettings}}</span>
                    </a>
</li>


            </ul>

	<div id="envList" class="tabcontent" style="display: block;">
  

       <table id="envTable" class="table uiGrid table-hover table-striped">
        <thead>
          <tr>
            <th> <a href="#" ng-click="orderByField='spaceGroupId'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.spaceName}}
                <img ng-show="orderByField == 'spaceGroupId' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                <img ng-show="orderByField == 'spaceGroupId' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
            </a></th>
			<th>{{i18n.typeName}}</th>
             <th> <a href="#" ng-click="orderByField='productVersion'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.productVersion}}
                 <img ng-show="orderByField == 'productVersion' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'productVersion' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
             <th> <a href="#" ng-click="orderByField='osName'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.osName}}
                 <img ng-show="orderByField == 'osName' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'osName' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
              <th> <a href="#" ng-click="orderByField='jvmVendorName'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.jvmVendorName}}
                  <img ng-show="orderByField == 'jvmVendorName' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'jvmVendorName' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
              <th> <a href="#" ng-click="orderByField='asName'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.asName}}
                  <img ng-show="orderByField == 'asName' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'asName' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
              <th> <a href="#" ng-click="orderByField='dbName'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.dbName}}
                  <img ng-show="orderByField == 'dbName' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                  <img ng-show="orderByField == 'dbName' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
              </a></th>
             <th> <a href="#" ng-click="orderByField='ssoName'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.ssoName}}
                 <img ng-show="orderByField == 'ssoName' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'ssoName' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>
			 <th> <a href="#" ng-click="orderByField='updateDate'; reverseSort = !reverseSort;vm.setPage(vm.pager.currentPage);">{{i18n.updateDate}}
                 <img ng-show="orderByField == 'updateDate' && !reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
                 <img ng-show="orderByField == 'updateDate' && reverseSort" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
             </a></th>

          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="env in vm.items | filter:def ">

            <td>{{env.spaceGroupId}}</td>
			<td>{{env.typeName}}</td>
            <td>{{env.productVersion}}</td>
			<td>{{env.osName}} {{env.osVersion}}</td>
            <td>{{env.jvmVendorName}} {{env.jvmVersion}}</td>
			<td>{{env.asName}} {{env.asVersion}}</td>
            <td>{{env.dbName}} {{env.dbVersion}}</td>
			<td>{{env.ssoName}} {{env.ssoVersion}}</td>
            <td>{{env.updateDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>


            </td>

          </tr>
        </tbody>
      </table>

        <div id="wrapper">
            <div id="leftcolumn" class="pagination">
                <!-- pager -->
                <ul ng-if="vm.pager.pages.length" class="pagination">
                    <li ng-class="{disabled:vm.pager.currentPage === 1}">
                        <a ng-click="vm.setPage(1)">First</a>
                    </li>
                    <li ng-class="{disabled:vm.pager.currentPage === 1}">
                        <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
                    </li>
                    <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
                        <a ng-click="vm.setPage(page)">{{page}}</a>
                    </li>
                    <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                        <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
                    </li>
                    <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                        <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
                    </li>
                </ul>
<select name="types" id="types" class="pull-right"
ng-options="nbPages for nbPages in itemsPerPageSugg "
ng-model="pageSize" ng-change="vm.setPage(0)"></select>
            </div>
        </div>
   </div>
   
   	<div id="sittings" class="tabcontent" style="display: none;">
    <div ng-repeat="typeName in typeNames" class="form-horizontal">
      <h4>{{i18n[typeName + 'Setting']}}</h4>
      <table class="table table-bordered table-hover table-condensed">
        <tr style="font-weight: bold">
          <td style="width:35%">{{i18n.name}}</td>
          <td style="width:25%">{{i18n.edit}}</td>
        </tr>
        <tr ng-repeat="type in types[typeName]">
          <td>
            <span editable-text="type.label" e-name="label" e-form="rowform" e-required>
              {{ type.label || i18n.empty }}
            </span>
          </td>
          <td style="white-space: nowrap">
            <form editable-form name="rowform" onbeforesave="saveType(type, $data)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == type">
              <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
                {{i18n.save}}
              </button>
              <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                {{i18n.cancel}}
              </button>
            </form>
            <div class="buttons" ng-show="!rowform.$visible">
              <button class="btn btn-primary" ng-click="rowform.$show()">{{i18n.edit}}</button>
              <button class="btn btn-danger" ng-click="removeType(typeName, $index)">{{i18n.delete}}</button>
            </div>  
          </td>
        </tr>
      </table>
      <button class="btn btn-default" ng-click="addType(typeName)">{{i18n.add}}</button>
    </div>
	</div>
   
   </div>
	
  </div>
</div>