{{define "head"}}
    <style>
        .main-content {
            margin: 20px;
            width: 450px;
            display: grid;
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 150px 150px 150px; 
            column-gap: 0;
            row-gap: 0;
            background-color: #eeb;
        }

        .tt-item {
            display: inline-block;
            width: 150px;
            height: 150px;
        }

        .bb { border-bottom: 5px solid #333; }
        .bt { border-top: 5px solid #333; }
        .bl { border-left: 5px solid #333; }
        .br { border-right: 5px solid #333; }
        
    </style>
{{end}}


{{define "content"}}
<div class="main-content">
    <a class="tt-item br bb" href="{{ .gameFlow -}}1">&nbsp;</a>
    <a class="tt-item bb" href="{{ .gameFlow -}}2">&nbsp;</a>
    <a class="tt-item bl bb" href="{{ .gameFlow -}}3">&nbsp;</a>
    <a class="tt-item br" href="{{ .gameFlow -}}4">&nbsp;</a>
    <a class="tt-item" href="{{ .gameFlow -}}5">&nbsp;</a>
    <a class="tt-item bl" href="{{ .gameFlow -}}6">&nbsp;</a>
    <a class="tt-item bt br" href="{{ .gameFlow -}}7">&nbsp;</a>
    <a class="tt-item bt" href="{{ .gameFlow -}}8">&nbsp;</a>
    <a class="tt-item bl bt" href="{{ .gameFlow -}}9">&nbsp;</a>
</div>

<b>Game:</b> {{.gameFlow}}
{{end}}