{{/* Copyright (c) ClaceIO, LLC */}}
{{/* SPDX-License-Identifier: Apache-2.0 */}}
{{/* App detail page (/apps/detail?path=): overview, promote/reload/delete
     actions, requested permissions, containers, params and stage/prod
     version tables. HTMX partial: block detail_content */}}
{{/* version_table renders one environment's version list.
     Context: dict with Versions, Error, Env (prod/stage), Path, AppPath */}}
{{ define "version_table" }}
  {{ if .Error }}
    <p class="text-sm text-base-content/70 px-4 py-4">{{ .Error }}</p>
  {{ else if not .Versions }}
    <p class="text-sm text-base-content/70 px-4 py-4">No versions yet</p>
  {{ else }}
    {{ $ctx := . }}
    <div class="overflow-x-auto">
      <table class="table table-sm">
        <thead>
          <tr>
            <th scope="col">Version</th>
            <th scope="col">Git</th>
            <th scope="col" class="hidden sm:table-cell">By</th>
            <th scope="col" class="hidden md:table-cell">Created</th>
            <th scope="col" class="text-right">Actions</th>
          </tr>
        </thead>
        <tbody>
          {{ range .Versions }}
            <tr class="group hover:bg-base-200/60 {{ if .active }}bg-success/5{{ end }}">
              <td class="font-mono text-xs tabular-nums whitespace-nowrap">
                v{{ .version }}
                {{ if .active }}
                  <span class="badge badge-success badge-xs badge-soft"
                    >active</span
                  >
                {{ end }}
              </td>
              <td
                class="font-mono text-xs whitespace-nowrap"
                title="{{ .git_message }}">
                {{ if .git_sha }}
                  {{ .git_sha }}{{ if .git_branch }}
                    <span class="badge badge-ghost badge-xs"
                      >{{ .git_branch }}</span
                    >
                  {{ end }}
                {{ else }}
                  <span class="text-base-content/70">-</span>
                {{ end }}
              </td>
              <td class="text-xs text-base-content/70 hidden sm:table-cell">
                {{ .user }}
              </td>
              <td
                class="text-xs text-base-content/70 whitespace-nowrap hidden md:table-cell">
                {{ if .create_time }}
                  {{ template "time_ago" .create_time }}
                {{ end }}
              </td>
              <td class="text-right whitespace-nowrap">
                <div
                  class="inline-flex items-center gap-0.5">
                  {{ if not .active }}
                    <button
                      class="btn btn-xs btn-ghost text-primary tooltip tooltip-left"
                      aria-label="Switch {{ $ctx.Env }} to v{{ .version }}"
                      {{ if index $ctx.Perms "app:update" }}
                        data-tip="Make v{{ .version }} the active {{ $ctx.Env }} version"
                        hx-post="{{ $ctx.AppPath }}/apps/detail/switch"
                        hx-vals='{"path": "{{ $ctx.Path }}", "env": "{{ $ctx.Env }}", "version": "{{ .version }}"}'
                        hx-confirm="Switch {{ $ctx.Env }} of {{ $ctx.Path }} to v{{ .version }}?"
                        hx-target="#detail-content"
                        hx-swap="innerHTML transition:true"
                        hx-disabled-elt="this"
                        hx-indicator="#page-progress"
                      {{ else }}
                        disabled data-tip="requires app:update"
                      {{ end }}>
                      switch
                    </button>
                  {{ end }}
                  <a
                    href="{{ $ctx.AppPath }}/apps/files?path={{ $ctx.Path }}&version={{ .version }}&env={{ $ctx.Env }}"
                    class="btn btn-xs btn-ghost tooltip tooltip-left"
                    data-tip="View the files in this version"
                    aria-label="Files of {{ $ctx.Env }} v{{ .version }}">
                    files <span aria-hidden="true">→</span>
                  </a>
                </div>
              </td>
            </tr>
          {{ end }}
        </tbody>
      </table>
    </div>
  {{ end }}
{{ end }}
<!DOCTYPE html>
<html lang="en">
  {{ template "head" . }}

  <body class="min-h-screen bg-base-200">
    <div class="drawer lg:drawer-open">
      {{ template "drawer_toggle" }}

      <div class="drawer-content">
        <main class="p-4 lg:p-6 max-w-6xl">
          <div id="detail-content" class="space-y-4">
          {{ block "detail_content" . }}
          <!-- Header -->
          <div class="page-header flex items-center gap-2 flex-wrap mb-2 md:mb-6">
            {{ template "hamburger" }}
            <div>
              {{ template "page_title" "OpenRun Apps" }}
              <div class="flex items-center gap-2"><nav aria-label="Breadcrumb" class="breadcrumbs text-xs text-base-content/70 p-0"><ul class="flex-wrap whitespace-normal"><li><a href="{{ .AppPath }}/apps">Apps</a></li><li class="font-mono break-all">{{ .Data.Path }}</li></ul></nav>{{ template "help_link" .Data.HelpUrl }}</div>
              <h2 class="text-xl font-semibold font-mono break-all">{{ .Data.Path }}</h2>
              <p class="page-desc text-sm text-base-content/70">
                {{ if .Data.App }}
                  {{ .Data.App.name }}
                  {{ if .Data.App.is_dev }}
                    <span class="badge badge-warning badge-xs badge-soft"
                      >dev</span
                    >
                  {{ end }}
                  {{ if .Data.App.staged_changes }}
                    <span
                      class="badge badge-warning badge-xs badge-soft tooltip tooltip-bottom"
                      data-tip="staging has changes not promoted to prod"
                      >pending</span
                    >
                  {{ end }}
                {{ end }}
              </p>
            </div>
            <div class="page-actions ml-auto flex items-center gap-2">
              {{ if .Data.App }}
                <a
                  class="btn btn-sm btn-outline transition-transform duration-150 active:scale-95 tooltip tooltip-bottom {{ if not (index .Data.Perms "app:update") }}
                    btn-disabled
                  {{ end }}"
                  {{ if index .Data.Perms "app:update" }}
                    href="{{ .AppPath }}/apps/update?path={{ .Data.Path }}"
                    data-tip="Edit auth and parameters"
                  {{ else }}
                    aria-disabled="true" tabindex="-1" data-tip="requires app:update"
                  {{ end }}>
                  Edit app
                </a>
                <details class="dropdown dropdown-end">
                  <summary
                    class="btn btn-sm btn-outline transition-transform duration-150 active:scale-95"
                    aria-label="App actions">
                    Actions
                    <svg aria-hidden="true" focusable="false" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
                  </summary>
                  <ul
                    class="dropdown-content menu bg-base-100 border border-base-300 rounded-box shadow-lg z-10 w-60 p-1"
                    onclick="const d=this.closest('details'); if(d && !event.target.closest('[disabled]')) d.removeAttribute('open')">
                    <li {{ if not (index .Data.Perms "app:reload") }}class="menu-disabled"{{ end }}>
                      <button
                        class="tooltip tooltip-left"
                        {{ if index .Data.Perms "app:reload" }}
                          data-tip="Reload staging from {{ if .Data.App.git_branch }}git{{ else }}source{{ end }}"
                          hx-post="{{ .AppPath }}/apps/detail/reload"
                          hx-vals='{"path": "{{ .Data.Path }}"}'
                          hx-confirm="Reload {{ .Data.Path }} staging from its source?"
                          hx-target="#detail-content"
                          hx-swap="innerHTML transition:true"
                          hx-indicator="#page-progress"
                        {{ else }}
                          disabled data-tip="requires app:reload"
                        {{ end }}>
                        <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg>
                        Reload
                      </button>
                    </li>
                    {{ if not .Data.App.is_dev }}
                      <li {{ if not (index .Data.Perms "app:promote") }}class="menu-disabled"{{ end }}>
                        <button
                          class="tooltip tooltip-left"
                          {{ if index .Data.Perms "app:promote" }}
                            data-tip="Push the staging version to prod"
                            hx-post="{{ .AppPath }}/apps/detail/promote"
                            hx-vals='{"path": "{{ .Data.Path }}"}'
                            hx-confirm="Promote staged changes of {{ .Data.Path }} to prod?"
                            hx-target="#detail-content"
                            hx-swap="innerHTML transition:true"
                            hx-indicator="#page-progress"
                          {{ else }}
                            disabled data-tip="requires app:promote"
                          {{ end }}>
                          <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
                          Promote
                        </button>
                      </li>
                    {{ end }}
                    {{ if and (not .Data.App.is_dev) (index .Data.Perms "feature:builder") }}
                      <li {{ if not (index .Data.Perms "builder:create") }}class="menu-disabled"{{ end }}>
                        <a
                          href="{{ .AppPath }}/builder/create?edit={{ .Data.Path }}"
                          class="tooltip tooltip-left"
                          {{ if not (index .Data.Perms "builder:create") }}
                            data-tip="requires builder:create" aria-disabled="true" tabindex="-1"
                          {{ else if .Data.App.builder_published }}
                            data-tip="Modify this app's source with the AI agent"
                          {{ else }}
                            data-tip="Edit a copy with the AI agent; publish creates a new app"
                          {{ end }}>
                          <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg>
                          {{ if .Data.App.builder_published }}Update with Agent{{ else }}Rebuild with Agent{{ end }}
                        </a>
                      </li>
                    {{ end }}
                    <li {{ if not (index .Data.Perms "app:update") }}class="menu-disabled"{{ end }}>
                      <a
                        href="{{ .AppPath }}/apps/update?path={{ .Data.Path }}"
                        class="tooltip tooltip-left"
                        {{ if not (index .Data.Perms "app:update") }}
                          data-tip="requires app:update" aria-disabled="true" tabindex="-1"
                        {{ else }}
                          data-tip="Edit the app settings and params"
                        {{ end }}>
                        <svg aria-hidden="true" focusable="false" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /></svg>
                        Edit
                      </a>
                    </li>
                    <li {{ if not (index .Data.Perms "app:delete") }}class="menu-disabled"{{ end }}>
                      <button
                        class="text-error tooltip tooltip-left"
                        {{ if index .Data.Perms "app:delete" }}
                          data-tip="Delete app"
                          hx-post="{{ .AppPath }}/apps/detail/delete"
                          hx-vals='{"path": "{{ .Data.Path }}"}'
                          hx-confirm="Delete {{ .Data.Path }}? This deletes the prod, staging and preview apps."
                          hx-target="#detail-content"
                          hx-swap="innerHTML transition:true"
                          hx-indicator="#page-progress"
                        {{ else }}
                          disabled data-tip="requires app:delete"
                        {{ end }}>
                        <svg aria-hidden="true" focusable="false" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /></svg>
                        Delete
                      </button>
                    </li>
                  </ul>
                </details>
              {{ end }}
            </div>
          </div>

          {{ template "page_progress" }}

          {{ template "error_alert" .Data.Error }}
          {{ template "flash_alerts" .Data }}

          {{ if and .Data.AskPromote .Data.App (not .Data.App.is_dev) }}
            <!-- Staging was updated, ask about promotion (dev apps serve
                 directly from source, nothing to promote) -->
            {{ $msg := "Changes were applied to the staging app." }}
            {{ if eq .Data.AskPromote "reload" }}
              {{ $msg = "Staging was reloaded from source." }}
            {{ else if eq .Data.AskPromote "approve" }}
              {{ $msg = "Permissions were approved on the staging app." }}
            {{ end }}
            {{ template "promote_prompt" (dict
                "Message" (print $msg " Promote to make them live on prod?")
                "Path" .Data.Path
                "PostUrl" (print .AppPath "/apps/detail/promote")
                "Target" "#detail-content"
                "StageUrl" .Data.App.stage_url
                "KeepHref" (print .AppPath "/apps/detail?path=" .Data.Path)
                "Perms" .Data.Perms)
            }}
          {{ end }}

          {{ if .Data.App }}
            <!-- Overview -->
            <div class="card bg-base-100 border border-base-300">
              <div class="card-body p-5 gap-1">
                <h2 class="text-sm font-medium text-base-content/70 mb-2">
                  Overview
                </h2>
                <div
                  class="grid grid-cols-[max-content_minmax(0,1fr)] gap-x-6 gap-y-1.5 text-sm">
                  <span class="text-xs text-base-content/70 pt-0.5">Source</span>
                  <span class="font-mono text-xs break-all pt-1"
                    >{{ .Data.App.source_url }}{{ if .Data.App.browse_url }}<a
                        href="{{ .Data.App.browse_url }}"
                        target="_blank"
                        rel="noopener"
                        class="tooltip tooltip-top"
                        data-tip="View source code in a new tab"
                        aria-label="View source of {{ .Data.Path }} in a new tab"
                        class="inline-block text-primary ml-0.5"
                        ><span aria-hidden="true">↗</span></a
                      >{{ end }}{{ if .Data.App.git_branch }}
                      <span class="badge badge-ghost badge-xs"
                        >{{ .Data.App.git_branch }}</span
                      >
                    {{ end }}</span
                  >

                  {{ if .Data.App.git_commit }}
                    <span class="text-xs text-base-content/70 pt-0.5"
                      >Commit</span
                    >
                    <span class="font-mono text-xs break-all pt-1"
                      >{{ .Data.App.git_commit }}
                      {{ if .Data.App.git_message }}
                        <span class="text-base-content/70 font-sans"
                          >-
                          {{ if gt (len .Data.App.git_message) 500 }}
                            {{ trunc 500 .Data.App.git_message }}…
                          {{ else }}
                            {{ .Data.App.git_message }}
                          {{ end }}</span
                        >
                      {{ end }}</span
                    >
                  {{ end }}

                  <span class="text-xs text-base-content/70 pt-0.5"
                    >Managed by</span
                  >
                  <span class="pt-1">
                    {{ if .Data.Sync }}
                      <span class="font-mono text-xs break-all">{{ .Data.Sync.repo }}</span>
                      {{ if .Data.Sync.branch }}
                        <span class="badge badge-ghost badge-xs"
                          >{{ .Data.Sync.branch }}</span
                        >
                      {{ end }}
                    {{ else }}
                      <span class="badge badge-outline badge-xs">imperative</span>
                    {{ end }}
                  </span>

                  <span class="text-xs text-base-content/70 pt-0.5">Spec</span>
                  <span class="font-mono text-xs break-all pt-1"
                    >{{ if .Data.App.spec }}
                      {{ .Data.App.spec }}
                    {{ else }}
                      -
                    {{ end }}</span
                  >

                  <span class="text-xs text-base-content/70 pt-0.5">Auth</span>
                  <span class="pt-1"
                    ><span class="badge badge-ghost badge-xs"
                      >{{ if .Data.App.auth }}
                        {{ .Data.App.auth }}
                      {{ else }}
                        default
                      {{ end }}</span
                    ></span
                  >

                  <span class="text-xs text-base-content/70 pt-0.5"
                    >Version</span
                  >
                  <span class="font-mono text-xs pt-1"
                    >v{{ .Data.App.version }}</span
                  >

                  {{ if .Data.App.update_time }}
                    <span class="text-xs text-base-content/70 pt-0.5"
                      >Updated</span
                    >
                    <span class="text-xs pt-1"
                      >{{ template "time_ago" .Data.App.update_time }}</span
                    >
                  {{ end }}

                  {{ if .Data.Containers }}
                    <span class="text-xs text-base-content/70 pt-0.5"
                      >Containers</span
                    >
                    <span class="pt-1 flex items-center gap-3 flex-wrap">
                      {{ range .Data.Containers }}
                        <a
                          href="{{ $.AppPath }}/containers/detail?id={{ .id }}"
                          class="link link-hover inline-flex items-center gap-1.5 text-xs tooltip tooltip-right"
                          data-tip="{{ .name }} - stats and logs">
                          {{ if eq .state "running" }}
                            <span class="status status-success"></span>
                          {{ else }}
                            <span class="status status-error"></span>
                          {{ end }}
                          <span class="font-mono"
                            >{{ .env }} · {{ .state }}</span
                          >
                          <span class="text-base-content/70">→</span>
                        </a>
                      {{ end }}
                    </span>
                  {{ end }}

                  <span class="text-xs text-base-content/70 pt-0.5">Id</span>
                  <span class="font-mono text-xs text-base-content/70 break-all pt-1"
                    >{{ .Data.App.id }}</span
                  >
                </div>
              </div>
            </div>

            <!-- Parameters -->
            {{ if .Data.ParamsText }}
              <div class="card bg-base-100 border border-base-300">
                <div class="card-body p-5 gap-2">
                  <h2 class="text-sm font-medium text-base-content/70">
                    Parameters
                  </h2>
                  <pre
                    class="font-mono text-xs bg-base-200 rounded px-3 py-2 whitespace-pre-wrap">{{ .Data.ParamsText }}</pre>
                </div>
              </div>
            {{ end }}

            <!-- Plugin permissions requested by the app -->
            {{ if .Data.AuditError }}
              <div class="card bg-base-100 border border-base-300">
                <div class="card-body p-5 gap-2">
                  <h2 class="text-sm font-medium text-base-content/70">
                    Requested permissions
                  </h2>
                  <p class="text-sm text-base-content/70 break-all">
                    Audit failed: {{ .Data.AuditError }}
                  </p>
                </div>
              </div>
            {{ else if .Data.Audit }}
              {{ if .Data.NeedsApproval }}
                <div
                  role="alert"
                  class="alert alert-warning alert-soft py-2 text-sm flex-wrap">
                  <span aria-hidden="true">⚠</span>
                  <span
                    >The app requests permissions which are not approved yet -
                    it cannot serve requests until they are approved</span
                  >
                  <button
                    class="btn btn-xs btn-warning ml-auto transition-transform duration-150 active:scale-95"
                    {{ if or (index .Data.Perms "app:approve") (index .Data.Perms "admin") }}
                      hx-post="{{ .AppPath }}/apps/detail/approve"
                      hx-vals='{"path": "{{ .Data.Path }}"}'
                      hx-confirm="Approve the requested plugin permissions for {{ .Data.Path }}?"
                      hx-target="#detail-content"
                      hx-swap="innerHTML transition:true"
                      hx-disabled-elt="this"
                      hx-indicator="#page-progress"
                    {{ else }}
                      disabled data-tip="requires the app:approve permission"
                    {{ end }}>
                    Approve permissions
                  </button>
                </div>
              {{ end }}
              {{ template "perms_card" (dict "Review" .Data.Audit "Note" (ternary "Approval pending - approving grants the usage listed above" "All requested permissions are approved" .Data.NeedsApproval)) }}
            {{ end }}

            <!-- Versions -->
            {{ if .Data.App.is_dev }}
              <div class="card bg-base-100 border border-base-300 py-6">
                <p class="text-sm text-base-content/70 text-center">
                  Dev apps serve directly from disk - versions are not tracked
                </p>
              </div>
            {{ else }}
              {{ if and .Data.App.staged_changes (not .Data.AskPromote) }}
                <!-- Pending promotion notice; the AskPromote banner at the
                     top covers this right after a staged action -->
                {{ template "promote_prompt" (dict
                    "Warning" true
                    "Message" "Staging has changes which are not promoted yet - prod keeps serving the previous version until they are promoted"
                    "Path" .Data.Path
                    "PostUrl" (print .AppPath "/apps/detail/promote")
                    "Confirm" (print "Promote staging to prod for " .Data.Path "?")
                    "Target" "#detail-content"
                    "StageUrl" .Data.App.stage_url
                    "Perms" .Data.Perms)
                }}
              {{ end }}
              <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
                <div class="card bg-base-100 border border-base-300">
                  <div
                    class="px-4 py-2.5 border-b border-base-300 flex items-center gap-2">
                    <h2
                      class="text-sm font-medium {{ if .Data.App.staged_changes }}
                        text-warning
                      {{ end }}"
                      {{ if .Data.App.staged_changes }}
                        data-tip="staging is not promoted to prod yet"
                      {{ end }}>
                      Staging versions
                    </h2>
                    <span class="text-xs text-base-content/70"
                      >{{ len .Data.StageVersions }} versions</span
                    >
                    {{ if .Data.App.stage_url }}
                      {{ template "open_app_link" (dict "Href" .Data.App.stage_url "Label" "Open staging" "What" "staging app") }}
                    {{ end }}
                  </div>
                  {{ template "version_table" (dict "Versions" .Data.StageVersions "Error" .Data.StageVersionsError "Env" "stage" "Path" .Data.Path "AppPath" .AppPath "Perms" .Data.Perms) }}
                </div>
                <div class="card bg-base-100 border border-base-300">
                  <div
                    class="px-4 py-2.5 border-b border-base-300 flex items-center gap-2">
                    <h2 class="text-sm font-medium">Production versions</h2>
                    <span class="text-xs text-base-content/70"
                      >{{ len .Data.ProdVersions }} versions</span
                    >
                    {{ template "open_app_link" (dict "Href" .Data.App.url "Label" "Open app" "What" "app") }}
                  </div>
                  {{ template "version_table" (dict "Versions" .Data.ProdVersions "Error" .Data.ProdVersionsError "Env" "prod" "Path" .Data.Path "AppPath" .AppPath "Perms" .Data.Perms) }}
                </div>
              </div>
            {{ end }}
          {{ end }}
          {{ end }}
          <!-- End of "detail_content" block -->
          </div>
        </main>
      </div>

      {{ template "sidebar" . }}
    </div>
  </body>
</html>