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

{{define "content"}}
{{ $gamemodes := .Gamemodes}}
{{ $servers := .Servers}}
{{ $flags := .Flags}}
{{range $gamemode := $gamemodes -}}
<div class="content-item-inner2 d-none d-md-block">
    <div class="content-item-inner3">
        <div class="content-item-inner4">
            <h2>{{$gamemode.Name}}</h2>
        </div>
        <div class="content-item-inner5">
            <h2>Map</h2>
        </div>
        <div class="content-item-inner6">
            <h2>Players</h2>
        </div>
    </div>
	<ul>
   {{range $server := $servers -}}
    {{if eq $gamemode.ID $server.GamemodeID -}}
     {{if ne $server.Map "Server didn't reply." -}}
		<li>
			<div class="text-truncate">
				<a href="steam://connect/{{$server.ServerIP}}">
			   {{range $flag := $flags -}}
				{{if eq $server.ServerIP $flag.ServerIP -}}
				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
				{{- end}}
			   {{- end}}
				{{$server.Name}}</a>
			</div>
			<div>
				<p>{{$server.Map}}</a>
			</div>
			<div>
				<p>{{$server.Players}}/{{$server.MaxPlayers}}</a>
			</div>
		</li>
	 {{- end}}
    {{- end}}
   {{- end}}
	</ul>
	</div>
	<!-- for mobile -->
	<div class="table-responsive">
	<div class="content-item-inner2 d-md-none">
		<div class="content-item-inner3">
			<div class="content-item-inner4">
				<h2>{{$gamemode.Name}}</h2>
			</div>
			<div class="content-item-inner5">
				<h2>Map</h2>
			</div>
			<div class="content-item-inner6">
				<h2>Players</h2>
			</div>
		</div>
    {{range $server := $servers -}}
     {{if eq $gamemode.ID $server.GamemodeID -}}
      {{if ne $server.Map "Server didn't reply." -}}
	<ul>
		<li>
			<div>
				<a href="steam://connect/{{$server.ServerIP}}">
			   {{range $flag := $flags -}}
				{{if eq $server.ServerIP $flag.ServerIP -}}
				<img src="https://flagcdn.com/w40/{{$flag.Flag}}.png" srcset="https://flagcdn.com/w80/{{$flag.Flag}}.png" 2x>
				{{- end}}
			   {{- end}}
                {{$server.Name}}</a>
            </div>
            <div>
                <a href="">{{$server.Map}}</a>
            </div>
            <div>
                <a href="">{{$server.Players}}/{{$server.MaxPlayers}}</a>
            </div>
        </li>
    </ul>
     {{- end}}
    {{- end}}
   {{- end}}
    </div>
</div>
{{- end}}
{{end}}