{{ template "header.html" . }}
<div class="row">
    <div class="large-12 columns">
        <h1>{{ .title }}</h1>
        <div id="images" class="row small-up-2 medium-up-3 large-up-4">
            {{ range .its }}
            <div class="column column-block">
                {{ if .IsVideo }}
                <a class="thumbnail" data-toggle="{{ .ID }}-modal">
                    <strong>Video</strong>
                </a>
                {{ else }}
                <a class="thumbnail" data-toggle="{{ .ID }}-modal">
                    <img alt="" src="{{ .Path }}" />
                </a>
                {{ end }}
            </div>
            <div id="{{ .ID }}-modal" class="full reveal" data-reveal>
                <div class="row align-top">
                    <div class="small-10 columns">
                        {{ if .IsVideo }}
                        <video controls>
                            <source src="{{ .Path }}" />
                        </video>
                        {{ else }}
                        <img alt="" src="{{ .Path }}" />
                        {{ end }}
                    </div>
                    <div class="small-2 columns">
                        <a class="button success" href="javascript:approveMedia({{ .ID }})">Approve</a><br />
                        <a class="button alert" href="javascript:rejectMedia({{ .ID }})">Reject</a>
                    </div>
                </div>
                <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {{ end }}
        </div>
    </div>
</div>
<script type="text/javascript">
    var site = "{{ .site }}";
    var obj = document.getElementById("images");
</script>
{{ template "footer.html" . }}