<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>
                <app-number id="utcOffset" label="UTC Offset" [(number)]="cell.utcOffset"
                            help="Cell specific UTC offset"></app-number>
                <app-select-list id="serverTemplate" label="Template" [optionList]="templateOptions"
                                 [withEmptyOption]="true" [(option)]="cell.serverTemplateName"
                                 help="Set base Server Template for Common Options"></app-select-list>
            </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-panel title="Gameplay Settings">
            <ng-template ngbPanelContent>
                <app-number id="floorZDist" label="Z Floor Height" [(number)]="cell.floorZDist"></app-number>
                <app-number id="transitionMinZ" label="Minimum Z Transition"
                            [(number)]="cell.transitionMinZ"></app-number>
                <app-number id="serverIslandPointsMultiplier" label="Island Points Multiplier"
                            [(number)]="cell.serverIslandPointsMultiplier" help="Default 1.0"></app-number>
            </ng-template>
        </ngb-panel>
        <ngb-panel title="Colour & Style Settings">
            <ng-template ngbPanelContent>
                <app-number id="waterColorR" label="Water Red" [(number)]="cell.waterColorR"></app-number>
                <app-number id="waterColorG" label="Water Green" [(number)]="cell.waterColorG"></app-number>
                <app-number id="waterColorB" label="Water Blue" [(number)]="cell.waterColorB"></app-number>
                <app-number id="skyStyleIndex" label="Sky Style Index" [(number)]="cell.skyStyleIndex"></app-number>
            </ng-template>
        </ngb-panel>
        <ngb-panel title="Island Settings">
            <ng-template ngbPanelContent>
                <p><em>Note that Sublevel settings are sorted in the background</em></p>

                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>Name & Model</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <app-select-object id="new-island" label="New Island" [optionObject]="islandOptions" [withEmptyOption]="true"
                                               [(option)]="newIslandName"></app-select-object>
                        </td>
                        <td><button class="btn btn-warning" (click)="addNewIsland()" [disabled]="!newIslandName">Add</button></td>
                    </tr>
                    <tr *ngFor="let island of cell.islandInstances; let i = index">
                        <td>
                            <app-select-object id="{{ i }}-island-name" label="{{ island.name }}" [optionObject]="islandOptions"
                                               [option]="island.name" (optionChange)="changeIslandModel(i, $event)"></app-select-object>
                        </td>
                        <td><button class="btn btn-primary" [routerLink]="['island', i]">Edit</button></td>
                        <td><button class="btn btn-danger" (click)="deleteIsland(i)">Delete</button></td>
                    </tr>
                    </tbody>
                </table>
            </ng-template>
        </ngb-panel>
        <ngb-panel title="Discovery Zone Settings">
            <ng-template ngbPanelContent>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Discovery Type</th>
                        <th><button class="btn btn-sm btn-warning" (click)="addNewDiscovery()">Add</button></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let disco of cell.discoZones; let i = index">
                        <th>{{ disco.name }}</th>
                        <td>{{ disco.bIsManuallyPlaced ? "Location" : "Island" }}</td>
                        <td><button class="btn btn-sm btn-primary" [routerLink]="['discovery', i]">Edit</button></td>
                        <td><button class="btn btn-sm btn-danger" (click)="deleteDiscovery(i)">Delete</button></td>
                    </tr>
                    </tbody>
                </table>
            </ng-template>
        </ngb-panel>
    </ngb-accordion>
</div>
