{% extends "base.html" %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      {% include "partials/repo_heading.html" %}
      <div class="d-flex flex-column flex-md-row align-items-md-center gap-2">
        {% set repo_tab = "files" %}
        {% set repo_tab_label = "Compare" %}
        {% include "partials/repo_tabs.html" %}
      </div>
    </div>

    {% include "partials/repo_clone_url.html" %}

    <div class="card shadow-sm">
      <div class="card-header">
        <div class="fw-semibold">Compare refs</div>
        <div class="text-muted small">Enter any ref-ish (branch, tag, commit, HEAD~n).</div>
      </div>
      <div class="card-body">
        <form class="row g-3" method="get" action="{{ compare_path }}" id="compare-form">
          <div class="col-12 col-lg-5">
            <label class="form-label" for="compare-source">Source</label>
            <input
              class="form-control font-monospace"
              type="text"
              id="compare-source"
              name="source"
              value="{{ source_ref }}"
              required
            />
          </div>
          <div class="col-12 col-lg-1 d-flex align-items-end">
            <button class="btn btn-outline-secondary w-100" type="button" id="compare-swap">
              Swap
            </button>
          </div>
          <div class="col-12 col-lg-4">
            <label class="form-label" for="compare-target">Target</label>
            <input
              class="form-control font-monospace"
              type="text"
              id="compare-target"
              name="target"
              value="{{ target_ref }}"
              required
            />
          </div>
          <div class="col-12 col-lg-2 d-flex align-items-end">
            <button class="btn btn-primary w-100" type="submit">Compare</button>
          </div>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      const $source = $("#compare-source");
      const $target = $("#compare-target");
      const $swap = $("#compare-swap");
      if (!$source.length || !$target.length || !$swap.length) {
        return;
      }
      $swap.on("click", function () {
        const sourceValue = $source.val();
        $source.val($target.val());
        $target.val(sourceValue);
        $source.trigger("focus");
      });
    })();
  </script>
{% endblock %}