{% extends base_template|default:"conjunto/app_base.html" %}
{% load static i18n %}

{% comment %}
  Visual form builder canvas.

  Three columns: field-type palette (left), Gridstack canvas (centre) and a
  client-side field-config panel (right). The whole page is one self-contained
  Alpine + Gridstack surface — it is NOT an HTMX-swapped fragment, so the
  conjunto rule "no Alpine in HTMX-swapped areas" stays intact.

  On submit, builder.js serialises the canvas into the hidden ``schema`` field
  and the form POSTs the whole JSON in one request to ``save_url``.
{% endcomment %}

{% block extra_css %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'conjunto/css/gridstack.min.css' %}">
  <link rel="stylesheet" href="{% static 'conjunto_formbuilder/css/builder.css' %}">
{% endblock %}

{% block page_title %}
  {% blocktranslate with name=definition %}Builder: {{ name }}{% endblocktranslate %}
{% endblock %}

{% block page_actions %}
  <a href="{% url 'formbuilder:formdefinition_list' %}" class="btn btn-link">
    <i class="ti ti-arrow-left"></i> {% translate "Back to list" %}
  </a>
{% endblock %}

{% block content %}
  {{ palette|json_script:"fb-palette" }}
  {{ data_sources|json_script:"fb-sources" }}
  {{ schema|json_script:"fb-schema" }}

  <form id="fb-builder"
        method="post"
        action="{{ save_url }}"
        data-preview-url="{{ preview_url }}"
        hx-post="{{ save_url }}"
        hx-swap="none"
        x-data="formBuilder()"
        class="row g-3">
    {% csrf_token %}
    <input type="hidden" name="schema" x-ref="schemaInput" :value="serialize()">

    {# ── Palette (two tabs: field types | data sources) ──────── #}
    <aside class="col-12 col-md-3" x-show="!previewing">
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item">
              <button type="button" class="nav-link" :class="{ active: activeTab === 'fields' }"
                      @click="activeTab = 'fields'">{% translate "Field types" %}</button>
            </li>
            <li class="nav-item">
              <button type="button" class="nav-link" :class="{ active: activeTab === 'sources' }"
                      @click="activeTab = 'sources'">{% translate "Data sources" %}</button>
            </li>
          </ul>
          <button type="button" class="btn btn-link btn-sm ms-auto px-1"
                  x-show="activeTab === 'fields'"
                  @click="showDefaults = !showDefaults"
                  :title="'{% translate 'Default settings' %}'">
            <i class="ti" :class="showDefaults ? 'ti-chevron-up' : 'ti-settings'"></i>
          </button>
        </div>

        {# ── Field types tab ── #}
        <div class="card-body border-bottom py-2"
             x-show="activeTab === 'fields' && showDefaults" x-cloak>
          <label class="form-label mb-1" for="fb-default-width">
            {% translate "Default field width (columns)" %}
          </label>
          <input type="number" min="1" max="12" id="fb-default-width"
                 class="form-control form-control-sm" x-model.number="defaultWidth">
        </div>
        {# Rendered server-side (not Alpine x-for): gridstack clones a palette #}
        {# item on drag, and a clone outside the x-for scope would lose its #}
        {# data and throw "ft is not defined". Static markup clones cleanly. #}
        <div class="list-group list-group-flush" role="list" x-show="activeTab === 'fields'">
          {% for ft in palette %}
            <div class="list-group-item fb-palette-item"
                 gs-w="6" gs-h="1"
                 data-fb-type="{{ ft.key }}"
                 title="{% translate 'Drag onto the canvas' %}">
              <i class="ti ti-grip-vertical text-secondary me-1"></i>
              <i class="ti ti-{{ ft.icon }}"></i>
              <span class="ms-2">{{ ft.label }}</span>
            </div>
          {% endfor %}
        </div>

        {# ── Data sources tab ── #}
        {# Server-rendered + native HTML5-draggable; dropped onto a field card #}
        {# to bind its value (see builder.js onSourceDragStart/onCardDrop). #}
        <div x-show="activeTab === 'sources'" x-cloak x-data="{ dsFilter: '' }">
          {# Client-side contains-filter over the data-source labels. #}
          <div class="p-2 border-bottom">
            <div class="input-group input-group-sm">
              <input type="text" class="form-control" x-model="dsFilter"
                     placeholder="{% translate 'Filter data sources…' %}"
                     aria-label="{% translate 'Filter data sources' %}">
              <button class="btn" type="button" @click="dsFilter = ''"
                      aria-label="{% translate 'Clear filter' %}"
                      title="{% translate 'Clear filter' %}">
                <i class="ti ti-filter"></i>
              </button>
            </div>
          </div>
          <div class="list-group list-group-flush">
            {% regroup data_sources by category as source_groups %}
            {% for group in source_groups %}
              {% if group.grouper %}
                <div class="list-group-item bg-light text-secondary text-uppercase small fw-bold py-1"
                     x-show="!dsFilter">
                  {{ group.grouper }}
                </div>
              {% endif %}
              {% for s in group.list %}
                <div class="list-group-item fb-source-item"
                     draggable="true"
                     data-ds-key="{{ s.key }}"
                     data-ds-type="{{ s.value_type }}"
                     data-ds-searchable="{% if s.searchable %}1{% else %}0{% endif %}"
                     data-ds-label="{{ s.label|lower }}"
                     x-show="!dsFilter || $el.dataset.dsLabel.includes(dsFilter.toLowerCase())"
                     @dragstart="onSourceDragStart($event)"
                     @dragend="onSourceDragEnd()"
                     title="{% translate 'Drag onto a field to bind its value' %}">
                  <i class="ti ti-grip-vertical text-secondary me-1"></i>
                  <i class="ti ti-database"></i>
                  <span class="ms-2">{{ s.label }}</span>
                  {% if s.searchable %}
                    <i class="ti ti-search text-secondary ms-2"
                       title="{% translate 'Searchable — can provide options' %}"></i>
                  {% endif %}
                  <span class="badge bg-secondary-lt ms-auto">{{ s.value_type }}</span>
                </div>
              {% endfor %}
            {% empty %}
              <div class="list-group-item text-secondary small">
                {% translate "No data sources available." %}
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </aside>

    {# ── Canvas ──────────────────────────────────────────────── #}
    <section class="col-12 col-md-6" x-show="!previewing">
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <h3 class="card-title">{% translate "Canvas" %}</h3>
          <div class="btn-list ms-auto">
            <button type="button" class="btn" @click="preview()">
              <i class="ti ti-eye"></i> {% translate "Preview" %}
            </button>
            <button type="submit" class="btn btn-primary">
              <i class="ti ti-device-floppy"></i> {% translate "Save form" %}
            </button>
          </div>
        </div>
        <div class="card-body">
          <div x-show="fields.length === 0" class="fb-empty text-secondary text-center py-5">
            {% translate "Drag a field type from the left onto the canvas." %}
          </div>
          {% comment %} The ``grid-stack`` class is added by builder.js right before init so conjunto.js's widget-area auto-init (which targets ``.grid-stack``) never claims this canvas. {% endcomment %}
          <div id="fb-grid" x-ref="grid" data-columns="12"></div>
        </div>
      </div>
    </section>

    {# ── Field config panel ──────────────────────────────────── #}
    <aside class="col-12 col-md-3" x-show="!previewing">
      <div class="card">
        <div class="card-header"><h3 class="card-title">{% translate "Field settings" %}</h3></div>
        <div class="card-body">
          <p x-show="!selected" class="text-secondary">
            {% translate "Select a field on the canvas to edit its settings." %}
          </p>
          <template x-if="selected">
          <div>
            <div class="mb-3">
              <label class="form-label" for="fb-label">{% translate "Label" %}</label>
              <input type="text" class="form-control" id="fb-label"
                     x-model="selected.label" @input="touch()">
            </div>
            <div class="mb-3">
              <label class="form-label" for="fb-name">{% translate "Name" %}</label>
              <input type="text" class="form-control" id="fb-name"
                     x-model="selected.name" @input="touch()">
            </div>
            <div class="mb-3">
              <label class="form-label" for="fb-help">{% translate "Help text" %}</label>
              <textarea class="form-control" id="fb-help" rows="2"
                        x-model="selected.help_text" @input="touch()"></textarea>
            </div>
            <label class="form-check">
              <input type="checkbox" class="form-check-input"
                     x-model="selected.required" @change="touch()">
              <span class="form-check-label">{% translate "Required" %}</span>
            </label>
            <label class="form-check">
              <input type="checkbox" class="form-check-input"
                     x-model="selected.readonly" @change="touch()">
              <span class="form-check-label">{% translate "Read-only" %}</span>
            </label>

            {# Data bindings: drop a source from the "Data sources" tab onto a #}
            {# slot. Value slot = default value (provision); options slot = #}
            {# searchable choices (source), only on choice/autocomplete types. #}
            <div class="mt-3">
              <label class="form-label">{% translate "Value binding" %}</label>
              <div class="fb-slot-zone"
                   @dragover="onSlotDragOver($event, 'value')"
                   @dragleave="onSlotDragLeave($event)"
                   @drop="onSlotDrop($event, 'value')">
                <template x-if="selected.binding">
                  <span class="d-flex align-items-center gap-2">
                    <span class="badge bg-azure-lt">
                      <i class="ti ti-arrow-bar-to-down"></i>
                      <span x-text="selected.binding.provider"></span>
                    </span>
                    <button type="button" class="btn btn-sm btn-outline-danger ms-auto"
                            @click="clearSlotBinding('value')">
                      <i class="ti ti-x"></i> {% translate "Remove" %}
                    </button>
                  </span>
                </template>
                <template x-if="!selected.binding">
                  <span class="text-secondary small">
                    {% translate "Drop a data source to set the default value." %}
                  </span>
                </template>
              </div>
            </div>

            <div class="mt-3" x-show="paletteFor(selected.type).has_options" x-cloak>
              <label class="form-label">{% translate "Options binding" %}</label>
              <div class="fb-slot-zone"
                   @dragover="onSlotDragOver($event, 'options')"
                   @dragleave="onSlotDragLeave($event)"
                   @drop="onSlotDrop($event, 'options')">
                <template x-if="selected.optionsBinding">
                  <span class="d-flex align-items-center gap-2">
                    <span class="badge bg-purple-lt">
                      <i class="ti ti-list-search"></i>
                      <span x-text="selected.optionsBinding.provider"></span>
                    </span>
                    <button type="button" class="btn btn-sm btn-outline-danger ms-auto"
                            @click="clearSlotBinding('options')">
                      <i class="ti ti-x"></i> {% translate "Remove" %}
                    </button>
                  </span>
                </template>
                <template x-if="!selected.optionsBinding">
                  <span class="text-secondary small">
                    {% translate "Drop a searchable data source to provide the choices." %}
                  </span>
                </template>
              </div>
            </div>

            {# Type-specific options, driven by the field type's config_schema. #}
            <template x-for="opt in configParams()" :key="opt.key">
              <div class="mt-3">
                <template x-if="opt.type === 'choices'">
                  <div>
                    <label class="form-label" x-text="opt.label"></label>
                    <textarea class="form-control" rows="4"
                              x-model="selected.optionsText" @input="touch()"
                              placeholder="{% translate 'value|Label' %}"></textarea>
                  </div>
                </template>
                <template x-if="opt.type === 'checkbox'">
                  <label class="form-check">
                    <input type="checkbox" class="form-check-input"
                           x-model="selected.options[opt.key]">
                    <span class="form-check-label" x-text="opt.label"></span>
                  </label>
                </template>
                <template x-if="opt.type === 'number'">
                  <div>
                    <label class="form-label" x-text="opt.label"></label>
                    <input type="number" class="form-control"
                           x-model.number="selected.options[opt.key]">
                  </div>
                </template>
                <template x-if="opt.type === 'text'">
                  <div>
                    <label class="form-label" x-text="opt.label"></label>
                    <input type="text" class="form-control"
                           x-model="selected.options[opt.key]">
                  </div>
                </template>
              </div>
            </template>

            <button type="button" class="btn btn-outline-danger w-100 mt-3"
                    @click="removeSelected()">
              <i class="ti ti-trash"></i> {% translate "Remove field" %}
            </button>
          </div>
          </template>
        </div>
      </div>
    </aside>

    {# ── Preview pane (GitHub-editor-style toggle; replaces the canvas) ── #}
    <section class="col-12" x-show="previewing" x-cloak>
      <div class="card">
        <div class="card-header d-flex align-items-center">
          <h3 class="card-title">{% translate "Preview" %}</h3>
          <button type="button" class="btn btn-link ms-auto" @click="previewing = false">
            <i class="ti ti-arrow-left"></i> {% translate "Back to editor" %}
          </button>
        </div>
        <div class="card-body">
          <div id="fb-preview-pane">
            <p class="text-secondary">{% translate "Loading preview…" %}</p>
          </div>
        </div>
      </div>
    </section>
  </form>
{% endblock %}

{% block scripts %}
  {{ block.super }}
  {# gridstack must load before builder.js (which calls GridStack.init). #}
  <script src="{% static 'conjunto/js/gridstack-all.js' %}"></script>
  <script src="{% static 'conjunto_formbuilder/js/builder.js' %}" id="fb-builder-js" hx-preserve="true"></script>
{% endblock %}