{{ template "header" . }}


<script>
  document.body.addEventListener("htmx:sendError", function (event) {
    InfoMessage.innerText = "API call failed: Server is not reachable";
  });
  document.body.addEventListener("htmx:responseError", function (event) {
    InfoMessage.innerText = "API call failed: " + event.detail.xhr.responseText;
  });
</script>

<form
  class="flex items-center justify-center pb-2"
  hx-get="{{- if eq .AppPath "" -}}
    /
  {{- else -}}
    {{ .AppPath }}
  {{- end -}}"
  hx-trigger="input changed delay:500ms, change"
  hx-target="#apps"
  hx-params="*"
  hx-indicator=".htmx-indicator"
  hx-push-url="true"
  hx-include="closest form">
  <div
    class="tooltip tooltip-bottom flex items-center"
    data-tip="Include staging and preview apps">
    <label class="" for="filter-internal">Show Staging</label>
    <input
      type="checkbox"
      {{ if eq .Data.internal true }}checked{{ end }}
      id="filter-internal"
      class="checkbox ml-1 mr-2"
      name="internal"
      value="true" />
  </div>

  <div
    class="tooltip tooltip-bottom"
    data-tip="Search by app name/install path/source path">
    <input
      class="input input-bordered ml-1"
      type="search"
      name="q"
      {{ if ne .Data.query "" }}value="{{ .Data.query }}"{{ end }}
      placeholder="Search apps..." />
  </div>

  <input type="hidden" name="path" id="path" value="{{ .Data.path }}" />
</form>

<p id="InfoMessage" class="text-center"></p>

<div class="flex justify-center">
  <img
    id="spinner"
    alt="Loading..."
    class="htmx-indicator my-1"
    src="{{ static "spinner.svg" }}" />
</div>

<div id="apps" class="grid grid-cols-1 gap-1 lg:grid-cols-2">
  {{ block "search_results" . }}
    {{ range .Data.apps }}
      <div
        class="card card-compact card-bordered border-gray-500 w-full shadow-xl">
        <div class="card-body">
          <div class="flex justify-between">
            <!-- Text Label -->
            <div
              class="text-left tooltip break-words"
              data-tip="{{ .name }} at {{ .path }}">
              <span class="text-left text-xl font-bold text-primary"
                >{{ substr 0 30 .name }}
                {{ if .is_stage }}
                  (Staging)
                {{ end }}
              </span>
            </div>

            <!-- SVG Icons Wrapper -->
            <div class="flex space-x-2">
              <!-- Optional SVG 1 -->
              {{ if .is_dev }}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler icons-tabler-outline icon-tabler-code">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M7 8l-4 4l4 4" />
                  <path d="M17 8l4 4l-4 4" />
                  <path d="M14 4l-4 16" />
                  <title>Dev Mode</title>
                </svg>
              {{ end }}


              <!-- Optional SVG 2 -->
              {{ if eq .auth "none" }}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="icon icon-tabler icons-tabler-outline icon-tabler-lock-open">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M5 11m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
                  <path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
                  <path d="M8 11v-5a4 4 0 0 1 8 0" />
                  <title>No Auth</title>
                </svg>
              {{ end }}
            </div>
          </div>

          <div class="breadcrumbs text-sm">
            {{ $app := . }}
            <ul class="flex flex-wrap">
              {{ range $i, $p := .path_split }}
                <li>
                  <a
                    class="link link-primary text-left text-primary break-words"
                    title="Filter apps at {{ index $app.path_split_glob $i }}"
                    href="{{ $.AppPath }}?path={{ index $app.path_split_glob $i }}">
                    {{ if ne (printf "%c" (index $p 0)) "/" }}
                      🌐 {{ $p }}:
                    {{ else }}
                      {{ if eq $i (sub (len $app.path_split) 1) }}
                        {{ $p }}
                      {{ else }}
                        📂
                        {{ $p }}
                      {{ end }}
                    {{ end }}
                  </a>
                </li>
              {{ end }}
            </ul>
          </div>

          <div class="flex items-center justify-between w-full">
            <div class="text-xs font-mono">
              <br />
              {{ if ne .git_sha "" }}
                <div class="tooltip break-words" data-tip="{{ .git_message }}">
                  <p class="text-left text-xs font-mono">
                    Sha&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
                    {{ substr 0 12 .git_sha }}
                  </p>
                </div>
              {{ end }}
              {{ if and (ne .git_branch "") (ne .git_branch "main") }}
                <p class="text-left text-xs font-mono">
                  Branch&nbsp;&nbsp;:
                  {{ .git_branch }}
                </p>
              {{ end }}
              {{ if ne .version 0 }}
                {{ if .version_mismatch }}
                  <p
                    class="text-left text-warning"
                    title="Staged changes to be promoted">
                    Version&nbsp;:
                    {{ .version }}
                  </p>
                {{ else }}
                  <p class="text-left" title="No staged changes">
                    Version&nbsp;:
                    {{ .version }}
                  </p>
                {{ end }}
              {{ end }}
              {{ if ne .spec "" }}
                <p class="text-left break-anywhere">
                  Spec&nbsp;&nbsp;&nbsp;&nbsp;:
                  {{ .spec }}
                </p>
              {{ end }}
              {{ if .is_dev }}
                <p class="text-left break-anywhere">
                  Mode&nbsp;&nbsp;&nbsp;&nbsp;: DEV
                </p>
              {{ end }}
              <div class="tooltip break-words" data-tip="{{ .update_time }}">
                <p class="text-left text-xs font-mono">
                  Updated&nbsp;:
                  {{ .update_age }}
                </p>
              </div>
            </div>

            <div class="justify-right">
              <a href="{{ .url }}" target="_blank">
                <button class="btn btn-secondary btn-sm">Open</button>
              </a>
            </div>
          </div>

          {{ if and (ne .source "-") (ne .source "") }}
            {{ $source_path := .source }}
            {{ if ne .star_base "" }}
              {{ $source_path = (printf "%s#%s" .source .star_base) }}
            {{ end }}
            {{ if eq .source_url "" }}
              <div class="tooltip" data-tip="Source Code Path">
                <code class="block pt-4 text-left text-sm break-words">
                  {{ $source_path }}
                </code>
              </div>
            {{ else }}
              <a
                title="Source Code Path"
                class="link link-secondary"
                href="{{ .source_url }}"
                target="_blank">
                {{ $source_path }}
              </a>
            {{ end }}
          {{ end }}
        </div>
      </div>
    {{ end }}
  {{ end }}
</div>

<!-- End of "search_results" block -->

{{ template "footer" . }}