{% extends "base.html" %}
{% block title %}Landing — fit-boilerplate-wox{% endblock %}

{% block content %}
<div class="card">
  <h2>Boilerplate WxO + Web</h2>
  <p>Esta es la landing por defecto del template. Reemplazala con tu UI específica.</p>
  <ul>
    <li><strong>WxO Agent ID:</strong> <code>{{ wxo_agent_id or "(no configurado)" }}</code></li>
    <li><strong>WxO Instance:</strong> <code>{{ wxo_instance_url or "(no configurado)" }}</code></li>
  </ul>
</div>

<div class="card">
  <h3>Chat con el agente</h3>
  {% if wxo_agent_id %}
  <div id="wxo-chat-root"></div>
  <script>
    // REPLACE: pegá el snippet completo que devuelve `orchestrate channels create webchat`
    // window.wxoChat = {
    //   apiKey: "...",
    //   agentId: "{{ wxo_agent_id }}",
    //   agentEnvironmentId: "REPLACE_ENV_UUID",
    //   locale: "es"
    // };
  </script>
  <!-- <script src="https://CHANGEME/webchat.js" defer></script> -->
  <p style="color: #6b7280; font-size: 13px;">
    ⚠ Acordate de activar <strong>Embed Security = Off</strong> en la consola WxO (issue I-007).
  </p>
  {% else %}
  <p style="color: #6b7280;">El embed se activa cuando completes <code>WXO_AGENT_ID</code> en <code>.env</code>.</p>
  {% endif %}
</div>

<div class="card">
  <h3>Ver trazas de tool calls</h3>
  <p><a href="/traces">→ /traces (timeline observable)</a></p>
</div>
{% endblock %}