{{template "top" .}}

<style type="text/css">
    @media all and (min-width: 900px){
        .row {
            padding-top: calc(var(--bs-gutter-x) * .2);
            padding-bottom: calc(var(--bs-gutter-x) * .2);
        }
        .col-md-2 {
            padding-right: calc(var(--bs-gutter-x) * .2);
            padding-left: calc(var(--bs-gutter-x) * .2);
        }
    }
    @media all and (max-width: 900px){
        .row {
            padding-top: calc(var(--bs-gutter-x) * .1);
            padding-bottom: calc(var(--bs-gutter-x) * .1);
        }
        .col-md-2 {
            padding-right: calc(var(--bs-gutter-x) * .1);
            padding-left: calc(var(--bs-gutter-x) * .1);
        }
    }
    .containerImage {
        position: relative;
        text-align: center;
        color: white;
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="container" style="margin-top: 100px;">
    <div class="col-12">
        <h1>Select Gallery</h1>
        {{ range .list }}
        <div class="row">
            {{ range . }}
            <div class="col-md-2">
                <div class="containerImage">
                    <a href="/gallery/edit/{{ .Id }}">
                        <img src="/image?path={{ .MainImage }}&width=250" style="width: 100%"></img>
                        <div class="centered" style="background-color: rgba(0,0,0,0.8);color: #fff;">{{ .Name }}</div>
                    </a>

                </div>

            </div>
            {{ end }}
        </div>
        {{ end }}
    </div>
</div>

        {{template "bottom" .}}