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

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

        <form id="compare-form">
            <div class="flex items-center gap-2 py-4">
                <div>
                    base:

                    <select
                        name="base"
                        id="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"
                        onchange="triggerCompare()"
                    >
                        <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
                        name="head"
                        id="head-select"
                        class="p-1 border max-w-32 border-gray-200 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700"
                        onchange="triggerCompare()"
                    >
                        <option value="" selected disabled hidden>
                            select a branch or tag
                        </option>
                        <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>
        </form>
    </section>
    <section class="hidden"></section>

  <script>
    var templatedBase = `{{ .Base }}`;
    var templatedHead = `{{ .Head }}`;
    var selectedBase = "";
    var selectedHead = "";

    document.addEventListener('DOMContentLoaded', function() {
        if (templatedBase && templatedHead) {
            const baseSelect = document.getElementById('base-select');
            const headSelect = document.getElementById('head-select');

            // select the option that matches templated values
            for(let i = 0; i < baseSelect.options.length; i++) {
                if(baseSelect.options[i].value === templatedBase) {
                    baseSelect.selectedIndex = i;
                    break;
                }
            }

            for(let i = 0; i < headSelect.options.length; i++) {
                if(headSelect.options[i].value === templatedHead) {
                    headSelect.selectedIndex = i;
                    break;
                }
            }

            triggerCompare();
        }
    });

    function triggerCompare() {
        // if user has selected values, use those
        selectedBase = document.getElementById('base-select').value;
        selectedHead = document.getElementById('head-select').value;

        const baseToUse = templatedBase && !selectedBase ? templatedBase : selectedBase;
        const headToUse = templatedHead && !selectedHead ? templatedHead : selectedHead;

        if (baseToUse && headToUse) {
            const url = `/{{ .RepoInfo.FullName }}/compare/diff/${baseToUse}/${headToUse}`;
            htmx.ajax('GET', url, { target: '#compare-diff' });
        }
    }
    </script>
{{ end }}

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