1{{- /*gotype: github.com/antonmedv/gitmal/pkg/templates.ListParams*/ -}}
  2{{ define "head" }}
  3    {{ if .Readme }}
  4      {{ if not .InlineStyles }}
  5        <link rel="stylesheet" href="{{ .RootHref }}markdown.css">
  6        <link rel="stylesheet" href="{{ .RootHref }}chroma.css">
  7      {{ end }}
  8    {{ end }}
  9    <style>
 10      .files {
 11        border: 1px solid var(--c-border);
 12        border-top: none;
 13        width: 100%;
 14        border-bottom-left-radius: var(--border-radius);
 15        border-bottom-right-radius: var(--border-radius);
 16        overflow-x: auto;
 17      }
 18
 19      .files .dir {
 20        color: var(--c-dir);
 21      }
 22
 23      .files a {
 24        color: var(--c-text-1);
 25      }
 26
 27      .files a:hover {
 28        color: var(--c-brand-2);
 29      }
 30
 31      .row {
 32        display: flex;
 33        height: 40px;
 34        border-bottom: 1px solid var(--c-border);
 35        padding-inline: 16px;
 36        gap: 16px;
 37      }
 38
 39      .row:last-child {
 40        border-bottom: none;
 41      }
 42
 43      .row:hover {
 44        background-color: var(--c-bg-alt);
 45      }
 46
 47      .cell {
 48        flex: 1;
 49        display: flex;
 50        gap: 8px;
 51        align-items: center;
 52        white-space: nowrap;
 53      }
 54
 55      .cell:not(:first-child) {
 56        justify-content: flex-end;
 57        max-width: 100px;
 58      }
 59
 60      @media (max-width: 767px) {
 61        .file-mode {
 62          display: none;
 63        }
 64      }
 65
 66      {{ if .Readme }}
 67      .markdown-container {
 68        padding-inline: 16px;
 69        border: 1px solid var(--c-divider);
 70        border-radius: 8px;
 71        overflow-x: auto;
 72        margin-top: 16px;
 73      }
 74
 75      .markdown-body {
 76        width: 100%;
 77        min-width: 200px;
 78        max-width: 980px;
 79        margin: 0 auto;
 80        padding: 32px;
 81        word-wrap: break-word;
 82        font-size: 16px;
 83        line-height: 1.5;
 84      }
 85
 86      @media (max-width: 767px) {
 87        .markdown-body {
 88          padding: 16px;
 89        }
 90      }
 91
 92      {{ if $.InlineStyles }}
 93        {{$.CSSMarkdown}}
 94        {{if $.CSSChroma}}{{$.CSSChroma}}{{end}}
 95      {{ end }}
 96      {{ end }}
 97    </style>
 98{{ end }}
 99
100{{ define "body" }}
101    {{ template "header" . }}
102
103    <div class="files">
104        {{ if .ParentHref }}
105            <div class="row">
106                <div class="cell">
107                    <svg aria-hidden="true" focusable="false" width="16" height="16" class="dir">
108                        <use xlink:href="#dir"></use>
109                    </svg>
110                    <a href="{{ .ParentHref }}">..</a>
111                </div>
112            </div>
113        {{ end }}
114
115        {{ if or .Dirs .Files }}
116            {{ range .Dirs }}
117                <div class="row">
118                    <div class="cell">
119                        <svg aria-hidden="true" focusable="false" width="16" height="16" class="dir">
120                            <use xlink:href="#dir"></use>
121                        </svg>
122                        <a href="{{ .Href }}">{{ .Name }}</a>
123                    </div>
124                </div>
125            {{ end }}
126
127            {{ range .Files }}
128                <div class="row">
129                    <div class="cell">
130                        <svg aria-hidden="true" focusable="false" width="16" height="16">
131                            <use xlink:href="#file"></use>
132                        </svg>
133                        <a href="{{ .Href }}">{{ .Name }}</a>
134                    </div>
135                    <div class="cell file-mode">{{ .Mode }}</div>
136                    <div class="cell file-size">{{ .Size }}</div>
137                </div>
138            {{ end }}
139        {{ else }}
140            <div class="row">
141                <div class="cell">(empty)</div>
142            </div>
143        {{ end }}
144    </div>
145
146    {{ if .Readme }}
147        <div class="markdown-container">
148            <div class="markdown-body">
149                {{ .Readme }}
150            </div>
151        </div>
152    {{ end }}
153{{ end }}
154