{{template "layout.html" .}}

{{define "title"}}Geography{{end}}

{{define "content"}}
<h3>Geography</h3>

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        {{ $active := " active"}}
        {{- range $t, $v := .Regions }}
        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-{{kebab $t}}" type="button" role="tab">{{$t}} ({{
            len $v }})</button>
        {{ $active = ""}}{{- end}}
        {{- range $t, $v := .Landmasses }}
        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-{{kebab $t}}" type="button" role="tab">{{$t}} ({{ len
            $v }})</button>
        {{ $active = ""}}{{- end}}
        {{- range $t, $v := .MountainPeaks }}
        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-{{kebab $t}}" type="button" role="tab">{{$t}} ({{ len
            $v }})</button>
        {{ $active = ""}}{{- end}}
        {{- range $t, $v := .Rivers }}
        <button class="nav-link{{$active}}" data-bs-toggle="tab" data-bs-target="#nav-{{kebab $t}}" type="button" role="tab">{{$t}} ({{ len
            $v }})</button>
        {{ $active = ""}}{{- end}}
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    {{ $active := " active"}}
    {{- range $t, $v := .Regions }}
    <div class="tab-pane{{$active}}" id="nav-{{kebab $t}}" role="tabpanel" aria-labelledby="nav-home-tab">
        <table class="table table-hover table-sm table-borderless">
            <tr>
                <th width="100%">Name</th>
                <th>Type</th>
            </tr>
            {{- range $v }}{{- if not (eq .Name "") }}
            <tr>
                <td>{{ region .Id }}</td>
                <td>{{ .Type }}</td>
            </tr>
            {{- end}}{{- end}}
        </table>
    </div>
    {{ $active = ""}}{{- end}}
    {{- range $t, $v := .Landmasses }}
    <div class="tab-pane{{$active}}" id="nav-{{kebab $t}}" role="tabpanel" aria-labelledby="nav-home-tab">
        <table class="table table-hover table-sm table-borderless">
            <tr>
                <th width="100%">Name</th>
                <th>Size</th>
            </tr>
            {{- range $v }}{{- if not (eq .Name "") }}
            <tr>
                <td>{{ landmass .Id }}</td>
                <td></td>
            </tr>
            {{- end}}{{- end}}
        </table>
    </div>
    {{ $active = ""}}{{- end}}
    {{- range $t, $v := .MountainPeaks }}
    <div class="tab-pane{{$active}}" id="nav-{{kebab $t}}" role="tabpanel" aria-labelledby="nav-home-tab">
        <table class="table table-hover table-sm table-borderless object-table">
            <tr>
                <th width="100%">Name</th>
                <th>Type</th>
            </tr>
            {{- range $v }}{{- if not (eq .Name "") }}
            <tr>
                <td>{{ mountain .Id }}</td>
                <td>{{ if .IsVolcano }}volcano{{else}}mountain{{end}}</td>
            </tr>
            {{- end}}{{- end}}
        </table>
    </div>
    {{ $active = ""}}{{- end}}
    {{- range $t, $v := .Rivers }}
    <div class="tab-pane{{$active}}" id="nav-{{kebab $t}}" role="tabpanel" aria-labelledby="nav-home-tab">
        <table class="table table-hover table-sm table-borderless object-table">
            <tr>
                <th width="100%">Name</th>
                <th>Size</th>
            </tr>
            {{- range $i, $r := $v }}{{- if not (eq .Name "") }}
            <tr>
                <td>{{ river $i }}</td>
                <td></td>
            </tr>
            {{- end}}{{- end}}
        </table>
    </div>
    {{ $active = ""}}{{- end}}
</div>

{{- end }}