enviPy-bayer/templates/components/schema_form.html

{% load static %}

<div>
  <!-- Loading state -->
  <template x-if="loading">
    <div class="flex items-center justify-center p-4">
      <span class="loading loading-spinner loading-md"></span>
    </div>
  </template>

  <!-- Error state -->
  <template x-if="error">
    <div class="alert alert-error mb-4">
      <span x-text="error"></span>
    </div>
  </template>

  <!-- Schema form -->
  <template x-if="schema && !loading">
    <div class="space-y-4">
      <!-- Title from schema -->
      <template x-if="schema['x-title'] || schema.title">
        <h4
          class="text-lg font-semibold"
          x-text="schema['x-title'] || schema.title"
        ></h4>
      </template>

      <!-- Render each field (ordered by ui:order) -->
      <template x-for="fieldName in getFieldOrder()" :key="fieldName">
        <div>
          <!-- Text widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'text'"
          >
            <div
              x-data="textWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/text_widget.html" %}
            </div>
          </template>

          <!-- Textarea widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'textarea'"
          >
            <div
              x-data="textareaWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/textarea_widget.html" %}
            </div>
          </template>

          <!-- Number widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'number'"
          >
            <div
              x-data="numberWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/number_widget.html" %}
            </div>
          </template>

          <!-- Select widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'select'"
          >
            <div
              x-data="selectWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/select_widget.html" %}
            </div>
          </template>

          <!-- Checkbox widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'checkbox'"
          >
            <div
              x-data="checkboxWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/checkbox_widget.html" %}
            </div>
          </template>

          <!-- Interval widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'interval'"
          >
            <div
              x-data="intervalWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/interval_widget.html" %}
            </div>
          </template>

          <!-- PubMed link widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'pubmed-link'"
          >
            <div
              x-data="pubmedWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/pubmed_link_widget.html" %}
            </div>
          </template>

          <!-- Compound link widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'compound-link'"
          >
            <div
              x-data="compoundWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/compound_link_widget.html" %}
            </div>
          </template>

          <!-- TimeSeries table widget -->
          <template
            x-if="getWidget(fieldName, schema.properties[fieldName]) === 'timeseries-table'"
          >
            <div
              x-data="timeseriesTableWidget(fieldName, data, schema, uiSchema, mode, debugErrors, context)"
            >
              {% include "components/widgets/timeseries_table_widget.html" %}
            </div>
          </template>
        </div>
      </template>

      <!-- Submit button (only in edit mode with endpoint) -->
      <template x-if="mode === 'edit' && endpoint">
        <div class="form-control mt-4">
          <button class="btn btn-primary" @click="submit()" :disabled="loading">
            <template x-if="loading">
              <span class="loading loading-spinner loading-sm"></span>
            </template>
            <span x-text="loading ? 'Submitting...' : 'Submit'"></span>
          </button>
        </div>
      </template>
    </div>
  </template>
</div>