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