1{{- /*gotype: github.com/antonmedv/gitmal/pkg/templates.CommitsListParams*/ -}}
  2{{ define "head" }}
  3    <style>
  4      .commits {
  5        border: 1px solid var(--c-border);
  6        border-top: none;
  7        border-bottom-left-radius: var(--border-radius);
  8        border-bottom-right-radius: var(--border-radius);
  9        overflow-x: auto;
 10      }
 11
 12      .row {
 13        display: flex;
 14        height: 40px;
 15        border-bottom: 1px solid var(--c-border);
 16        padding-inline: 16px;
 17        gap: 16px;
 18      }
 19
 20      .row:last-child {
 21        border-bottom: none;
 22      }
 23
 24      .row:hover {
 25        background-color: var(--c-bg-alt);
 26      }
 27
 28      .cell {
 29        display: flex;
 30        gap: 8px;
 31        align-items: center;
 32      }
 33
 34      .hash a {
 35        font-family: var(--font-family-mono), monospace;
 36        color: var(--c-text-2);
 37      }
 38
 39      .commit-title {
 40        flex: 1;
 41      }
 42
 43      .commit-title a {
 44        color: var(--c-text-1);
 45        line-height: 1.5;
 46      }
 47
 48      .commit-title a:hover {
 49        color: var(--c-brand-2);
 50      }
 51
 52      .ref-badges {
 53        display: inline-flex;
 54        gap: 6px;
 55        margin-left: 8px;
 56      }
 57
 58      .badge {
 59        font-size: 12px;
 60        color: var(--c-text-2);
 61        border: 1px solid var(--c-border);
 62        padding: 2px 6px;
 63        border-radius: 999px;
 64        white-space: nowrap;
 65      }
 66
 67      .date {
 68        font-family: var(--font-family-mono), monospace;
 69        font-size: 12px;
 70        color: var(--c-text-2);
 71      }
 72
 73      .pagination {
 74        display: flex;
 75        gap: 8px;
 76        align-items: center;
 77        justify-content: center;
 78        margin-top: 12px;
 79        padding: 8px 0;
 80        color: var(--c-text-2);
 81      }
 82
 83      .pagination a,
 84      .pagination span.btn {
 85        display: inline-flex;
 86        align-items: center;
 87        gap: 6px;
 88        padding: 6px 10px;
 89        border: 1px solid var(--c-border);
 90        border-radius: 6px;
 91        background: var(--c-bg-elv);
 92        color: var(--c-text-1);
 93        text-decoration: none;
 94        font-size: 13px;
 95      }
 96
 97      .pagination a:hover {
 98        color: var(--c-brand-2);
 99        border-color: var(--c-brand-2);
100      }
101
102      .pagination .disabled {
103        opacity: 0.5;
104        pointer-events: none;
105      }
106
107      .pagination .page-indicator {
108        margin: 0 4px;
109        font-size: 13px;
110        color: var(--c-text-2);
111      }
112
113      /* Mobile optimizations */
114      @media (max-width: 767px) {
115        .row {
116          height: auto;
117          padding: 10px 12px;
118          gap: 12px;
119          flex-wrap: wrap;
120          align-items: flex-start;
121        }
122
123        .commit-title {
124          flex-basis: 100%;
125          order: 1;
126        }
127
128        .author, .date, .hash {
129          font-size: 12px;
130        }
131
132        .author {
133          color: var(--c-text-2);
134          order: 2;
135        }
136
137        .date {
138          order: 2;
139        }
140
141        .hash {
142          margin-left: auto;
143          order: 3;
144        }
145      }
146    </style>
147{{ end }}
148
149{{ define "body" }}
150    {{ template "header" . }}
151    <div class="commits">
152        {{ range .Commits }}
153            <div class="row">
154                <div class="cell hash">
155                    <a href="{{ .Href }}">{{ .ShortHash }}</a>
156                </div>
157                <div class="cell commit-title">
158                  <a href="{{ .Href }}">{{ .Subject }}</a>
159                  {{ if .RefNames }}
160                  <div class="ref-badges">
161                    {{ range .RefNames }}
162                      {{ if or (eq .Kind "Branch") (eq .Kind "Tag") }}
163                        <span class="badge">{{ if eq .Kind "Tag" }}tag: {{ end }}{{ .Name }}</span>
164                      {{ end }}
165                    {{ end }}
166                  </div>
167                  {{ end }}
168                </div>
169                <div class="cell author">{{ .Author }}</div>
170                <div class="cell date">{{ .Date | FormatDate }}</div>
171            </div>
172        {{ else}}
173            <div class="row">(no commits)</div>
174        {{ end }}
175    </div>
176    <div class="pagination">
177        {{ if .Page.FirstHref }}
178            <a class="btn" href="{{ .Page.FirstHref }}">« First</a>
179        {{ else }}
180            <span class="btn disabled">« First</span>
181        {{ end }}
182
183        {{ if .Page.PrevHref }}
184            <a class="btn" href="{{ .Page.PrevHref }}">← Newer</a>
185        {{ else }}
186            <span class="btn disabled">← Newer</span>
187        {{ end }}
188
189        <span class="page-indicator">Page {{ .Page.Page }} of {{ .Page.TotalPages }}</span>
190
191        {{ if .Page.NextHref }}
192            <a class="btn" href="{{ .Page.NextHref }}">Older →</a>
193        {{ else }}
194            <span class="btn disabled">Older →</span>
195        {{ end }}
196
197        {{ if .Page.LastHref }}
198            <a class="btn" href="{{ .Page.LastHref }}">Last »</a>
199        {{ else }}
200            <span class="btn disabled">Last »</span>
201        {{ end }}
202    </div>
203{{ end }}