<mat-grid-list cols="4" rowHeight={{calRowHeight()}} [gutterSize]="'15px'" style="padding: 20px;">
    <mat-grid-tile
        [colspan]=1
        [rowspan]=1>
        <mat-card class="mat-colname-css">
            <mat-card-title>
                TO DO
            </mat-card-title>
            <mat-card-content>
                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
                    <mat-grid-tile
                        *ngFor="let tile of to_do"
                        [colspan]=1
                        [rowspan]=1>
                        <mat-card class="mat-issuename-css">
                            <mat-card-title>
                                {{tile.name}}
                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css"><mat-icon>more_vert</mat-icon></button>
                                <mat-menu #menu="matMenu">
                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'to_do')">Move to in progress</button>
                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'to_do')">Mark as done</button>
                                </mat-menu>                                                                            
                            </mat-card-title>
                            <mat-card-content>
                                <p>{{tile.content}}</p>
                            </mat-card-content>
                        </mat-card>
                    </mat-grid-tile>
                </mat-grid-list> 
            </mat-card-content>
        </mat-card>
    </mat-grid-tile>

    <mat-grid-tile
        [colspan]=1
        [rowspan]=1>
        <mat-card class="mat-colname-css">
            <mat-card-title>IN PROGRESS</mat-card-title>
            <mat-card-content>
                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
                    <mat-grid-tile
                        *ngFor="let tile of in_prog"
                        [colspan]=1
                        [rowspan]=1>
                        <mat-card class="mat-issuename-css">
                            <mat-card-title>
                                {{tile.name}}
                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css"><mat-icon>more_vert</mat-icon></button>
                                <mat-menu #menu="matMenu">
                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'in_prog')">Move to To Do</button>
                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'in_prog')">Mark as done</button>
                                </mat-menu>                                                                            
                            </mat-card-title>
                            <mat-card-content>
                                <p>{{tile.content}}</p>
                            </mat-card-content>
                        </mat-card>
                    </mat-grid-tile>
                </mat-grid-list> 
            </mat-card-content>
        </mat-card>
    </mat-grid-tile>

    <mat-grid-tile
        [colspan]=1
        [rowspan]=1>
        <mat-card class="mat-colname-css">
            <mat-card-title>DONE</mat-card-title>
            <mat-card-content>
                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
                    <mat-grid-tile
                        *ngFor="let tile of done"
                        [colspan]=1
                        [rowspan]=1>
                        <mat-card class="mat-issuename-css">
                            <mat-card-title>
                                {{tile.name}}
                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css"><mat-icon>more_vert</mat-icon></button>
                                <mat-menu #menu="matMenu">
                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'done')">Move to To Do</button>
                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'done')">Move to In Progress</button>
                                </mat-menu>                                                                            
                            </mat-card-title>
                            <mat-card-content>
                                <p>{{tile.content}}</p>
                            </mat-card-content>
                        </mat-card>
                    </mat-grid-tile>
                </mat-grid-list> 
            </mat-card-content>
        </mat-card>
    </mat-grid-tile>

    <mat-grid-tile
        [colspan]=1
        [rowspan]=1>
        <mat-card class="mat-colname-css">
            <mat-card-title>BACKLOG</mat-card-title>
            <mat-card-content>
                <mat-grid-list cols='1' rowHeight="3:1" [gutterSize]="'10px'" style="padding: 5px;">
                    <mat-grid-tile
                        *ngFor="let tile of backlog"
                        [colspan]=1
                        [rowspan]=1>
                        <mat-card class="mat-issuename-css">
                            <mat-card-title>
                                {{tile.name}}
                                <button mat-button [matMenuTriggerFor]="menu" class="menu-button-css"><mat-icon>more_vert</mat-icon></button>
                                <mat-menu #menu="matMenu">
                                  <button mat-menu-item (click)="moveToToDo(tile.tid, 'backlog')">Move to To Do</button>
                                  <button mat-menu-item (click)="moveToInProgress(tile.tid, 'backlog')">Move to In Progress</button>
                                  <button mat-menu-item (click)="moveToDone(tile.tid, 'backlog')">Mark as Done</button>
                                </mat-menu>                                                                            
                            </mat-card-title>
                            <mat-card-content>
                                <p>{{tile.content}}</p>
                            </mat-card-content>
                        </mat-card>
                    </mat-grid-tile>
                </mat-grid-list> 
            </mat-card-content>
        </mat-card>
    </mat-grid-tile>
    <div class="add-button-css">
        <button mat-fab color="primary" (click)="openDialog()">
            <mat-icon>create</mat-icon>
            
        </button>
    </div>
</mat-grid-list> 
