<script src="https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
<link
  href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://unpkg.com/pev2/dist/pev2.css" />

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #embedded_pev {
    height: 100vh;
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
</style>

<h5>Explain for: {{url}} ({{duration|floatformat:4}}s)</h5>
<div id="button-group">
  <button onclick="copyAIPrompt()" class="btn btn-outline-primary mb-2">Copy AI Optimization Prompt</button>
  <button onclick="togglePrompt()" class="btn btn-outline-primary mb-2 ms-2">Toggle AI Prompt</button>
</div>

<script>
function togglePrompt() {
    const promptDiv = document.createElement('div');
    promptDiv.id = 'ai-prompt-div';
    promptDiv.style.whiteSpace = 'pre-wrap';
    promptDiv.style.padding = '1rem';
    promptDiv.style.backgroundColor = '#f8f9fa';
    promptDiv.style.border = '1px solid #dee2e6';
    promptDiv.style.borderRadius = '0.25rem';
    promptDiv.style.marginBottom = '1rem';
    promptDiv.textContent = `{{ ai_prompt|escapejs }}`;

    const existingDiv = document.getElementById('ai-prompt-div');
    if (existingDiv) {
        existingDiv.remove();
    } else {
        const buttonGroup = document.getElementById('button-group');
        buttonGroup.after(promptDiv);
    }
}


function copyAIPrompt() {
    const prompt = `{{ ai_prompt|escapejs }}`;
    navigator.clipboard.writeText(prompt);
    alert('AI optimization prompt copied to clipboard!');
}
</script>
<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>