{{ define "content" }}
<div class="space-y-6" id="gist" data-own="{{ if and (eq .revision "HEAD") (not .gist.Archived) }}{{ if .userLogged }}{{ if eq .gist.User.Username .userLogged.Username }}true{{ end }}{{ end }}{{ end }}">
    {{ template "gist_header" . }}

    {{ if .gist.Archived }}
    <div class="alert og-orange" role="status">
        <svg class="size-5 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4"/></svg>
        <span>{{ .locale.Tr "gist.header.archived-help" }}</span>
    </div>
    {{ end }}

    {{ if .revision }}{{ if ne .revision "HEAD" }}
    <p class="text-muted-foreground text-xs italic">{{ .locale.Tr "gist.header.revision" }} <span class="revision-text font-mono">{{ .revision }}</span></p>
    {{ end }}{{ end }}

    <!-- Files -->
    {{ if .files }}
    <div class="space-y-4">
        {{ if .hasMoreFiles }}
        <div class="alert" role="status"><span>{{ .locale.Tr "gist.files-truncated" }}</span></div>
        {{ end }}

        {{ range $file := .files }}
        {{ $fileslug := slug $file.Filename }}
        <article class="bg-card overflow-hidden rounded-lg border" data-file="{{ $file.Filename }}">
            <header class="bg-muted/40 flex items-center gap-2 border-b px-4 py-2">
                <span class="flex min-w-0 flex-auto items-center gap-2 text-sm" id="file-{{ $fileslug }}">
                    <svg class="text-muted-foreground size-4 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
                    <a href="{{ $.baseHttpUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}#file-{{ $fileslug }}" class="hover:text-primary truncate font-medium">{{ $file.Filename }}</a>
                    <span class="text-muted-foreground hidden whitespace-nowrap sm:inline">· {{ $file.HumanSize }} · {{ $file.Type }}</span>
                </span>
                <span class="inline-flex shrink-0">
                    <a hx-boost="false" href="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" class="btn-sm-outline rounded-r-none">{{ $.locale.Tr "gist.raw" }}</a>
                    {{ if $file.MimeType.IsText }}
                    <textarea class="hidden" aria-hidden="true" tabindex="-1">{{ $file.Content }}</textarea>
                    <button type="button" class="btn-sm-outline copy-btn -ml-px rounded-none" aria-label="Copy"
                            _="on click
                                 call navigator.clipboard.writeText(the previous <textarea/>'s value)
                                 set @data-copied to 'true'
                                 wait 1.2s
                                 remove @data-copied from me">
                        <svg class="icon-copy size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                        <svg class="icon-check size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                    </button>
                    {{ end }}
                    <a hx-boost="false" href="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/download/{{ $.commit }}/{{ $file.Filename }}" class="btn-sm-outline -ml-px rounded-l-none">
                        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                    </a>
                </span>
            </header>

            {{ if and $file.Truncated $file.MimeType.IsText }}
            <p class="px-4 py-2.5 text-sm">{{ $.locale.Tr "gist.file-truncated" }} <a hx-boost="false" href="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" class="text-primary hover:underline">{{ $.locale.Tr "gist.watch-full-file" }}</a></p>
            {{ end }}
            {{ if not $file.MimeType.CanBeRendered }}
            <p class="px-4 py-2.5 text-sm">{{ $.locale.Tr "gist.file-raw" }} <a hx-boost="false" href="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" class="text-primary hover:underline">{{ $.locale.Tr "gist.watch-full-file" }}</a></p>
            {{ end }}
            {{ if and (not $file.MimeType.IsText) ($file.MimeType.IsCSV) }}
            <p class="px-4 py-2.5 text-sm">{{ $.locale.Tr "gist.file-not-valid" }}</p>
            {{ end }}

            <div class="overflow-auto">
                {{ 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 }}</tbody>
                        </table>
                    {{ else if isMarkdown $file.Filename }}
                        <div class="markdown markdown-body p-6">{{ $file.HTML | safe }}</div>
                    {{ else if isMermaid $file.Filename }}
                        <div class="markdown markdown-body p-6">{{ $file.HTML | safe }}</div>
                    {{ else if $file.MimeType.IsSVG }}
                        <div class="flex justify-center p-6">{{ $file.HTML | safe }}</div>
                    {{ else if isJupyter $file.Filename }}
                        <div class="jupyter notebook p-6">
                            <div class="text-muted-foreground flex items-center justify-center p-8" role="status" aria-label="Loading notebook">
                                <svg class="size-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                </svg>
                            </div>
                            <pre hidden>{{ $file.Content }}</pre>
                        </div>
                    {{ else if ne $file.Content "" }}
                        <div class="code">
                            <table class="chroma table-code w-full {{ if $.currentStyle }}{{ if $.currentStyle.SoftWrap }}whitespace-pre-wrap{{ else }}whitespace-pre{{ end }}{{ else }}whitespace-pre{{ end }}" data-filename-slug="{{ $fileslug }}" data-filename="{{ $file.Filename }}" style="border-spacing: 0; border-collapse: collapse;">
                                <tbody>
                                {{ $i := 1 }}
                                {{ range $line := $file.Lines }}<tr><td id="file-{{ $fileslug }}-{{ $i }}" class="line-num px-4">{{ $i }}</td><td class="line-code break-all pr-4">{{ $line | safe }}</td></tr>{{ $i = inc $i }}{{ end }}
                                </tbody>
                            </table>
                        </div>
                    {{ end }}
                {{ else if $file.MimeType.IsImage }}
                    <div class="flex justify-center p-6"><img src="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" alt="{{ $file.Filename }}" class="max-h-screen object-contain" /></div>
                {{ else if $file.MimeType.IsAudio }}
                    <div class="flex justify-center p-6"><audio controls class="w-full max-w-lg"><source src="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" type="{{ $file.MimeType.ContentType }}"></audio></div>
                {{ else if $file.MimeType.IsVideo }}
                    <div class="flex justify-center p-6"><video controls class="w-full max-w-lg"><source src="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}" type="{{ $file.MimeType.ContentType }}"></video></div>
                {{ else if $file.MimeType.IsPDF }}
                    <div class="pdf relative min-h-[700px]" data-src="{{ $.c.ExternalUrl }}/{{ $.gist.User.Username }}/{{ $.gist.Identifier }}/raw/{{ $.commit }}/{{ $file.Filename }}">
                        <div class="pdf-loading text-muted-foreground absolute inset-0 flex items-center justify-center" role="status" aria-label="Loading PDF">
                            <svg class="size-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4z"></path>
                            </svg>
                        </div>
                    </div>
                {{ end }}
            </div>
        </article>
        {{ end }}
    </div>
    {{ else }}
    <div class="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
        <svg class="size-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
        <h3 class="text-foreground mt-3 text-sm font-medium">{{ .locale.Tr "gist.no-content" }}</h3>
    </div>
    {{ end }}
</div>
{{ end }}