{% extends "django_pev/base.html" %}
{% block content %}
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
<link
  href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://unpkg.com/pev2/dist/style.css" />

<h5>Explain for: {{url}} ({{duration|floatformat:4}}s)</h5>
<div id="embedded_pev" class="">
  <pev2 :plan-source="plan" :plan-query="query" />
</div>

<script>
  const { createApp } = Vue;

  const plan = `{{plan |safe}}`;
  const query = `{{query |safe}}`;

  const app = createApp({
    data() {
      return {
        plan: plan,
        query: query,
      }
    },
  })

  app.component("pev2", pev2.Plan)

  app.mount("#embedded_pev")
</script>
{%endblock%}