{{ define "main" }}
    {{ partial "section1.html" (dict "Image" "/img/app0.png" "Content" .Content) }}
    <div id="appslist" class="grid center">
    {{ $site := .Site }}
    {{ range .Site.Data.list }}
        {{ $index := . }}
        {{ $data := index $site.Data $site.Language.Lang }}
        {{ with index $data.apps $index }}
        <div class="padding-container">
            <div class="block-preview" style="background-image: url(/img/preview/{{ $index }}.png);">
                <div class="label">
                    <h2 class="flex">&nbsp;<img src="/icons/apps/{{ $index }}.png" class="icon-larger-text" alt=""/> {{ .name }}</h2>
                    <p class="show-on-hover">{{ .description }}</p>
                    <p class="show-on-hover">{{ i18n "status" }} {{ .status }}</p>
                    <p class="flex show-on-hover">{{ i18n "worksOn" }}&nbsp;
                        {{ range .platforms }}<img src="/icons/platform/{{ . }}.svg" alt="{{ . }}" title="{{ . }}" class="icon-larger-text" />{{ end }}
                    </p>
                    <p class="flex show-on-hover">{{ i18n "translated" }}&nbsp;
                        {{ range .translated }}<img src="/icons/flag/{{ . }}.svg" alt="{{ i18n . }}" title="{{ i18n . }}" class="icon-larger-text" />{{ end }}
                    </p>
                    <div class="show-on-hover">
                        <a href="{{ $index }}" role="button" class="primary"><img src="/icons/lookup.svg" class="icon-as-text" alt=""/>{{ i18n "learnMore" }}</a>&nbsp;
                    </div>
                </div>
            </div>
        </div>
        {{ end }}
    {{ end }}
    </div>
{{ end }}