{{template "top" .}}
<style>
    .row {
        padding-top: calc(var(--bs-gutter-x) * .5);
        padding-bottom: calc(var(--bs-gutter-x) * .5);
    }
</style>
<div class="container" style="margin-top: 100px;">
<div class="row">
    <div class="col-md-3">
        <img src="/image?path={{ .user.Image }}&width=200" style="border-radius: 50%;max-width: 80%;" ></img>
    </div>
    <div class="col-9">
        <h1>{{ if not .user.Name }}
                {{ .user.Username }}
            {{else}}
                {{ .user.Name }}
            {{end}}</h1>
        <p>{{ if .user.AboutMe }}{{ .user.AboutMe }}{{ end }}</p>
        <div style="padding-top: 30px;">
            {{ if .user.Webpage }}<i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a> {{ end }}
            {{ if .user.Location}}<i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
        </div>
    </div>
</div>
<hr></hr>
    {{ range .list }}
    <div class="row">
        {{ range . }}
        <div class="col-md-4">
            <a href="/u/{{ $.g_userName }}/{{ .Id }}">
                <img src="/image?path={{ .MainImage }}" style="max-width: 100%">
            </a>
        </div>
        {{ end }}
    </div>
    {{ end }}
</div>
        {{template "bottom" .}}