{% raw -%}
<div id="app" style="display: none">
  <v-app>
    <kernel-status :kernel_status="kernel_status"></kernel-status>

    <loading-card
      v-show="loading"
      :loading_text="loading_text"
      :base_url="base_url"
      :title="title"
    ></loading-card>

    <v-div
      v-if="voilaDebugMessages.length == 0"
      v-show="!loading"
      class="sepal-ui-container"
    >
      <jupyter-widget-mount-point mount-id="content">
      </jupyter-widget-mount-point>
    </v-div>
    <error-card
      v-if="voilaDebugMessages.length > 0"
      :voila_debug_messages="voilaDebugMessages"
    ></error-card>
  </v-app>
</div>

<script>
  Vue.component("kernel-status", {
    template: `
    <template>
      <v-tooltip top>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            v-bind="attrs"
            v-on="on"
            text
            icon
            style="position: fixed; bottom: 8px; right: 8px; z-index: 9999"
          >
            <!-- Dynamically change icon color based on status -->
            <v-icon small :color="statusColor">mdi-circle</v-icon>
            <!-- <font-awesome-icon :color="statusColor" :icon="['fas', 'bolt-lightning']" /> -->
          </v-btn>
        </template>
        <!-- Tooltip text dynamically updated based on statusName -->
        <span>{{ statusName }}</span>
      </v-tooltip>
    </template>
    `,
    props: {
      kernel_status: {
        type: String,
        default: "idle",
      },
    },
    computed: {
      statusColor() {
        switch (this.kernel_status) {
          case "busy":
            return "orange";
          case "dead":
            return "red";
          case "idle":
            return "green";
          default:
            return "grey"; // Default color
        }
      },
      // Compute the status name for the tooltip
      statusName() {
        switch (this.kernel_status) {
          case "busy":
            return "Busy";
          case "dead":
            return "Disconnected";
          case "idle":
            return "Ready";
          default:
            return "Unknown"; // Default status name
        }
      },
    },
  });

  Vue.component("loading-card", {
    template: `
    <v-layout v-show="loading" align-center justify-center>
      <v-card style="min-width: 600px">
        <v-progress-linear indeterminate="true" height="8"></v-progress-linear>
        <v-card-text
          style="display: flex; flex-direction: column; align-items: center"
        >
          <v-card-title>
            <h2>{{ title }}</h2>
          </v-card-title>

          <v-card-subtitle>
            <h3>{{ loading_text }}</h3>
          </v-card-subtitle>
          <img
            :src="imageUrl"
            alt="SEPAL loading"
            align-center
            justify-center
            width="250px"
          />
        </v-card-text>
      </v-card>
    </v-layout>
  `,
    data() {
      return {
        base_url: "",
      };
    },
    props: ["loading_text", "loading", "title", "base_url"],
    computed: {
      imageUrl() {
        // Assuming the Vuetify theme dark status is accessible
        // via this.$vuetify.theme.dark
        return this.$vuetify.theme.dark
          ? this.base_url + "static/loading_dark.gif"
          : this.base_url + "static/loading_light.gif";
      },
    },
    watch: {
      voilaDebugMessages(newVal, oldVal) {
        console.log("voilaDebugMessages changed:", newVal);
      },
    },
  });

  Vue.component("error-card", {
    template: `
    <div>
    <v-card class="ma-2">
      <v-card-title primary-title class="py-8">
        <h1>Ooops! something went wrong</h1>
      </v-card-title>
      <v-card-text>
        <template>
          <div>
            <!-- Alert showing the first computed property -->
            <v-alert
              type="error"
              icon="mdi-bug"
              border="left"
              colored-border
              width="60%"
              align-center
              justify-center
            >
              >{{ summaryMessages }}
            </v-alert>

            <!-- Button to open dialog -->
            <v-btn color="primary" @click="dialog = true">Show Details</v-btn>

            <!-- Dialog showing the second computed property -->
            <v-dialog v-model="dialog" persistent max-width="720px">
              <v-card color="">
                <v-card-title>
                  Full traceback
                  <v-spacer></v-spacer>
                  <v-btn icon @click="dialog = false">
                    <v-icon>mdi-close</v-icon>
                  </v-btn>
                </v-card-title>
                <v-card-text>
                  <p
                    v-for="(msg, index) in detailedMessages"
                    :key="index"
                    v-html="msg"
                    icon="mdi-bug"
                  ></p>
                </v-card-text>
              </v-card>
            </v-dialog>
          </div>
        </template>
      </v-card-text>
    </v-card>
    </div>
    `,
    data() {
      return {
        dialog: false,
      };
    },
    props: {
      voila_debug_messages: {
        type: Array,
      },
    },
    computed: {
      TestProp() {
        return this.test_prop;
      },
      summaryMessages() {
        return this.voila_debug_messages[0].evalue;
      },
      detailedMessages() {
        return this.voila_debug_messages[0].traceback;
      },
    },
  });

  var app = new Vue({
    el: "#app",
    vuetify: new Vuetify({
      theme: {
        dark: true,
        themes: {
          // These are the default colors from sepal_ui
          light: {
            primary: "#1976D2",
            accent: "#82B1FF",
            secondary: "#424242",
            success: "#4CAF50",
            info: "#2196F3",
            warning: "#FB8C00",
            error: "#FF5252",
            main: "#2e7d32",
            darker: "#005005",
            bg: "#FFFFFF",
            menu: "#FFFFFF",
          },
          dark: {
            primary: "#b3842e",
            accent: "#a1458e",
            secondary: "#324a88",
            success: "#3f802a",
            info: "#79b1c9",
            warning: "#b8721d",
            error: "#a63228",
            main: "#24221f",
            darker: "#1a1a1a",
            bg: "#121212",
            menu: "#424242",
          },
        },
      },
    }),
    mounted() {
      document.querySelector("#app").removeAttribute("style");
    },
    data() {
      return {
        loading_text: "0%",
        loadingPercentage: -1,
        loading: true,
        title: "",
        voilaDebugMessages: [],
        kernel_status: "idle",
        base_url: "",
        title: "",
      };
    },
  });
</script>

{% endraw -%}