{% extends "base.html.j2" %}
{% import "components.html.j2" as ui %}

{% block content %}

<header class="doc-header">
  <h1>Client Script · {{ doc.metadata.description or doc.metadata.script_type }}</h1>

  <p class="doc-header-meta">
    SuiteScript {{ doc.metadata.suitescript_version or "N/D" }}
    {% if doc.metadata.modules %}
      · Módulos: {{ doc.metadata.modules | join(", ") }}
    {% endif %}
  </p>

  <p class="muted">Eventos de cliente y validaciones en UI.</p>
</header>

{{ ui.metadata_block(doc.metadata) }}
{{ ui.summary_block(doc.summary) }}

{% set lifecycle = doc.lifecycle or {} %}
{% if lifecycle %}
  <div class="section">
    <h2>Lifecycle Hooks</h2>
    {% for hook, description in lifecycle.items() if description %}
      <h3>{{ hook }}</h3>
      <p>{{ description }}</p>
    {% endfor %}
  </div>
{% endif %}

{{ ui.table_block("Campos controlados", doc.fields, [
  {"field": "id", "title": "ID"},
  {"field": "label", "title": "Etiqueta"},
  {"field": "type", "title": "Tipo"},
  {"field": "default", "title": "Valor por defecto"}
]) }}

{{ ui.list_block("Validaciones", doc.validations) }}

{% if doc.user_interaction %}
  {{ ui.list_block("Mensajes al usuario", doc.user_interaction.messages) }}
  {{ ui.list_block("Cambios automáticos", doc.user_interaction.automatic_changes) }}
{% endif %}

{{ ui.list_block("Side effects", doc.side_effects) }}

{% endblock %}