<div class="mt-3 mb-3">
    <h2>Cell Grid</h2>
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th *ngFor="let x of xArray">{{ x }}</th>
        </tr>
        </thead>
        <tbody *ngFor="let y of xArray">
        <tr>
            <th>{{ y }}</th>
            <td *ngFor="let x of xArray">
                <button class="btn btn-sm btn-outline-primary" [routerLink]="['/config','server', serverLookup[x][y]]" *ngIf="serverLookup[x][y] !== undefined">{{ serverLookup[x][y] }}</button>
                <button class="btn btn-sm btn-outline-danger" (click)="addNewServer(x, y)" *ngIf="serverLookup[x][y] === undefined">+</button>
            </td>
        </tr>
        </tbody>
    </table>
    <h2 *ngIf="unknownServers.length > 0">Cells Outside Grid</h2>
    <button class="btn btn-warning" *ngFor="let u of unknownServers">{{ u }}</button>
    <h2>Server Templates</h2>
    <p>Allows for modifying or applying settings to multiple servers at the same time. Mostly useful for environmental
        changes, rather than Island position</p>
    <button class="btn btn-primary" *ngFor="let template of grid.serverTemplates">{{ template.name }}</button>
</div>