<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Form Component</title>
  <style>
    .form-container {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    .form-field {
      margin-bottom: 15px;
    }
    .form-field label {
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }
    .form-field input {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 3px;
    }
    .form-field .error {
      color: red;
      font-size: 0.9em;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <!-- Use the custom form component -->
  <dynamic-form></dynamic-form>

  <script>
    class DynamicForm extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }

      connectedCallback() {
        // Sample data for the form
        const formData = {
          form: {
            uid: { required: true, value: "e13ad3b7-20b2-4c1a-b74e-b8c7d1abd107", html_type: "text", place_holder: "UID", is_valid: true },
            created_at: { required: true, value: "2025-01-17 21:21:27.561769+00:00", html_type: "text", place_holder: "Created At", is_valid: true },
            updated_at: { required: false, value: null, html_type: "text", place_holder: "Updated At", is_valid: true },
            deleted_at: { required: false, value: null, html_type: "text", place_holder: "Deleted At", is_valid: true },
            email: { required: true, value: null, html_type: "email", place_holder: "Email address", errors: ["Field is required."], is_valid: false },
            password: { required: true, value: null, html_type: "password", place_holder: "Password", errors: ["Field is required."], is_valid: false },
            username: { required: true, value: null, html_type: "text", place_holder: "Username", errors: ["Field is required."], is_valid: false }
          }
        };

        // Render the form
        this.render(formData);
      }

      render(data) {
        const form = data.form;
        const container = document.createElement('div');
        container.className = 'form-container';

        // Create a form element
        const formElement = document.createElement('form');

        // Generate form fields from the data
        Object.entries(form).forEach(([fieldName, fieldData]) => {
          const fieldContainer = document.createElement('div');
          fieldContainer.className = 'form-field';

          // Add label
          const label = document.createElement('label');
          label.textContent = fieldName.replace(/_/g, ' ').toUpperCase();
          label.htmlFor = fieldName;
          fieldContainer.appendChild(label);

          // Add input field
          const input = document.createElement('input');
          input.type = fieldData.html_type || 'text';
          input.name = fieldName;
          input.value = fieldData.value || '';
          input.placeholder = fieldData.place_holder || '';
          input.required = fieldData.required || false;

          // Append input to the container
          fieldContainer.appendChild(input);

          // Display validation errors
          if (fieldData.errors && fieldData.errors.length > 0) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error';
            errorDiv.textContent = fieldData.errors.join(', ');
            fieldContainer.appendChild(errorDiv);
          }

          // Append field to the form
          formElement.appendChild(fieldContainer);
        });

        // Add the form to the container
        container.appendChild(formElement);

        // Append the container to the shadow DOM
        this.shadowRoot.appendChild(container);
      }
    }

    // Define the custom element
    customElements.define('dynamic-form', DynamicForm);
  </script>
</body>
</html>

