open-learning-exchange/planet

<!-- Request template -->
<mat-toolbar>
  <button class="btnBack" mat-icon-button routerLink="/manager">
    <mat-icon>arrow_back</mat-icon>
  </button>
  <span i18n>{ planetType, select, nation {Communities} center {Nations} }</span>
  <span class="toolbar-fill"></span>
  <mat-button-toggle-group
    class="margin-lr-5 font-size-1"
    (change)="shownStatusChange($event.value)"
    #filterGroup="matButtonToggleGroup">
    <mat-button-toggle value="pending" [checked]="shownStatus === 'pending'" i18n>
      Pending
    </mat-button-toggle>
    <mat-button-toggle value="accepted" [checked]="shownStatus === 'accepted'" i18n>
      Connected
    </mat-button-toggle>
  </mat-button-toggle-group>
  <mat-icon>search</mat-icon>
  <mat-form-field class="font-size-1">
    <input matInput (keyup)="requestListFilter($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
  </mat-form-field>
</mat-toolbar>

<div class="space-container">
  <mat-toolbar>
    <mat-toolbar-row class="primary-color font-size-1">
      <span i18n>{ shownStatus, select,
        pending {Your Current List of Requests}
        accepted {{ planetType, select, nation {Connected Community Networks} center {Connected Regions} }} }
      </span>
      <span class="toolbar-fill"></span>
      <button *ngIf="shownStatus==='accepted'" mat-raised-button color="accent" i18n (click)="addHubClick()">
        { planetType, select, nation {Add Network} center {Add Region} }
      </button>
    </mat-toolbar-row>
  </mat-toolbar>
  <div class="view-container view-full-height" [ngClass]="{'view-table':shownStatus==='pending'}">
    <planet-requests-table *ngIf="shownStatus==='pending'" [data]="filteredData" (requestUpdate)="getCommunityList()"></planet-requests-table>
    <ng-container *ngIf="shownStatus==='accepted'">
      <mat-expansion-panel *ngFor="let hub of hubs">
        <mat-expansion-panel-header>
          <mat-panel-title>{{hub.name}}</mat-panel-title>
          <a *ngIf="hub?.planetId" mat-button class="margin-lr-10" (click)="view(hub.planetId)" i18n>View</a>
          <a mat-button class="margin-lr-10" (click)="deleteHub(hub, $event)" i18n>
            <mat-icon>delete</mat-icon>Delete Network
          </a>
        </mat-expansion-panel-header>
        <planet-requests-table [hubs]="hubs" [hub]="hub" [data]="hub.children" (requestUpdate)="getCommunityList()"></planet-requests-table>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title i18n>Sandbox</mat-panel-title>
        </mat-expansion-panel-header>
        <planet-requests-table [hubs]="hubs" [data]="sandboxPlanets" (requestUpdate)="getCommunityList()"></planet-requests-table>
      </mat-expansion-panel>
    </ng-container>
  </div>
</div>