{% extends 'base.html' %}
{% block content %}
<div class="mb-4">
  <h1 class="h3 mb-1">Integración con tu website</h1>
  <p class="text-muted mb-0">Acá tenés los snippets básicos para enlazar administración, reserva pública e incrustar el booking en otra web.</p>
</div>

<div class="row g-4">
  <div class="col-xl-4">
    <div class="card h-100">
      <div class="card-header fw-bold">URL base actual</div>
      <div class="card-body">
        <p class="mb-2">Base configurada:</p>
        <div class="code-box">{{ base_url }}</div>
        <p class="small text-muted mt-3 mb-0">Cuando lo subas a tu dominio, cambiá el valor de <code>BASE_URL</code> en el archivo <code>.env</code>.</p>
      </div>
    </div>
  </div>
  <div class="col-xl-8">
    <div class="card h-100">
      <div class="card-header fw-bold">Botón de administración</div>
      <div class="card-body">
        <pre class="code-box" id="snippet-admin">{{ snippets.admin_button }}</pre>
        <button class="btn btn-outline-primary btn-sm copy-btn" data-copy-target="snippet-admin">Copiar</button>
      </div>
    </div>
  </div>
  <div class="col-xl-6">
    <div class="card h-100">
      <div class="card-header fw-bold">Botón de reserva pública</div>
      <div class="card-body">
        <pre class="code-box" id="snippet-booking">{{ snippets.booking_button }}</pre>
        <button class="btn btn-outline-primary btn-sm copy-btn" data-copy-target="snippet-booking">Copiar</button>
      </div>
    </div>
  </div>
  <div class="col-xl-6">
    <div class="card h-100">
      <div class="card-header fw-bold">Iframe embebible</div>
      <div class="card-body">
        <pre class="code-box" id="snippet-iframe">{{ snippets.iframe }}</pre>
        <button class="btn btn-outline-primary btn-sm copy-btn" data-copy-target="snippet-iframe">Copiar</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}