{{ define "title" }}new comparison{{ end }}

{{ define "repoContent" }}
    <h2 class="font-bold text-sm mb-4 uppercase dark:text-white">
        Compare changes
    </h2>
    <p>Choose any two refs to compare.</p>

    <div class="flex items-center gap-2 py-4">
        <div>
            base:
            <select
                class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
            >
                <optgroup
                    label="branches ({{ len .Branches }})"
                    class="bold text-sm"
                >
                    {{ range .Branches }}
                        <option
                            value="{{ .Reference.Name }}"
                            class="py-1"
                            {{ if .IsDefault }}
                                selected
                            {{ end }}
                        >
                            {{ .Reference.Name }}
                        </option>
                    {{ end }}
                </optgroup>
                <optgroup label="tags ({{ len .Tags }})" class="bold text-sm">
                    {{ range .Tags }}
                        <option value="{{ .Reference.Name }}" class="py-1">
                            {{ .Reference.Name }}
                        </option>
                    {{ else }}
                        <option class="py-1" disabled>no tags found</option>
                    {{ end }}
                </optgroup>
            </select>
        </div>
        {{ i "arrow-left" "w-4 h-4" }}
        <div>
            compare:
            <select
                class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
            >
                <optgroup
                    label="branches ({{ len .Branches }})"
                    class="bold text-sm"
                >
                    {{ range .Branches }}
                        <option value="{{ .Reference.Name }}" class="py-1">
                            {{ .Reference.Name }}
                        </option>
                    {{ end }}
                </optgroup>
                <optgroup label="tags ({{ len .Tags }})" class="bold text-sm">
                    {{ range .Tags }}
                        <option value="{{ .Reference.Name }}" class="py-1">
                            {{ .Reference.Name }}
                        </option>
                    {{ else }}
                        <option class="py-1" disabled>no tags found</option>
                    {{ end }}
                </optgroup>
            </select>
        </div>
    </div>
{{ end }}

{{ define "repoAfter" }}
    <div id="compare-diff"></div>
{{ end }}