<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="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>