{{template "top" .}}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/lightgallery@2.3.0/css/lightgallery-bundle.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/css/justifiedGallery.css" />
<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>
<div id="lightgallery" style="width: 100%;">
    {{ range .images }}
    <a href="/image?path={{.Path}}&width=1200">
        <img class="img-responsive" src="/image?path={{.Path}}&height=250" />
    </a>
    {{ end }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.8.1/dist/js/jquery.justifiedGallery.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/lightgallery.umd.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/plugins/zoom/lg-zoom.umd.js"></script>
<script src="https://unpkg.com/lightgallery@2.3.0/plugins/thumbnail/lg-thumbnail.umd.js"></script>
<script type="text/javascript">
    $("#lightgallery").justifiedGallery({
        rowHeight: 250,
        lastRow: "justify",
        margins: 10,
        thumbnailPath: function (currentPath, width, height, image) {
            if (height < 250) {
                return currentPath.replace(/height=[0-9]{2,4}$/, "height=250");
            } else {
                return currentPath.replace(/height=[0-9]{2,4}$/, "height="+height);
            }
        }
    });
        lightGallery(document.getElementById('lightgallery'), {
            autoplayFirstVideo: false,
            pager: false,
            galleryId: "nature",
            plugins: [lgZoom, lgThumbnail],
            mobileSettings: {
                controls: false,
                showCloseIcon: false,
                download: false,
                rotate: false
            }


    });
</script>
</div>
        {{template "bottom" .}}