<div id="spaceLoadingBar" class="spaceLoadingBar"></div>
<div id="spaceAddon" class="spaceAddon" style="visibility: hidden;">
<div ng-controller="spaceCtrl" id="spaceCtrl">
<div id="resultMessage" ng-show="(resultMessage.length > 0)" class="result-message alert {{resultMessageClass}}">
<i class="{{resultMessageClassExt}}"></i>
{{resultMessage}}
<a ng-show="spaceLink && spaceLink.length > 0" href="{{spaceLink}}">{{i18n.linkLabel}}</a>
</div>
<div ng-show="spaces.length && spaces.length > 0 && !showForm && !showTickets">
<h4 class="titleWithBorder">{{i18n.spaces}}</h4>
<div class = "div_filter">

<div class="header-right pull-right groupByOptions" style="">
<!-- this is filter action-->
<div class="action-bar dropdown pull-right" data-currentorderby="dueDate">
<a href="" class="actionIcon dropdown-toggle" data-toggle="dropdown"
data-placement="bottom">
<i class="uiIconFilter uiIconLightGray"></i>
</a>
<ul class="dropdown-menu">

<li><a href="javascript:void(0)"
ng-click="spacesFilter='active';loadSpaces()">{{i18n.active}}</a>
</li>
<li><a href="javascript:void(0)"
ng-click="spacesFilter='suspended';loadSpaces()">{{i18n.suspended}}</a>
</li>

<li><a href="javascript:void(0)"
ng-click="spacesFilter='all';loadSpaces()">{{i18n.all}}</a>
</li>


