{{define "title"}}
<title>Serverlist :: {{.Region}}</title>
{{end}}

{{define "content"}}
{{ $gamemodes := .Gamemodes}}
{{ $servers := .Servers}}
{{ $flags := .Flags}}
<div class="container mx-auto px-4 sm:px-8">
    <div class="py-8">
        <div>
            <h2 class="text-2xl font-semibold leading-tight">{{.Region}}</h2>
        </div>
        {{range $gamemode := $gamemodes -}}
        <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
            <div class="inline-block min-w-full shadow rounded-lg overflow-hidden">
                <table class="min-w-full leading-normal">
                    <thead>
                        <tr>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                
                            </th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                {{$gamemode.Name}}
                            </th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Map
                            </th>
                            <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                Players
                            </th>
                            
                        </tr>
                    </thead>
                    <tbody>
                      {{range $server := $servers -}}
                        {{if eq $gamemode.ID $server.GamemodeID -}}
                        <tr id="content">
                            <td class="px-5 border-b border-gray-200 bg-white" id="flag">
                                  {{range $flag := $flags -}}
                                    {{if eq $server.ServerIP $flag.ServerIP -}}
                                    <img src="https://flagcdn.com/16x12/{{$flag.Flag}}.png" srcset="https://flagcdn.com/32x24/{{$flag.Flag}}.png 2x, https://flagcdn.com/48x36/{{$flag.Flag}}.png 3x" width="16" height="12">
                                    {{- end}}
                                  {{- end}}
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" id="name">
                                <div class="flex items-center">
                                    <div class="ml-3">
                                        <a href="steam://connect/{{$server.ServerIP}}" class="text-gray-900 whitespace-no-wrap">{{$server.Name}}</a>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Map}}</p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                <p class="text-gray-900 whitespace-no-wrap">{{$server.Players}}/{{$server.MaxPlayers}}</p>
                            </td>
                        </tr>
                        {{- end}}
                      {{- end}}
                    </tbody>
                </table>
            </div>
        </div>
        {{- end}}
    </div>
</div>
</section>
{{end}}