<div class="mt-3">
    <h2>{{ cell.name }}<em *ngIf="cell.name === '' || cell.name === undefined">No Name Set</em> - ({{ cell.gridX }}
        , {{ cell.gridY }})</h2>
    <ngb-accordion>
        <ngb-panel title="General Settings">
            <ng-template ngbPanelContent>
                <app-text id="name" label="Name" [(text)]="cell.name"
                          help="Friendly name for this server. Can be blank"></app-text>
                <app-number id="gridX" label="Grid X" [(number)]="cell.gridX"
                            help="X position in the Grid. 0 Indexed"></app-number>
                <app-number id="gridY" label="Grid Y" [(number)]="cell.gridY"
                            help="Y position in the Grid. 0 Indexed"></app-number>
                <app-checkbox id="isHomeServer" label="Home Server" [(checkbox)]="cell.isHomeServer"
                              help="Whether this cell can be used for players with no beds"></app-checkbox>
            </ng-template>
        </ngb-panel>
        <ngb-panel title="Connection Settings">
            <ng-template ngbPanelContent>
                <app-text id="ip" label="IP" [(text)]="cell.ip" help="IP address of host this cell is on"></app-text>
                <app-number id="port" label="Port" [(number)]="cell.port"
                            help="Port used for inter cell communication"></app-number>
                <app-number id="gamePort" label="Game Port" [(number)]="cell.gamePort"
                            help="Port used for external UE4 traffic"></app-number>
                <app-number id="seamlessDataPort" label="Seamless Port" [(number)]="cell.seamlessDataPort"
                            help="Used for transferring map images when no MetaWorldURL set"></app-number>
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
    <p>{{ cell | json }}</p>
</div>