</ul>
</div>
</div>
<div class="header-right pull-right">{{i18n[spacesFilter]}}</div>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchFilter">
</div>
</div>
</form>
<table id="spacesTable" class="table uiGrid table-hover table-striped">
<thead>
<tr>
<th>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
{{i18n.spaceTitle}}
<img ng-show="sortType == 'name' && !sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortType == 'name' && sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'tagPrefix'; sortReverse = !sortReverse">
{{i18n.spaceIssuePrefix}}
<img ng-show="sortType == 'tagPrefix' && !sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif" />
<img ng-show="sortType == 'tagPrefix' && sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif" />
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'taskPriority'; sortReverse = !sortReverse">
{{i18n.spaceTaskPriority}}
<img ng-show="sortType == 'taskPriority' && !sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortType == 'taskPriority' && sortReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>{{i18n.customerTicketsNumber}}</th>
<th>{{i18n.productTickets}}</th>
<th>{{i18n.total}}</th>
<th>{{i18n.action}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="space in spaces | orderBy:sortType:sortReverse | filter:searchFilter">
<td><a ng-href="{{space.url}}">{{space.name}}</a></td>
<td>{{space.tagPrefix}}</td>
<td>{{space.taskPriority}}</td>
<td>{{space.supportTickets}} / {{space.limitTicketsNumber}}</td>
<td>{{space.productTickets}}</td>
<td>{{space.totalTickets}}</td>
<td class="center actionContainer">
<a data-placement="bottom" rel="tooltip" class="actionIcon" data-original-title="{{i18n.editSpace}}" ng-click="editSpace(space)">
<i class="uiIconEditStyle uiIconLightGray"></i>
</a>
<a data-placement="bottom" rel="tooltip" class="actionIcon" data-original-title="{{i18n.showTickets}}" ng-click="loadTickets(space)">
<i class="uiIconEcmsPublication uiIconLightGray"></i>
</a>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary input-large" ng-click="initForm()">{{i18n.newSpace}}</button>
</div>
<div ng-show="showTickets">
<h4 class="titleWithBorder">{{i18n.tickets}}</h4>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTicketsFilter">
</div>
</div>
</form>
<table id="ticketsTable" class="table uiGrid table-hover table-striped">
<thead>
<tr>
<th>
<a href="#" ng-click="sortTicketsType = 'title'; sortTicketsReverse = !sortTicketsReverse">
{{i18n.title}}
<img ng-show="sortTicketsType == 'title' && !sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortTicketsType == 'title' && sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>
<a href="#" ng-click="sortTicketsType = 'status'; sortTicketsReverse = !sortTicketsReverse">
{{i18n.status}}
<img ng-show="sortTicketsType == 'status' && !sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortTicketsType == 'status' && sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>
<a href="#" ng-click="sortTicketsType = 'tagName'; sortTicketsReverse = !sortTicketsReverse">
{{i18n.tagName}}
<img ng-show="sortTicketsType == 'tagName' && !sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortTicketsType == 'tagName' && sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>
<a href="#" ng-click="sortTicketsType = 'type'; sortTicketsReverse = !sortTicketsReverse">
{{i18n.type}}
<img ng-show="sortTicketsType == 'type' && !sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortTicketsType == 'type' && sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th>
<a href="#" ng-click="sortTicketsType = 'environmentName'; sortTicketsReverse = !sortTicketsReverse">
{{i18n.environmentName}}
<img ng-show="sortTicketsType == 'environmentName' && !sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueDownArrow.gif">
<img ng-show="sortTicketsType == 'environmentName' && sortTicketsReverse" src="/eXoResources/skin/images/Icons/skinIcons/16x16/BlueUpArrow.gif">
</a>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ticket in tickets | orderBy:sortTicketsType:sortTicketsReverse | filter:searchTicketsFilter">
<td>{{ticket.title}}</td>
<td>{{ticket.status}}</td>
<td>{{ticket.tagName}}</td>
<td>{{ticket.type}}</td>
<td>{{ticket.environmentName}}</td>
<td><a ng-show="ticket.link" href="{{ticket.link}}" target="about:blank">{{i18n.link}}</a></td>
</tr>
</tbody>
</table>
<button type="button" class="btn input-large" ng-click="showTickets = false">{{i18n.cancel}}</button>
</div>
<div class="form-horizontal" ng-show="!spaces.length || spaces.length == 0 || showForm">
<h3>{{i18n.spaceDetails}}</h3>
<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.spaceBasic}}</h4>
</div>
<div class="control-group">
<label class="control-label" for="inputName">{{i18n.spaceTitle}}</label>
<div class="controls">
<input type="text" name="inputName" id="inputName" placeholder="{{i18n.spaceTitle}}" ng-model="newSpace.name" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="spaceInputDescription">{{i18n.spaceDescription}}</label>
<div class="controls">
<textarea rows="10" cols="50" id="spaceInputDescription" name="spaceInputDescription" ng-model="newSpace.description" placeholder="{{i18n.spaceDescription}}"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="spaceLanguage">{{i18n.spaceLanguage}}</label>
<div class="controls">
<select id="spaceLanguage" ng-model="newSpace.language" name="spaceLanguage">
<option value="EN">{{i18n.english}}</option>
<option value="FR">{{i18n.french}}</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="hostedCustomer">{{i18n.hostedCustomer}}</label>
<div class="controls">
<input type="checkbox" name="hostedCustomer" id="hostedCustomer" ng-model="newSpace.hosted">
</div>
</div>
<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.spaceDetails}}</h4>
</div>
<div class="control-group">
<label class="control-label" for="inputTicketsLimit">{{i18n.ticketsLimit}}</label>
<div class="controls">
<input type="text" name="inputTicketsLimit" id="inputTicketsLimit" ng-model="newSpace.limitTicketsNumber">
</div>
</div>
<div>
<div ng-show="!newSpace.managersGroupId" class="control-group">
<label class="control-label" for="managersGroupId">{{i18n.spaceManagersGroup}}</label>
<div class="controls spaceSuggestion">
<form action="#" method="POST">
<input type="text" name="managersGroupId" id="managersGroupId" required>
</form>
</div>
</div>
<div ng-show="newSpace.managersGroupId" class="control-group">
<label class="control-label" for="managerGroupId">{{i18n.spaceManagersGroup}}</label>
<div class="controls">
<input type="text" id="managerGroupId" name="managersGroupId" ng-model="newSpace.managersGroupId.id" disabled>
</div>
</div>
</div>
<div>
<div data-ng-show="!newSpace.invitedMembersGroupId" class="control-group">
<label class="control-label" for="membersInvitedGroupId">{{i18n.spaceMembersInvitedGroup}}</label>
<div class="controls spaceSuggestion">
<form action="#" method="POST">
<input type="text" name="membersInvitedGroupId" id="membersInvitedGroupId" required>
</form>
</div>
</div>
<div ng-show="newSpace.invitedMembersGroupId" class="control-group">
<label class="control-label" for="memberGroupId">{{i18n.spaceMembersInvitedGroup}}</label>
<div class="controls">
<input type="text" id="memberGroupId" name="memberGroupId" ng-model="newSpace.invitedMembersGroupId.id" disabled>
</div>
</div>
</div>
<div>
<div data-ng-show="!newSpace.groupId" class="control-group">
<label class="control-label" for="spaceMembers">{{i18n.spaceMembers}}</label>
<div class="controls spaceSuggestion">
<form action="#" method="POST">
<input type="text" name="spaceMembers" id="spaceMembers" required>
</form>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="spaceIssuePrefix">{{i18n.spaceIssuePrefix}}</label>
<div class="controls">
<input type="text" name="spaceIssuePrefix" id="spaceIssuePrefix" placeholder="{{i18n.spaceIssuePrefix}}" ng-model="newSpace.tagPrefix" required>
</div>
</div>
<div class="control-group" data-ng-show="!newSpace.groupId">
<label class="control-label" for="spaceTagIndex">{{i18n.spaceIssueIndex}}</label>
<div class="controls">
<input type="text" name="spaceTagIndex" id="spaceTagIndex" placeholder="{{i18n.spaceIssuePrefix}}" ng-model="newSpace.tagIndex" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="spaceIncidentFlow">{{i18n.spaceIncidentFlow}}</label>
<div class="controls">
<select name="spaceIncidentFlow" id="spaceIncidentFlow" ng-model="newSpace.incidentFlow"  ng-options="key as key for (key,value) in flows"></select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="spaceInformationFlow">{{i18n.spaceInformationFlow}}</label>
<div class="controls">
<select name="spaceInformationFlow" id="spaceInformationFlow" ng-model="newSpace.informationFlow"  ng-options="key as key for (key,value) in flows"></select>
</div>
</div>


