<div class="opengist-embed" id="{{ .gist.Identifier }}">
    <div class="html {{.dark}}">
    {{ range $file := .files }}
        <div class="rounded-md border-1 border-gray-100 dark:border-gray-800 overflow-auto mb-4">
            <div class="border-b-1 border-gray-100 dark:border-gray-700 text-xs p-2 pl-4 bg-gray-50 dark:bg-gray-800 text-gray-400">
                <a target="_blank" class="font-sans" href="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}#file-{{ slug $file.Filename }}"><span class="font-bold text-gray-700 dark:text-gray-200">{{ $file.Filename }}</span> &middot; {{ $file.HumanSize }} &middot; {{ $file.Type }}</a>
                <span class="float-right font-sans"><a target="_blank" href="{{ $.baseHttpUrl }}">Hosted via Opengist</a> &middot; <span class="text-gray-700 dark:text-gray-200 font-bold"><a target="_blank" href="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}">view raw</a></span></span>
            </div>
            {{ if and $file.Truncated $file.MimeType.IsText }}
                <div class="text-xs px-4 bg-gray-50 py-1.5 border-b-1 border-gray-100 dark:border-gray-700">
                    {{ $.locale.Tr "gist.file-truncated" }} <a target="_blank" class="text-primary-600" href="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}">{{ $.locale.Tr "gist.watch-full-file" }}</a>
                </div>
            {{ end }}
            {{ if or (not $file.MimeType.CanBeRendered) $file.MimeType.IsPDF }}
            <div class="text-sm px-4 py-1.5 border-t-1 border-gray-200 dark:border-gray-700">
                {{ $.locale.Tr "gist.file-raw" }} <a href="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}">{{ $.locale.Tr "gist.watch-full-file" }}</a>
            </div>
            {{ end }}
            {{ if $file.MimeType.IsText }}
            {{ if eq $file.InternalType "CSVFile" }}
            <table class="csv-table">
                <thead>
                <tr>
                    {{ range $file.Header }}
                        <th>{{ . }}</th>
                    {{ end }}
                </tr>
                </thead>
                <tbody>
                {{ range $file.Rows }}
                    <tr>
                        {{ range . }}
                            <td>{{ . }}</td>
                        {{ end }}
                    </tr>
                {{ end }}
            </table>
            {{ else if isMarkdown $file.Filename }}
            <div class="chroma markdown markdown-body p-8">{{ $file.HTML | safe }}</div>
            {{ else if $file.MimeType.IsSVG }}
            <div class="p-8 flex justify-center">{{ $file.HTML | safe }}</div>
            {{ else }}
            <div class="code dark:bg-gray-900">
            {{ $fileslug := slug $file.Filename }}
            {{ if ne $file.Content "" }}
                <table class="chroma table-code w-full whitespace-pre" data-filename-slug="{{ $fileslug }}" data-filename="{{ $file.Filename }}" style="font-size: 0.8em; border-spacing: 0; border-collapse: collapse;">
                    <tbody>
                        {{ $ii := "1" }}
                        {{ $i := toInt $ii }}
                        {{ range $line := $file.Lines }}<tr><td id="file-{{ $fileslug }}-{{$i}}" class="select-none line-num px-4">{{$i}}</td><td class="line-code">{{ $line | safe }}</td></tr>{{ $i = inc $i }}{{ end }}
                    </tbody>
                </table>
            {{ end }}
            </div>
            {{ end }}
            {{ else if $file.MimeType.IsImage }}
            <div class="p-8 flex justify-center">
                <img src="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}" alt="{{ $file.Filename }}" class="max-h-screen object-contain">
            </div>
            {{ else if $file.MimeType.IsAudio }}
            <div class="p-8 flex justify-center">
                <audio controls class="w-full max-w-lg">
                    <source src="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}" type="{{ $file.MimeType.ContentType }}">
                </audio>
            </div>
            {{ else if $file.MimeType.IsVideo }}
            <div class="p-8 flex justify-center">
                <video controls class="w-full max-w-lg">
                    <source src="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}" type="{{ $file.MimeType.ContentType }}">
                </video>
            </div>
            {{ else if $file.MimeType.IsPDF }}
            <div class="pdf" data-src="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/HEAD/{{$file.Filename}}"></div>
            {{ end }}
        </div>
    {{ end }}
    </div>
</div>