<div class="control-group">
<label class="control-label" for="subscriptionActive">{{i18n.internal}}</label>
<div class="controls">
<input type="checkbox" name="internal" id="internal" ng-model="newSpace.internal">
</div>
</div>

<div class="control-group">
<label class="control-label" for="spaceSla">Sla</label>
<div class="controls">
<select name="spaceSla" id="spaceSla" ng-model="newSpace.sla"  ng-options="sla  for sla in slaList"></select>
</div>
</div>

<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.spaceSubscriptionSettings}}</h4>
</div>

<div class="control-group">
<label class="control-label" for="subscriptionActive">{{i18n.subscriptionActive}}</label>
<div class="controls">
<input type="checkbox" name="subscriptionActive" id="subscriptionActive" ng-model="newSpace.subscriptionActive">
</div>
</div>


<div class="control-group">
<label class="control-label" for="spaceSubscription">{{i18n.subscription}}</label>
<div class="controls">
<select ng-disabled="!newSpace.subscriptionActive" name="spaceSubscription" id="spaceSubscription" ng-model="newSpace.subscription"  ng-options="subscription  for subscription in subscriptionList"></select>
</div>
</div>

<div class="control-group">
<label class="control-label" for="subscriptionStartDate">{{i18n.subscriptionStartDate}}</label>
<div class="controls">
<input id="subscriptionStartDate" lang="{{locale}}" format="{{dateFormat}}" placeholder="{{dateFormat}}" type="text" name="subscriptionStartDate" ng-model="newSpace.subscriptionStartDate" ng-disabled="!newSpace.subscriptionActive"/>
<span ng-show="startDateErrorMessage.length > 0" class="{{startDateErrorClass}}">{{startDateErrorMessage}}</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="subscriptionEndDate">{{i18n.subscriptionEndDate}}</label>
<div class="controls">
<input id="subscriptionEndDate" lang="{{locale}}" format="{{dateFormat}}"  placeholder="{{dateFormat}}" type="text" name="subscriptionEndDate" ng-model="newSpace.subscriptionEndDate" ng-disabled="!newSpace.subscriptionActive"/>
<span ng-show="endDateErrorMessage.length > 0" class="{{endDateErrorClass}}">{{endDateErrorMessage}}</span>
<span ng-show="StartAfterEndDateErrorMessage.length > 0" class="{{StartAfterEndDateErrorClass}}">{{StartAfterEndDateErrorMessage}}</span>
</div>
</div>

<div class="control-group">
<h4 class="titleWithBorder ">{{i18n.spaceTaskSettings}}</h4>
</div>

<div class="control-group">
<label class="control-label" for="spaceInputTaskPriority">{{i18n.spaceTaskPriority}}</label>
<div class="controls">
<select id="spaceInputTaskPriority" ng-model="newSpace.taskPriority" name="spaceInputTaskPriority">
<option value="NONE">{{i18n.spaceTaskPriorityNone}}</option>
<option value="LOW">{{i18n.spaceTaskPriorityLow}}</option>
<option value="NORMAL">{{i18n.spaceTaskPriorityNormal}}</option>
<option value="HIGH">{{i18n.spaceTaskPriorityHigh}}</option>
</select>
</div>
</div>
<div>
<div data-ng-show="!newSpace.taskDefaultAssignee" class="control-group">
<label class="control-label" for="spaceTaskDefaultAssignee">{{i18n.spaceTaskDefaultAssignee}}</label>
<div class="controls spaceSuggestion">
<form action="#" method="POST">
<input type="text" name="spaceTaskDefaultAssignee" id="spaceTaskDefaultAssignee" required>
</form>
</div>
</div>
<div data-ng-show="newSpace.taskDefaultAssignee" class="control-group">
<label class="control-label" for="taskDefaultAssignee">{{i18n.spaceTaskDefaultAssignee}}</label>
<div class="controls">
<input type="text" id="taskDefaultAssignee" name="taskDefaultAssignee" ng-model="newSpace.taskDefaultAssignee.id" disabled>
</div>
</div>
</div>
<button type="button" ng-show="!newSpace.groupId" class="btn btn-primary input-large" ng-click="saveSpace()">{{i18n.save}}</button>
<button type="button" ng-show="newSpace.groupId" class="btn btn-primary input-large" ng-click="updateSpace()">{{i18n.save}}</button>
<button type="button" ng-show="spaces.length && spaces.length > 0" class="btn input-large" ng-click="showForm = false">{{i18n.cancel}}</button>
</div>
</div>
</div>