From 95547dfa2942ca86adf2f7a982719ada634689be Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Thu, 31 Aug 2023 12:04:40 -0400
Subject: [PATCH 1/8] form refactor

---
 .../{{cookiecutter.repo_name}}/home/forms.py  | 39 +++++++++++++++
 .../{{cookiecutter.repo_name}}/home/urls.py   |  9 +++-
 .../{{cookiecutter.repo_name}}/home/views.py  | 11 ++++
 .../templates/components/util.jinja           |  4 ++
 .../forms/widgets/clearable_file_input.html   |  5 +-
 .../templates/django/forms/widgets/date.html  |  4 +-
 .../django/forms/widgets/datetime.html        |  4 +-
 .../templates/django/forms/widgets/input.html |  5 +-
 .../django/forms/widgets/select.html          |  5 +-
 .../django/forms/widgets/textarea.html        |  5 +-
 .../templates/form_test.jinja                 | 10 ++++
 .../templates/forms/checkbox.jinja            | 24 +++++++--
 .../forms/clearable_file_input.jinja          | 28 +++++++----
 .../templates/forms/date_datetime.jinja       | 35 ++++++++-----
 .../templates/forms/input.jinja               | 50 ++++++++++++-------
 .../templates/forms/password.jinja            | 21 +++++---
 .../templates/forms/textarea.jinja            | 23 ++++++---
 .../templates/forms/wrappers.jinja            | 38 ++++++++++++++
 .../templates/samples/test_form.jinja         | 50 +++++++++++++++++++
 19 files changed, 292 insertions(+), 78 deletions(-)
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/form_test.jinja
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
new file mode 100644
index 00000000..ae918c73
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
@@ -0,0 +1,39 @@
+from datetime import datetime
+
+from django import forms
+
+
+class FormTest(forms.Form):
+    template_name = "samples/test_form.jinja"
+
+    first_name = forms.CharField(
+        label="First Name",
+        min_length=1,
+        max_length=100,
+        widget=forms.TextInput(
+            attrs={"placeholder": "First Name", "autocomplete": "given-name"}
+        ),
+    )
+    char = forms.CharField()
+    integer = forms.IntegerField()
+    email = forms.EmailField()
+    url = forms.URLField()
+    password = forms.CharField(widget=forms.PasswordInput())
+
+    date_initial = forms.DateField(initial=datetime.now)
+    datetime_initial = forms.DateTimeField(initial=datetime.now)
+    time_initial = forms.TimeField(initial=datetime.now)
+    date_empty = forms.DateField()
+    datetime_empty = forms.DateTimeField()
+    time_empty = forms.TimeField()
+
+    textarea = forms.CharField(widget=forms.Textarea())
+
+    checkbox = forms.BooleanField()
+    choice = forms.ChoiceField(
+        choices=[("choice1", "choice 1"), ("choice2", "choice 2")]
+    )
+    file = forms.FileField()
+
+    class Meta:
+        fields = "__all__"
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/urls.py b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/urls.py
index 41a24428..e4bc020c 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/urls.py
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/urls.py
@@ -1,7 +1,13 @@
 from django.urls import path
 from django.views.generic.base import TemplateView
 
-from .views import current_time, error, test_message_redirect, test_message_refresh
+from .views import (
+    current_time,
+    error,
+    form_test,
+    test_message_redirect,
+    test_message_refresh,
+)
 
 urlpatterns = [
     path("current-time/", current_time, name="current_time"),
@@ -13,5 +19,6 @@
         name="random_chart",
     ),
     path("error/", error, name="error"),
+    path("form-test/", form_test, name="form-test"),
     path("", TemplateView.as_view(template_name="index.jinja"), name="home"),
 ]
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/views.py b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/views.py
index 93417387..5a6000d7 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/views.py
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/views.py
@@ -2,6 +2,8 @@
 
 from django.contrib import messages
 from django.template.response import TemplateResponse
+from django.http import HttpResponse
+from django.shortcuts import render
 from django.views.defaults import (
     bad_request,
     page_not_found,
@@ -10,6 +12,8 @@
 )
 from django_htmx.http import HttpResponseClientRedirect, HttpResponseClientRefresh
 
+from .forms import FormTest
+
 
 def error(request):
     """Generate an exception. Useful for e.g. configuring Sentry"""
@@ -46,3 +50,10 @@ def FourOhFour(request, exception):
 
 def WorkedLocally(request):
     return server_error(request, template_name="500.jinja")
+
+
+def form_test(request):
+    form = FormTest()
+    if request.method == "GET":
+        return render(request, "form_test.jinja", context={"form": form})
+    return HttpResponse(form.render())
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja
index f3dd1fd9..63b748d0 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/components/util.jinja
@@ -7,3 +7,7 @@
         {% endfor %}
     {% endif %}
 {% endmacro %}
+
+{% macro get_event_name_from_id(id="") %}
+{% if id %}update-{{ id | replace('_', '-')}}{% endif %}
+{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
index 785b7ad5..5687a02c 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
@@ -1,3 +1,2 @@
-{% from 'forms/clearable_file_input.jinja' import widget_to_clearable_file_input %}
-
-{{widget_to_clearable_file_input(widget)}}
+{% from 'forms/clearable_file_input.jinja' import clearable_file_input_widget %}
+{{clearable_file_input_widget(widget, id=widget.attrs.id)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
index 62527be4..c99911a6 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
@@ -1,2 +1,2 @@
-{% from 'forms/date_datetime.jinja' import widget_to_date_datetime %}
-{{ widget_to_date_datetime(widget) }}
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, id=widget.attrs.id, date=True) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
index 25f63e50..2f41a013 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
@@ -1,2 +1,2 @@
-{% from 'forms/date_datetime.jinja' import widget_to_date_datetime %}
-{{ widget_to_date_datetime(widget, true) }}
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, id=widget.attrs.id, true) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
index 0fd3318f..3f238ca1 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
@@ -1,3 +1,2 @@
-{% from 'forms/input.jinja' import widget_to_input %}
-
-{{widget_to_input(widget)}}
+{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget,
+id=widget.attrs.id)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
index 07485995..98d205a1 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
@@ -1,3 +1,2 @@
-{% from 'forms/select.jinja' import widget_to_select %}
-
-{{widget_to_select(widget)}}
+{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget,
+id=widget.attrs.id)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
index 3ae652a6..81cff22f 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
@@ -1,3 +1,2 @@
-{% from 'forms/textarea.jinja' import widget_to_textarea %}
-
-{{widget_to_textarea(widget)}}
+{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget,
+id=widget.attrs.id)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/form_test.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/form_test.jinja
new file mode 100644
index 00000000..c76543fb
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/form_test.jinja
@@ -0,0 +1,10 @@
+{% extends "base.jinja" %}
+{% block title %}title{% endblock title %}
+{% block content %}
+<div class="flex flex-col items-center mt-4">
+    <span class="text-xl">Form test</span>
+    <form method="post" class="flex flex-col gap-4" hx-post="{{ url('form-test')}}" hx-swap="innerHTML">
+        {{form }}
+    </form>
+</div>
+{% endblock content %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
index 77c512bd..498dff4a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
@@ -1,11 +1,27 @@
-{% macro checkbox(field) %}
-    <div class="relative flex items-start">
-        <div class="flex items-center h-5">{{ field }}</div>
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+
+{% macro checkbox_field(field, errors) %}
+    <div class="relative flex items-start{% if errors %} error{% endif %}">
+        <div class="flex items-center h-5">{{ checkbox_widget(field.field.widget, value=field.value(), id=field.id_for_label) }}</div>
         <div class="ml-3 text-sm">
             {% if field.label %}{{ field.label_tag() }}{% endif %}
-            <p class="text-gray-500" id="email-description">
+            {% if field.help_text %}
+            <p class="text-gray-500">
                 {{ field.help_text|safe }}
             </p>
+            {% endif %}
         </div>
     </div>
 {% endmacro %}
+
+{% macro checkbox_widget(widget, value=False, id="") %}
+    {% set attrs = widget.attrs %}
+    {% do attrs.update({"name": widget.name, "value": value, "type": widget.type}) %}
+    {% set event_name = get_event_name_from_id(id) %}
+
+    <input
+        type="checkbox"
+        x-data="input('{{ event_name }}', '{{ value or "" }}')"
+        x-ref="input" class="input {{ input_classes or ""}} {{attrs.class or ""}}" {{ attributes(attrs)}}
+    />
+{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
index 86088ea4..99d27595 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
@@ -1,20 +1,26 @@
-{% from 'forms/input.jinja' import input %}
-{% macro clearable_file_input(type="file", name="", value=None, is_initial=False, initial_text="", required=False, checkbox_name="", checkbox_id="", clear_checkbox_label="", input_text="", attrs={}) %}
-    <div x-data="input('update-{{ attrs.id | replace('_', '-') }}', '{{ value }}')"
+{% from 'forms/input.jinja' import input_widget %}
+{% from 'forms/checkbox.jinja' import checkbox_widget %}
+{% from 'components/util.jinja' import get_event_name_from_id %}
+
+{% macro clearable_file_input_field(field, errors) %}
+    {{ clearable_file_input_widget(field.field.widget, value=field.value(), id=field.id_for_label)}}
+{% endmacro %}
+
+{% macro clearable_file_input_widget(widget, value=None, id="") %}
+    {% set attrs = widget.attrs or {} %}
+    {% set event_name = get_event_name_from_id(id) %}
+
+    <div
          class="w-full input flex items-center pb-2">
         {% if is_initial %}
             {{widget.initial_text}}: <a href="{{value.url}}">{{value}}</a>
             {% if not required %}
-                {{ input(type="checkbox", name=checkbox_name, attrs={'id': checkbox_id, 'disabled': attrs.disabled}) }}
-                <label for="{{checkbox_id}}">{{clear_checkbox_label}}</label>
+                {{ checkbox_widget({"type": "checkbox", "name": widget.checkbox_name, "attrs":{'id': widget.checkbox_id, 'disabled': attrs.disabled}}) }}
+                <label for="{{widget.checkbox_id}}">{{widget.clear_checkbox_label}}</label>
             {% endif %}
             <br>
-            {{input_text}}:
+            {{widget.input_text}}:
         {% endif %}
-        {{ input(type=type, name=name, attrs=attrs, input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
+        {{ input_widget(widget, type="file", input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
     </div>
 {% endmacro %}
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_clearable_file_input(widget) %}
-    {{ clearable_file_input(type=widget.type, name=widget.name, value=widget.value, is_initial=widget.is_initial, initial_text=widget.initial_text, required=widget.required, checkbox_name=widget.checkbox_name, checkbox_id=widget.checkbox_id, clear_checkbox_label=widget.clear_checkbox_label, input_text=widget.input_text, attrs=widget.attrs)}}
-{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
index a24a2f90..0c070a08 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
@@ -1,15 +1,26 @@
-{% from 'components/util.jinja' import attributes %}
-{% macro date_datetime(name=none, value=none, id=none, attrs={}, time=false) %}
-    {% set event_name = "update-"|join(id | replace('_', '-')) if id else "" %}
-    {% do attrs.update({"name": name, "value": value}) %}
-    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ value }}', {{ 'true' if time else 'false' }})"
+{% from "forms/wrappers.jinja" import input_shell %}
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+
+{% macro datetime_field(field, errors) %}
+    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=True)) }}
+{% endmacro %}
+
+{% macro date_field(field, errors) %}
+    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=False, date=True)) }}
+{% endmacro %}
+
+{% macro time_field(field, errors) %}
+    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=False)) }}
+{% endmacro %}
+
+
+{% macro date_datetime_widget(widget, value=None, id="", time=False, date=False) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": value, "id": id}) %}
+    {% set event_name = get_event_name_from_id(id) %}
+
+    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
          class="w-full input" :class="{'has-focus': active}">
-        <input class="w-full rounded-md border border-gray-200 px-3 py-2.5" x-ref="picker" type="text" {{ attributes(attrs) }}/>
+        <input class="w-full rounded-md border border-gray-200 px-3 py-2.5 flatpickr flatpickr-input" x-ref="picker" type="text" {{ attributes(attrs) }}/>
     </div>
 {% endmacro %}
-{#
-    Django date or datetime widget to date_datetime macro
- #}
-{% macro widget_to_date_datetime(widget, time=false) %}
-    {{ date_datetime(name=widget.name, value=widget.value, id=widget.attrs.id, attrs=widget.attrs, time=time) }}
-{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
index f5c9802e..1b42ff4d 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
@@ -1,20 +1,34 @@
-{% from 'components/util.jinja' import attributes %}
-{% macro input(type="text", name=none, value=none, event_name="", color='primary', attrs={}, left_icon='', right_icon='', input_classes="") %}
-    {% set disabled, readonly = attrs.disabled, attrs.readonly %}
-    {% set noedit = disabled or readonly %}
-        <input
-        {% if type !="checkbox" %}
-            {#
-                The following attrs are responsible for frontend validation (not used in admin) and label behavior for inputs/texareas.
-                May also need to be disabled for radio buttons if admin misbehaves again.
-             #}
-            x-model.debounce.500ms="value"
-            :class="{'has-focus': active}"
-        {% endif %}
-        x-data="input('update-{{ event_name | replace('_', '-') }}', '{{ value }}')"
-        x-ref="input" class="input {{ input_classes }} {{attrs.class}}" {% do attrs.update({"type": type, "name": name, "value": value}) %} {{ attributes(attrs)}} />
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% from "forms/wrappers.jinja" import input_shell %}
+
+{% macro input_field(field, errors, input_classes="") %}
+    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, input_classes=input_classes)) }}
+{% endmacro %}
+
+{% macro number_field(field, errors, input_classes="") %}
+    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="number", input_classes=input_classes)) }}
+{% endmacro %}
+
+{% macro email_field(field, errors, input_classes="") %}
+    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="email", input_classes=input_classes)) }}
 {% endmacro %}
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_input(widget) %}
-    {{ input(type=widget.type, name=widget.name, value=widget.value, event_name=widget.attrs.id, attrs=widget.attrs )}}
+
+{% macro url_field(field, errors, input_classes="") %}
+    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(), id=field.id_for_label, type="url", input_classes=input_classes)) }}
+{% endmacro %}
+
+{# password_field has it's own file "password.jinja" #}
+
+{% macro input_widget(widget, value=None, id="", type="text", input_classes="") %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": value, "type": type, "id": id}) %}
+    {% set disabled, readonly = widget.attrs.disabled, attrs.readonly %}
+    {% set noedit = disabled or readonly %}
+    {% set event_name = get_event_name_from_id(id) %}
+    <input
+        x-model.debounce.500ms="value"
+        :class="{'has-focus': active}"
+        x-data="input('{{ event_name }}', '{{ value or "" }}')"
+        x-ref="input" class="input {{ input_classes or ""}} {{attrs.classes or ""}}" {{ attributes(attrs)}}
+    />
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index fd0f87fa..65ce7086 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -1,9 +1,17 @@
-{% from 'components/util.jinja' import attributes %}
-{% macro password(name='password', value=None, event_name="", attrs={}) %}
-    <div x-data="password('update-{{ event_name | replace('_', '-') }}', '{{ value }}', 'password')" x-ref="input"
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% macro password_field(field, errors) %}
+    {{ password_widget(field.field.widget, value=field.value(), id=field.id_for_label, name=field.name)}}
+{% endmacro %}
+
+{% macro password_widget(widget, value=none, id="", name="") %}
+    {% set event_name = get_event_name_from_id(id) %}
+    <div
+        x-data="password('{{ event_name }}', '{{ value }}', 'password')"
+        x-ref="input"
         :class="active ? 'has-focus' : ''"
-         class="w-full z-10 flex items-center relative password">
-        <input x-model.debounce.500ms="value" :type="type" name="{{ name }}" class="mr-8" {% if value != None %}value="{{ value }}"{% endif %} {{ attributes(attrs)}} />
+        class="w-full z-10 flex items-center relative password"
+    >
+        <input x-model.debounce.500ms="value" :type="type" class="mr-8" value="{{ value or ""}}" {{ attributes(widget.attrs)}} />
         <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak
@@ -17,6 +25,3 @@
         </div>
     </div>
 {% endmacro %}
-{% macro widget_to_password(widget) %}
-    {{ password(name=widget.name, value=widget.value, event_name=widget.attrs.id, attrs=widget.attrs )}}
-{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
index 2a702120..c0cf940e 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
@@ -1,19 +1,26 @@
-{% from 'components/util.jinja' import attributes %}
-{% macro text_area(type="text", name=none, value=none, event_name="", color='primary', attrs={}, left_icon='', right_icon='') %}
-    <div x-data="input('update-{{ event_name | replace('_', '-') }}', '{{ value }}')"
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+
+{% macro textarea_field(field, errors) %}
+    {{ textarea_widget(field.field.widget, value=field.value(), id=field.id_for_label)}}
+{% endmacro %}
+
+{# takes a django widget and calls our textarea macro with the appropriate args #}
+{% macro textarea_widget(widget, value=None, id="") %}
+    {% set attrs = widget.attrs %}
+    {% do attrs.update({"type": widget.type, "id": id, "name": widget.name, "value": value or ""}) %}
+    {% set event_name = get_event_name_from_id(id) %}
+    <div class="flex flex-col">
+    </div>
+
+    <div x-data="input('{{ event_name }}', '{{ value or ""}}')"
         :class="active ? 'has-focus' : ''"
         x-ref="input"
          class="w-full input">
         <textarea
             x-model.debounce.500ms="value"
-            {% do attrs.update({"type": type, "name": name, "value": value}) %}
             {{ attributes(attrs)}}
         >
             {% if value %}{{value}}{% endif %}
         </textarea>
     </div>
 {% endmacro %}
-{# takes a django widget and calls our textarea macro with the appropriate args #}
-{% macro widget_to_textarea(widget) %}
-    {{ text_area(type=widget.type, name=widget.name, value=widget.value, event_name=widget.attrs.id, attrs=widget.attrs )}}
-{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
new file mode 100644
index 00000000..4535a392
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
@@ -0,0 +1,38 @@
+{%- macro input_widget_hook(field) -%}
+    {%- if field.widget_type == "select" -%}
+        select
+    {%- elif field.widget_type == "radioselect" -%}
+        radio
+    {%- elif field.widget_type == "textarea" -%}
+        textarea
+    {%- else -%}
+        input
+    {%- endif -%}
+{%- endmacro -%}
+
+{% macro input_shell(field, errors='', rendered="") %}
+    <div class="field {% if errors %}error {% endif %}{{ input_widget_hook(field) }}">
+            {{ rendered }}
+            {% if field.label %}{{ field.label_tag() }}{% endif %}
+            <div class="right-icon {% if errors is not none %}hidden{% endif %}">
+                {{ heroicon_solid("exclamation-circle", class="text-error")}}
+            </div>
+        </div>
+{% endmacro %}
+{% macro boolean_shell(field, errors='') %}
+    <div class="boolean-field flex items-center {% if errors %} error{% endif %}">
+        {% if field.label %}{{ field.label_tag() }}{% endif %}
+        {{ field }}
+    </div>
+{% endmacro %}
+{% macro radio_shell(field, errors='') %}
+    <div class="radio-field {% if errors %} error{% endif %}">
+        <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
+    </div>
+{% endmacro %}
+{% macro file_shell(field, errors='') %}
+    <div class="file-field {% if errors %} error{% endif %}">
+        {% if field.label %}{{ field.label_tag() }}{% endif %}
+        <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
+    </div>
+{% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja
new file mode 100644
index 00000000..61594371
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja
@@ -0,0 +1,50 @@
+
+{% from 'forms/checkbox.jinja' import checkbox_field %}
+{% from 'forms/input.jinja' import input_field, number_field, email_field, url_field %}
+{% from 'forms/textarea.jinja' import textarea_field %}
+{% from 'forms/date_datetime.jinja' import datetime_field, date_field, time_field %}
+{% from 'forms/clearable_file_input.jinja' import clearable_file_input_field %}
+{% from 'forms/password.jinja' import password_field %}
+{% from 'forms/select.jinja' import choice_field %}
+{% from 'forms/field.jinja' import field as f %}
+{% from 'forms/checkbox.jinja' import checkbox_widget %}
+
+<div class="w-80 flex flex-col gap-4">
+    {% for field, error in fields %}
+        {% if field.name == "first_name" %}
+            {{ f(field, errors) }}
+        {% elif field.name == "checkbox" %}
+            {{ checkbox_field(field, errors) }}
+        {% elif field.name in ["datetime_initial", "datetime_empty"] %}
+            {{ datetime_field(field, errors) }}
+        {% elif field.name in ["date_initial", "date_empty"] %}
+            {{ date_field(field, errors) }}
+        {% elif field.name in ["time_initial", "time_empty"] %}
+            {{ time_field(field, errors) }}
+        {% elif field.name in ["char"] %}
+            {{ input_field(field, errors) }}
+        {% elif field.name in ["textarea"] %}
+            {{ textarea_field(field, errors) }}
+        {% elif field.name in ["integer"] %}
+            {{ number_field(field, errors) }}
+        {% elif field.name in ["email"] %}
+            {{ email_field(field, errors) }}
+        {% elif field.name in ["password"] %}
+            {{ password_field(field, errors) }}
+        {% elif field.name in ["url"] %}
+            {{ url_field(field, errors) }}
+        {% elif field.name in ["choice"] %}
+            {{ choice_field(field, errors) }}
+        {% elif field.name in ["file"] %}
+            {{ clearable_file_input_field(field, errors) }}
+        {% else %}
+            <span class="text-green-500 flex gap-2">
+                Uncaught field
+                {{field.name}}
+                {{ field.widget_type }}
+                {{ field.field.widget.input_type }}
+            </span>
+        {% endif %}
+    {% endfor %}
+    <button class="p-2 m-2 bg-primary text-white" type="submit">Submit</button>
+</div>

From ec08822e40149a15d983c7c6285a330b420944ba Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 06:34:49 -0400
Subject: [PATCH 2/8] missing melissa commits

---
 .../dtl_templates/admin/base_site.html        | 16 ++++++++++++++
 .../templates/admin/base_site.html            | 21 -------------------
 .../templates/forms/password.jinja            |  2 +-
 3 files changed, 17 insertions(+), 22 deletions(-)
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
 delete mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/admin/base_site.html

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
new file mode 100644
index 00000000..e865c4a9
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
@@ -0,0 +1,16 @@
+{% extends "admin/base_site.html" %} {% load django_vite %} {% block extrahead %} {{
+block.super }} {% vite_hmr_client %} {% vite_asset 'js/forms.ts' %} {% vite_asset
+'js/main.ts' %} {% vite_asset 'css/tailwind.js' %}
+<style>
+  [x-cloak] {
+    display: none !important;
+  }
+</style>
+{% endblock %} {% block title %} {% if subtitle %}{{ subtitle }} |{% endif %} {{ title }} |
+{{ site_title|default:_('Sampleapp site admin') }} {% endblock %} {% block branding %}
+<h1 id="site-name">
+  <a href="{% url 'admin:index' %}"
+    >{{ site_header|default:_('Sampleapp administration') }}</a
+  >
+</h1>
+{% endblock %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/admin/base_site.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/admin/base_site.html
deleted file mode 100644
index 0c01da7c..00000000
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/admin/base_site.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% extends "admin/base_site.html" %}
-{% load django_vite %}
-{% block extrahead %}
-    {{ block.super }}
-    {% vite_hmr_client %}
-    {% vite_asset 'js/forms.ts' %}
-    {% vite_asset 'js/main.ts' %}
-    {% vite_asset 'css/tailwind.js' %}
-  <style>
-    [x-cloak] { display: none !important; }
-  </style>
-{% endblock %}
-{% block title %}
-    {% if subtitle %}{{ subtitle }} |{% endif %}
-    {{ title }} | {{ site_title|default:_('Sampleapp site admin') }}
-{% endblock %}
-{% block branding %}
-    <h1 id="site-name">
-        <a href="{% url 'admin:index' %}">{{ site_header|default:_('Sampleapp administration') }}</a>
-    </h1>
-{% endblock %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index 65ce7086..31069276 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -11,7 +11,7 @@
         :class="active ? 'has-focus' : ''"
         class="w-full z-10 flex items-center relative password"
     >
-        <input x-model.debounce.500ms="value" :type="type" class="mr-8" value="{{ value or ""}}" {{ attributes(widget.attrs)}} />
+        <input x-model.debounce.500ms="value" :type="type" class="!pr-10" value="{{ value or ""}}" {{ attributes(widget.attrs)}} />
         <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak

From a3210d0eb7f1becf83dc06616ab3f9d23be75b33 Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 06:52:19 -0400
Subject: [PATCH 3/8] simplify password

---
 .../templates/forms/password.jinja                     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index 31069276..2aa1542a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -1,17 +1,17 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 {% macro password_field(field, errors) %}
-    {{ password_widget(field.field.widget, value=field.value(), id=field.id_for_label, name=field.name)}}
+    {{ field }}
 {% endmacro %}
 
-{% macro password_widget(widget, value=none, id="", name="") %}
-    {% set event_name = get_event_name_from_id(id) %}
+{% macro password_widget(widget) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <div
-        x-data="password('{{ event_name }}', '{{ value }}', 'password')"
+        x-data="password('{{ event_name }}', '{{ widget.value }}', 'password')"
         x-ref="input"
         :class="active ? 'has-focus' : ''"
         class="w-full z-10 flex items-center relative password"
     >
-        <input x-model.debounce.500ms="value" :type="type" class="!pr-10" value="{{ value or ""}}" {{ attributes(widget.attrs)}} />
+    <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(widget.attrs) }} />
         <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak

From a7c14eb99b7f9250e3ac96b2853ef8de066d0e1b Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 09:59:38 -0400
Subject: [PATCH 4/8] updates

---
 .../{{cookiecutter.repo_name}}/home/forms.py  |  8 ++-
 .../forms/widgets/clearable_file_input.html   |  2 +-
 .../templates/django/forms/widgets/date.html  |  2 +-
 .../django/forms/widgets/datetime.html        |  2 +-
 .../templates/django/forms/widgets/input.html |  3 +-
 .../django/forms/widgets/input_option.html    |  5 +-
 .../django/forms/widgets/password.html        |  4 +-
 .../templates/django/forms/widgets/radio.html |  4 +-
 .../django/forms/widgets/select.html          |  3 +-
 .../django/forms/widgets/select_option.html   |  4 +-
 .../django/forms/widgets/textarea.html        |  3 +-
 .../templates/django/forms/widgets/time.html  |  2 +
 .../django/forms/widgets/toggle.html          |  4 +-
 .../templates/forms/checkbox.jinja            | 13 +----
 .../forms/clearable_file_input.jinja          | 11 ++--
 .../templates/forms/date_datetime.jinja       | 14 ++---
 .../templates/forms/input.jinja               | 24 ++++-----
 .../templates/forms/input_option.jinja        | 17 +++----
 .../templates/forms/js/date_datetime.ts       |  8 ++-
 .../templates/forms/password.jinja            | 10 ++--
 .../templates/forms/radio.jinja               | 47 +++++++++--------
 .../templates/forms/select.jinja              | 51 +++++++++----------
 .../templates/forms/textarea.jinja            | 13 +++--
 .../templates/forms/toggle.jinja              | 19 ++++---
 .../templates/forms/wrappers.jinja            |  8 +--
 .../templates/samples/test_form.jinja         | 10 ++--
 26 files changed, 143 insertions(+), 148 deletions(-)
 create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
index ae918c73..cf0a8e7f 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/home/forms.py
@@ -2,6 +2,8 @@
 
 from django import forms
 
+from {{ cookiecutter.repo_name }}.util.widgets import ToggleWidget
+
 
 class FormTest(forms.Form):
     template_name = "samples/test_form.jinja"
@@ -30,8 +32,10 @@ class FormTest(forms.Form):
     textarea = forms.CharField(widget=forms.Textarea())
 
     checkbox = forms.BooleanField()
-    choice = forms.ChoiceField(
-        choices=[("choice1", "choice 1"), ("choice2", "choice 2")]
+    toggle = forms.BooleanField(widget=ToggleWidget)
+    choice = forms.ChoiceField(choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")])
+    radio_choice = forms.ChoiceField(
+        choices=[("choice1", "Choice 1"), ("choice2", "Choice 2")], widget=forms.RadioSelect
     )
     file = forms.FileField()
 
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
index 5687a02c..68a2bbc1 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/clearable_file_input.html
@@ -1,2 +1,2 @@
 {% from 'forms/clearable_file_input.jinja' import clearable_file_input_widget %}
-{{clearable_file_input_widget(widget, id=widget.attrs.id)}}
+{{clearable_file_input_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
index c99911a6..f7b5cec6 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/date.html
@@ -1,2 +1,2 @@
 {% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
-date_datetime_widget(widget, id=widget.attrs.id, date=True) }}
+date_datetime_widget(widget, date=True) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
index 2f41a013..83668d3a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/datetime.html
@@ -1,2 +1,2 @@
 {% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
-date_datetime_widget(widget, id=widget.attrs.id, true) }}
+date_datetime_widget(widget, time=True, date=True) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
index 3f238ca1..d1e3bfe4 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input.html
@@ -1,2 +1 @@
-{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/input.jinja' import input_widget %} {{input_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html
index b5fd1eab..fa4623b2 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/input_option.html
@@ -1,3 +1,2 @@
-{% from 'forms/input_option.jinja' import widget_to_input_option %}
-
-{{widget_to_input_option(widget)}}
+{% from 'forms/input_option.jinja' import input_option_widget %}
+{{input_option_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html
index cbe086b1..58bdda52 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/password.html
@@ -1,3 +1 @@
-{% from 'forms/password.jinja' import widget_to_password %}
-
-{{widget_to_password(widget)}}
+{% from 'forms/password.jinja' import password_widget %} {{password_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html
index 7c84f965..b2bebd86 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/radio.html
@@ -1,3 +1 @@
-{% from 'forms/radio.jinja' import widget_to_radio %}
-
-{{ widget_to_radio(widget) }}
+{% from 'forms/radio.jinja' import radio_widget %} {{ radio_widget(widget) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
index 98d205a1..9e4c7287 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select.html
@@ -1,2 +1 @@
-{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/select.jinja' import select_widget %} {{select_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html
index fcb3c578..fcde3e36 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/select_option.html
@@ -1,3 +1 @@
-{% from 'forms/select.jinja' import select_option %}
-
-{{ select_option(widget.value, widget.label, widget.attrs) }}
+{% from 'forms/select.jinja' import select_option %} {{ select_option(widget) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
index 81cff22f..2bc85678 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/textarea.html
@@ -1,2 +1 @@
-{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget,
-id=widget.attrs.id)}}
+{% from 'forms/textarea.jinja' import textarea_widget %} {{textarea_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html
new file mode 100644
index 00000000..43e8f25c
--- /dev/null
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/time.html
@@ -0,0 +1,2 @@
+{% from 'forms/date_datetime.jinja' import date_datetime_widget %} {{
+date_datetime_widget(widget, time=True) }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html
index ebc60c3e..9517d1d0 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/django/forms/widgets/toggle.html
@@ -1,3 +1 @@
-{% from 'forms/toggle.jinja' import widget_to_toggle %}
-
-{{widget_to_toggle(widget)}}
+{% from 'forms/toggle.jinja' import toggle_widget %} {{toggle_widget(widget)}}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
index 498dff4a..0980bcae 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
@@ -1,17 +1,8 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% from "forms/wrappers.jinja" import boolean_shell %}
 
 {% macro checkbox_field(field, errors) %}
-    <div class="relative flex items-start{% if errors %} error{% endif %}">
-        <div class="flex items-center h-5">{{ checkbox_widget(field.field.widget, value=field.value(), id=field.id_for_label) }}</div>
-        <div class="ml-3 text-sm">
-            {% if field.label %}{{ field.label_tag() }}{% endif %}
-            {% if field.help_text %}
-            <p class="text-gray-500">
-                {{ field.help_text|safe }}
-            </p>
-            {% endif %}
-        </div>
-    </div>
+    {{ boolean_shell(field, errors, wrapper_classes="gap-4") }}
 {% endmacro %}
 
 {% macro checkbox_widget(widget, value=False, id="") %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
index 99d27595..71f323ff 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/clearable_file_input.jinja
@@ -1,19 +1,20 @@
 {% from 'forms/input.jinja' import input_widget %}
+{% from "forms/wrappers.jinja" import file_shell %}
 {% from 'forms/checkbox.jinja' import checkbox_widget %}
 {% from 'components/util.jinja' import get_event_name_from_id %}
 
 {% macro clearable_file_input_field(field, errors) %}
-    {{ clearable_file_input_widget(field.field.widget, value=field.value(), id=field.id_for_label)}}
+    {{ file_shell(field, errors) }}
 {% endmacro %}
 
-{% macro clearable_file_input_widget(widget, value=None, id="") %}
+{% macro clearable_file_input_widget(widget) %}
     {% set attrs = widget.attrs or {} %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% set event_name = get_event_name_from_id(attrs.id) %}
 
     <div
          class="w-full input flex items-center pb-2">
         {% if is_initial %}
-            {{widget.initial_text}}: <a href="{{value.url}}">{{value}}</a>
+            {{widget.initial_text}}: <a href="{{widget.value.url}}">{{widget.value}}</a>
             {% if not required %}
                 {{ checkbox_widget({"type": "checkbox", "name": widget.checkbox_name, "attrs":{'id': widget.checkbox_id, 'disabled': attrs.disabled}}) }}
                 <label for="{{widget.checkbox_id}}">{{widget.clear_checkbox_label}}</label>
@@ -21,6 +22,6 @@
             <br>
             {{widget.input_text}}:
         {% endif %}
-        {{ input_widget(widget, type="file", input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
+        {{ input_widget(widget, input_classes="flex justify-center text-sm file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-white hover:file:bg-primary-focus") }}
     </div>
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
index 0c070a08..d96e1296 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
@@ -2,24 +2,24 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 
 {% macro datetime_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=True)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {% macro date_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=False, date=True)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {% macro time_field(field, errors) %}
-    {{ input_shell(field, errors, date_datetime_widget(field.field.widget, value=field.value(), id=field.id_for_label, time=True, date=False)) }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 
-{% macro date_datetime_widget(widget, value=None, id="", time=False, date=False) %}
+{% macro date_datetime_widget(widget, time=False, date=False) %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": value, "id": id}) %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
 
-    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
+    <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ widget.value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
          class="w-full input" :class="{'has-focus': active}">
         <input class="w-full rounded-md border border-gray-200 px-3 py-2.5 flatpickr flatpickr-input" x-ref="picker" type="text" {{ attributes(attrs) }}/>
     </div>
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
index 1b42ff4d..4a48664a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input.jinja
@@ -1,34 +1,34 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 {% from "forms/wrappers.jinja" import input_shell %}
 
-{% macro input_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, input_classes=input_classes)) }}
+{% macro input_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro number_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="number", input_classes=input_classes)) }}
+{% macro number_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro email_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(),  id=field.id_for_label, type="email", input_classes=input_classes)) }}
+{% macro email_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
-{% macro url_field(field, errors, input_classes="") %}
-    {{ input_shell(field, errors, input_widget(field.field.widget, value=field.value(), id=field.id_for_label, type="url", input_classes=input_classes)) }}
+{% macro url_field(field, errors) %}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {# password_field has it's own file "password.jinja" #}
 
-{% macro input_widget(widget, value=None, id="", type="text", input_classes="") %}
+{% macro input_widget(widget, input_classes="") %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": value, "type": type, "id": id}) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
     {% set disabled, readonly = widget.attrs.disabled, attrs.readonly %}
     {% set noedit = disabled or readonly %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <input
         x-model.debounce.500ms="value"
         :class="{'has-focus': active}"
-        x-data="input('{{ event_name }}', '{{ value or "" }}')"
+        x-data="input('{{ event_name }}', '{{ widget.value or "" }}')"
         x-ref="input" class="input {{ input_classes or ""}} {{attrs.classes or ""}}" {{ attributes(attrs)}}
     />
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input_option.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input_option.jinja
index 170c1a86..53badd5c 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input_option.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/input_option.jinja
@@ -1,12 +1,7 @@
-{% from 'forms/input.jinja' import input %}
-{% macro input_option(type="text", name=none, value=none, event_name="", color='primary', attrs={}, left_icon='', right_icon='', wrap_label=False, label="") %}
-    {% if wrap_label %}
-        <label{% if attrs.id %} for="{{ attrs.id }}"{% endif %}>
-    {% endif %}
-    {{ input(type=type, name=name, value=value, event_name=event_name, color=color, attrs=attrs, left_icon=left_icon, right_icon=right_icon) }}
-    {% if wrap_label %} {{ label }}</label>{% endif %}
-{% endmacro %}
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_input_option(widget) %}
-    {{ input_option(type=widget.type, name=widget.name, value=widget.value, event_name=widget.attrs.id, attrs=widget.attrs, wrap_label=widget.wrap_label, label=widget.label) }}
+{% from 'forms/input.jinja' import input_widget %}
+
+{% macro input_option_widget(widget) %}
+    {% if widget.wrap_label %}<label{% if widget.attrs.id %} for="{{ widget.attrs.id }}"{% endif %}>{% endif %}
+    {{ input_widget(widget) }}
+    {% if widget.wrap_label %} {{ widget.label }}</label>{% endif %}
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/js/date_datetime.ts b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/js/date_datetime.ts
index bcaca8a6..8ab5d37d 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/js/date_datetime.ts
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/js/date_datetime.ts
@@ -4,7 +4,12 @@ import "flatpickr/dist/themes/light.css";
 import { AlpineDataCallback } from "../../../static_source/js";
 import inputListener from "./common";
 
-const dateTime = (eventName: string, value: string, enableTime: boolean): AlpineComponent => ({
+const dateTime = (
+  eventName: string,
+  value: string,
+  enableTime: boolean,
+  enableCalendar: boolean
+): AlpineComponent => ({
   eventName,
   value,
   enableTime,
@@ -25,6 +30,7 @@ const dateTime = (eventName: string, value: string, enableTime: boolean): Alpine
       enableTime,
       dateFormat,
       defaultDate: value,
+      noCalendar: !enableCalendar,
       onChange: (_, dateString) => {
         this.value = dateString;
       },
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index 2aa1542a..a948db40 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -4,6 +4,8 @@
 {% endmacro %}
 
 {% macro password_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name}) %}
     {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <div
         x-data="password('{{ event_name }}', '{{ widget.value }}', 'password')"
@@ -11,14 +13,14 @@
         :class="active ? 'has-focus' : ''"
         class="w-full z-10 flex items-center relative password"
     >
-    <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(widget.attrs) }} />
-        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
+    <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(attrs) }} />
+        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak
-             x-show="type==='text'">
+             x-show={type==='text'">
             {{ heroicon_outline("eye-slash", class="w-6 h-6") }}
         </div>
-        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
+        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
              @click="type='text'"
              x-show="type==='password'">
             {{ heroicon_outline("eye", class="w-6 h-6") }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
index 631339f5..93cd18fb 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
@@ -1,21 +1,7 @@
-{% macro radio(name="", value="", optgroups="", attrs={}) %}
-    {% if attrs.radio_active_color %}
-        {% set radio_active_color = "{{attrs.radio_active_color}}" %}
-    {% else %}
-        {% set radio_active_color = "primary" %}
-    {% endif %}
-    {% if attrs.radio_class %}
-        {% set radio_class = "{{attrs.radio_class}}" %}
-    {% else %}
-        {% set radio_class = "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white ring-1 ring-gray-600" %}
-    {% endif %}
-    <div class="radio py-4">
-        <div x-data="{value: '{{value.0}}'}" x-radio x-model="value" class="flex flex-col gap-4">
-            {% for group_name, group_choices, group_index in optgroups %}
-                {{ radio_optgroup(group_name, group_choices, group_index, radio_class, radio_active_color) }}
-            {% endfor %}
-        </div>
-    </div>
+{% from "forms/wrappers.jinja" import radio_shell %}
+
+{% macro radio_field(field, errors) %}
+    {{ radio_shell(field, errors) }}
 {% endmacro %}
 
 {% macro radio_optgroup(name, choices, index, radio_class, radio_active_color) %}
@@ -23,7 +9,7 @@
         <div
             x-radio:option
             value="{{choice.value}}"
-            class="flex items-center"
+            class="flex items-center cursor-pointer"
         >
             <input
                 id="{{ choice.attrs.id }}"
@@ -46,6 +32,25 @@
     {% endfor %}
 {% endmacro %}
 
-{% macro widget_to_radio(widget) %}
-    {{ radio(name=widget.name, value=widget.value, optgroups=widget.optgroups, attrs=widget.attrs) }}
+{% macro radio_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
+
+    {% if attrs.radio_active_color %}
+        {% set radio_active_color = "{{attrs.radio_active_color}}" %}
+    {% else %}
+        {% set radio_active_color = "primary" %}
+    {% endif %}
+    {% if attrs.radio_class %}
+        {% set radio_class = "{{attrs.radio_class}}" %}
+    {% else %}
+        {% set radio_class = "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white ring-1 ring-gray-600" %}
+    {% endif %}
+    <div class="radio py-4">
+        <div x-data="{value: '{{widget.value}}'}" x-radio x-model="value" class="flex flex-col gap-4">
+            {% for group_name, group_choices, group_index in widget.optgroups %}
+                {{ radio_optgroup(group_name, group_choices, group_index, radio_class, radio_active_color) }}
+            {% endfor %}
+        </div>
+    </div>
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/select.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/select.jinja
index 36c51937..a2d7c24f 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/select.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/select.jinja
@@ -1,41 +1,36 @@
-{% from 'components/util.jinja' import attributes %}
+{% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 
-{% macro select_option(value, label, attrs) %}
-    <option
-        value="{{ value }}"
-        {{attributes(attrs) }}
-    >
-        {{ label }}
-    </option>
-{% endmacro %}
-
-
-{% macro select_optgroup(name, choices, index) %}
-    {% if name %}<optgroup label="{{ name }}">{% endif %}
-        {% for widget in choices %}
-            {% include widget.template_name %}
-        {% endfor %}
-    {% if name %}</optgroup>{% endif %}
+{% macro choice_field(field, errors) %}
+    {{ field }}
 {% endmacro %}
 
-
-
-{% macro select(name, value, optgroups, attrs, dispatch_name="select", placeholder="") %}
+{% macro select_widget(widget)  %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
 <select
     x-data="select"
     x-ref="select"
-    @change="$dispatch('{{dispatch_name}}')"
-    name="{{ name }}"
-    {{ attributes(attrs) }}>
-    {% for group_name, group_choices, group_index in optgroups %}
-      {{ select_optgroup(group_name, group_choices, group_index) }}
+    @change="$dispatch('{{event_name}}')"
+    {{ attributes(widget.attrs) }}>
+    {% for name, choices, index in widget.optgroups %}
+      {{ select_optgroup(name, choices) }}
     {% endfor %}
 </select>
 {% endmacro %}
 
+{% macro select_option(widget) %}
+    <option
+        value="{{ widget.value }}"
+        {{attributes(widget.attrs) }}
+    >
+        {{ widget.label }}
+    </option>
+{% endmacro %}
 
 
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_select(widget) %}
-    {{select( name=widget.name, value=widget.value, optgroups=widget.optgroups, attrs=widget.attrs )}}
+{% macro select_optgroup(name, choices) %}
+    {% if name %}<optgroup label="{{ name }}">{% endif %}
+        {% for widget in choices %}
+            {{ select_option(widget) }}
+        {% endfor %}
+    {% if name %}</optgroup>{% endif %}
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
index c0cf940e..e6fbcf5a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/textarea.jinja
@@ -1,18 +1,17 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
 
 {% macro textarea_field(field, errors) %}
-    {{ textarea_widget(field.field.widget, value=field.value(), id=field.id_for_label)}}
+    {{ field }}
 {% endmacro %}
 
-{# takes a django widget and calls our textarea macro with the appropriate args #}
-{% macro textarea_widget(widget, value=None, id="") %}
+{% macro textarea_widget(widget) %}
     {% set attrs = widget.attrs %}
-    {% do attrs.update({"type": widget.type, "id": id, "name": widget.name, "value": value or ""}) %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% do attrs.update({"type": widget.type, "name": widget.name, "value": widget.value or ""}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
     <div class="flex flex-col">
     </div>
 
-    <div x-data="input('{{ event_name }}', '{{ value or ""}}')"
+    <div x-data="input('{{ event_name }}', '{{ widget.value or ""}}')"
         :class="active ? 'has-focus' : ''"
         x-ref="input"
          class="w-full input">
@@ -20,7 +19,7 @@
             x-model.debounce.500ms="value"
             {{ attributes(attrs)}}
         >
-            {% if value %}{{value}}{% endif %}
+            {% if widget.value %}{{widget.value}}{% endif %}
         </textarea>
     </div>
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
index 1f5296b5..ab4646a4 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
@@ -1,6 +1,14 @@
 {% from 'components/util.jinja' import attributes %}
+{% from 'forms/wrappers.jinja' import boolean_shell %}
+
+{% macro toggle_field(field, errors) %}
+    {{boolean_shell(field, errors)}}
+{% endmacro %}
+
+{% macro toggle_widget(widget) %}
+    {% set attrs = widget.attrs or {} %}
+    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
 
-{% macro toggle(name="", value=False, attrs={}) %}
     {% if attrs.class %}
         {% set class = "{{attrs.class}}" %}
     {% else %}
@@ -44,11 +52,11 @@
     {% set disabled, readonly = attrs.disabled, attrs.readonly %}
     {% set noedit = disabled or readonly %}
     <div
-        x-data="{ value: {{value|tojson}} }"
+        x-data="{ value: {{widget.value|tojson}} }"
         x-switch:group
         class="{{class}}"
     >
-        <input type="hidden" name="{{name}}" :value="value" {{attributes(attrs)}} />
+        <input type="hidden" :value="value" {{attributes(attrs)}} />
         <button
             x-switch
             x-model="value"
@@ -63,8 +71,3 @@
         </button>
     </div>
 {% endmacro %}
-
-{# takes a django widget and calls our input macro with the appropriate args #}
-{% macro widget_to_toggle(widget) %}
-    {{ toggle(name=widget.name, value=widget.value, attrs=widget.attrs )}}
-{% endmacro %}
\ No newline at end of file
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
index 4535a392..9514c7b1 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
@@ -10,17 +10,17 @@
     {%- endif -%}
 {%- endmacro -%}
 
-{% macro input_shell(field, errors='', rendered="") %}
+{% macro input_shell(field, errors='') %}
     <div class="field {% if errors %}error {% endif %}{{ input_widget_hook(field) }}">
-            {{ rendered }}
+            {{ field }}
             {% if field.label %}{{ field.label_tag() }}{% endif %}
             <div class="right-icon {% if errors is not none %}hidden{% endif %}">
                 {{ heroicon_solid("exclamation-circle", class="text-error")}}
             </div>
         </div>
 {% endmacro %}
-{% macro boolean_shell(field, errors='') %}
-    <div class="boolean-field flex items-center {% if errors %} error{% endif %}">
+{% macro boolean_shell(field, errors='', wrapper_classes="") %}
+    <div class="boolean-field flex items-center {% if errors %} error{% endif %} {{wrapper_classes}}">
         {% if field.label %}{{ field.label_tag() }}{% endif %}
         {{ field }}
     </div>
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja
index 61594371..14511335 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/samples/test_form.jinja
@@ -1,5 +1,5 @@
-
 {% from 'forms/checkbox.jinja' import checkbox_field %}
+{% from 'forms/radio.jinja' import radio_field %}
 {% from 'forms/input.jinja' import input_field, number_field, email_field, url_field %}
 {% from 'forms/textarea.jinja' import textarea_field %}
 {% from 'forms/date_datetime.jinja' import datetime_field, date_field, time_field %}
@@ -7,7 +7,7 @@
 {% from 'forms/password.jinja' import password_field %}
 {% from 'forms/select.jinja' import choice_field %}
 {% from 'forms/field.jinja' import field as f %}
-{% from 'forms/checkbox.jinja' import checkbox_widget %}
+{% from 'forms/toggle.jinja' import toggle_field %}
 
 <div class="w-80 flex flex-col gap-4">
     {% for field, error in fields %}
@@ -35,13 +35,17 @@
             {{ url_field(field, errors) }}
         {% elif field.name in ["choice"] %}
             {{ choice_field(field, errors) }}
+        {% elif field.name in ["radio_choice"] %}
+            {{ radio_field(field, errors) }}
         {% elif field.name in ["file"] %}
             {{ clearable_file_input_field(field, errors) }}
+        {% elif field.name in ["toggle"] %}
+            {{ toggle_field(field, errors) }}
         {% else %}
             <span class="text-green-500 flex gap-2">
                 Uncaught field
                 {{field.name}}
-                {{ field.widget_type }}
+                {{ field.widget_type }}k
                 {{ field.field.widget.input_type }}
             </span>
         {% endif %}

From dff999fc9b15541473fd78eec42716ccd2a76d94 Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 10:43:00 -0400
Subject: [PATCH 5/8] small fixes

---
 .../templates/forms/checkbox.jinja                        | 8 ++++----
 .../templates/forms/date_datetime.jinja                   | 2 +-
 .../templates/forms/password.jinja                        | 2 +-
 .../templates/forms/radio.jinja                           | 4 ++--
 .../templates/forms/toggle.jinja                          | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
index 0980bcae..9be2b6f5 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/checkbox.jinja
@@ -5,14 +5,14 @@
     {{ boolean_shell(field, errors, wrapper_classes="gap-4") }}
 {% endmacro %}
 
-{% macro checkbox_widget(widget, value=False, id="") %}
+{% macro checkbox_widget(widget) %}
     {% set attrs = widget.attrs %}
-    {% do attrs.update({"name": widget.name, "value": value, "type": widget.type}) %}
-    {% set event_name = get_event_name_from_id(id) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or "", "type": widget.type}) %}
+    {% set event_name = get_event_name_from_id(widget.attrs.id) %}
 
     <input
         type="checkbox"
-        x-data="input('{{ event_name }}', '{{ value or "" }}')"
+        x-data="input('{{ event_name }}', '{{ widget.value or "" }}')"
         x-ref="input" class="input {{ input_classes or ""}} {{attrs.class or ""}}" {{ attributes(attrs)}}
     />
 {% endmacro %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
index d96e1296..fc20a5aa 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/date_datetime.jinja
@@ -16,7 +16,7 @@
 
 {% macro date_datetime_widget(widget, time=False, date=False) %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": widget.value}) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or ""}) %}
     {% set event_name = get_event_name_from_id(widget.attrs.id) %}
 
     <div @click="picker.open()" x-data="dateTime('{{ event_name }}', '{{ widget.value or "" }}', {{ 'true' if time else 'false' }}, {{ 'true' if date else 'false' }})"
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index a948db40..9070a9a2 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -17,7 +17,7 @@
         <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak
-             x-show={type==='text'">
+             x-show="type==='text'">
             {{ heroicon_outline("eye-slash", class="w-6 h-6") }}
         </div>
         <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
index 93cd18fb..52f984cf 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/radio.jinja
@@ -34,7 +34,7 @@
 
 {% macro radio_widget(widget) %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or "", "type": widget.type}) %}
 
     {% if attrs.radio_active_color %}
         {% set radio_active_color = "{{attrs.radio_active_color}}" %}
@@ -47,7 +47,7 @@
         {% set radio_class = "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-white ring-1 ring-gray-600" %}
     {% endif %}
     <div class="radio py-4">
-        <div x-data="{value: '{{widget.value}}'}" x-radio x-model="value" class="flex flex-col gap-4">
+        <div x-data="{value: {{ widget.value or [] }}}" x-radio x-model="value" class="flex flex-col gap-4">
             {% for group_name, group_choices, group_index in widget.optgroups %}
                 {{ radio_optgroup(group_name, group_choices, group_index, radio_class, radio_active_color) }}
             {% endfor %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
index ab4646a4..32033187 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/toggle.jinja
@@ -7,7 +7,7 @@
 
 {% macro toggle_widget(widget) %}
     {% set attrs = widget.attrs or {} %}
-    {% do attrs.update({"name": widget.name, "value": widget.value, "type": widget.type}) %}
+    {% do attrs.update({"name": widget.name, "value": widget.value or "", "type": widget.type}) %}
 
     {% if attrs.class %}
         {% set class = "{{attrs.class}}" %}
@@ -52,7 +52,7 @@
     {% set disabled, readonly = attrs.disabled, attrs.readonly %}
     {% set noedit = disabled or readonly %}
     <div
-        x-data="{ value: {{widget.value|tojson}} }"
+        x-data="{ value: '{{widget.value}}' }"
         x-switch:group
         class="{{class}}"
     >

From abaf51363d129e16003d11b33d1cfba1738344c4 Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 10:58:27 -0400
Subject: [PATCH 6/8] remove old vite asset

---
 .../dtl_templates/admin/base_site.html                        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
index e865c4a9..8f61e583 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/dtl_templates/admin/base_site.html
@@ -1,6 +1,6 @@
 {% extends "admin/base_site.html" %} {% load django_vite %} {% block extrahead %} {{
-block.super }} {% vite_hmr_client %} {% vite_asset 'js/forms.ts' %} {% vite_asset
-'js/main.ts' %} {% vite_asset 'css/tailwind.js' %}
+block.super }} {% vite_hmr_client %} {% vite_asset 'js/main.ts' %} {% vite_asset
+'css/tailwind.js' %}
 <style>
   [x-cloak] {
     display: none !important;

From e151d1e6f5610e4c163912e62a8a90dd31cfd171 Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 11:23:24 -0400
Subject: [PATCH 7/8] include field macro, update login

---
 .../templates/account/login_form.jinja        |  4 +-
 .../templates/forms/field.jinja               | 92 ++++++++-----------
 2 files changed, 38 insertions(+), 58 deletions(-)

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/login_form.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/login_form.jinja
index d633c912..24ac781a 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/login_form.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/account/login_form.jinja
@@ -1,10 +1,10 @@
 {% from 'forms/field.jinja' import field as f %}
-{% from 'forms/checkbox.jinja' import checkbox %}
+{% from 'forms/checkbox.jinja' import checkbox_field %}
 <div class="form-wrapper justify-between mb-6">
     {{ errors }}
     {% for field, errors in fields %}
         {% if field.name == 'remember' %}
-            {{ checkbox(field) }}
+            {{ checkbox_field(field, errors) }}
         {% else %}
             {{ f(field, errors) }}
         {% endif %}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/field.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/field.jinja
index abda084b..4e8b1dcd 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/field.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/field.jinja
@@ -1,60 +1,40 @@
-{# different widgets could use totally different base styles, leave a hook to control #}
-{# or Sometimes third party controls come with their own styling, so for these widgets do not style #}
-{%- macro input_widget_hook(field) -%}
-    {%- if field.widget_type == "select" -%}
-        select
-    {%- elif field.widget_type == "radioselect" -%}
-        radio
-    {%- elif field.widget_type == "textarea" -%}
-        textarea
-    {%- else -%}
-        input
-    {%- endif -%}
-{%- endmacro -%}
-{% macro input_shell(field, errors='') %}
-    <div class="field {% if errors %}error {% endif %}{{ input_widget_hook(field) }}">
-            {{ field }}
-            {% if field.label %}{{ field.label_tag() }}{% endif %}
-            <div class="right-icon {% if errors is not none %}hidden{% endif %}">
-                {{ heroicon_solid("exclamation-circle", class="text-error")}}
-            </div>
-        </div>
-{% endmacro %}
-{% macro boolean_shell(field, errors='') %}
-    <div class="boolean-field flex items-center {% if errors %} error{% endif %}">
-        {% if field.label %}{{ field.label_tag() }}{% endif %}
-        {{ field }}
-    </div>
-{% endmacro %}
-{% macro radio_shell(field, errors='') %}
-    <div class="radio-field {% if errors %} error{% endif %}">
-        <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
-    </div>
-{% endmacro %}
-{% macro file_shell(field, errors='') %}
-    <div class="file-field {% if errors %} error{% endif %}">
-        {% if field.label %}{{ field.label_tag() }}{% endif %}
-        <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
-    </div>
-{% endmacro %}
+{% from "forms/checkbox.jinja" import checkbox_field %}
+{% from "forms/radio.jinja" import radio_field %}
+{% from "forms/date_datetime.jinja" import datetime_field, time_field, date_field %}
+{% from "forms/clearable_file_input.jinja" import clearable_file_input_field %}
+{% from "forms/input.jinja" import input_field, number_field, email_field, url_field %}
+{% from "forms/password.jinja" import password_field %}
+{% from "forms/textarea.jinja" import textarea_field %}
+{% from "forms/toggle.jinja" import toggle_field %}
+
 {% macro field(field, errors='', layout_classes='w-full') %}
-    {% set wrapper_element = "fieldset" if field.widget_type == "radioselect" else "div" %}
-    <{{ wrapper_element }} class="{{ layout_classes }} {{ field.css_classes() }}">
-    {% if field.widget_type == "toggle" %}
-        {{ boolean_shell(field, errors)}}
-    {% elif field.widget_type in ["radioselect", "checkboxselectmultiple"] %}
-        <legend>
-            {{ field.label }}
-        </legend>
-        {{ radio_shell(field, errors)}}
-    {% elif "file" in field.widget_type %}
-        {{ file_shell(field, errors)}}
+    {% if field.widget_type == "text" %}
+        {{ input_field(field, errors) }}
+    {% elif field.widget_type == "number" %}
+        {{ number_field(field, errors) }}
+    {% elif field.widget_type == "url" %}
+        {{ url_field(field, errors) }}
+    {% elif field.widget_type == "email" %}
+        {{ email_field(field, errors) }}
+    {% elif field.widget_type == "password" %}
+        {{ password_field(field, errors) }}
+    {% elif field.widget_type == "checkbox" %}
+        {{ checkbox_field(field, errors) }}
+    {% elif field.widget_type == "textarea" %}
+        {{ textarea_field(field, errors) }}
+    {% elif field.widget_type == "toggle" %}
+        {{ toggle_field(field, errors) }}
+    {% elif field.widget_type == "radioselect" %}
+        {{ radio_field(field, errors) }}
+    {% elif field.widget_type == "datetime" %}
+        {{ datetime_field(field, errors) }}
+    {% elif field.widget_type == "date" %}
+        {{ date_field(field, errors) }}
+    {% elif field.widget_type == "time" %}
+        {{ time_field(field, errors) }}
+    {% elif field.widget_type == "clearablefile" %}
+        {{ clearable_file_input_field(field, errors) }}
     {% else %}
-        {{ input_shell(field, errors)}}
-    {% endif %}
-    <div class="text-error {% if errors is not none %}hidden{% endif %}">{{ errors }}</div>
-    {% if field.help_text %}
-        <p class="text-sm text-gray-500">{{ field.help_text|safe }}</p>
+        <span class="text-red-50">{{ field.widget_type }} not handled by default field macro</span>
     {% endif %}
-    </{{ wrapper_element }}>
 {% endmacro %}

From 5526c3e3eb5ddc62e0377c8406963d9866955b9a Mon Sep 17 00:00:00 2001
From: alligatortower <mrweed@gmail.com>
Date: Wed, 4 Oct 2023 12:31:55 -0400
Subject: [PATCH 8/8] standardize errors

---
 .../templates/forms/password.jinja            |  8 ++++--
 .../templates/forms/wrappers.jinja            | 28 +++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
index 9070a9a2..bad9c246 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/password.jinja
@@ -1,6 +1,8 @@
 {% from 'components/util.jinja' import attributes, get_event_name_from_id %}
+{% from "forms/wrappers.jinja" import input_shell %}
+
 {% macro password_field(field, errors) %}
-    {{ field }}
+    {{ input_shell(field, errors) }}
 {% endmacro %}
 
 {% macro password_widget(widget) %}
@@ -14,13 +16,13 @@
         class="w-full z-10 flex items-center relative password"
     >
     <input x-model.debounce.500ms="value" :type="type" class="!pr-10" {{ attributes(attrs) }} />
-        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
+        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
              @click="type='password'"
              x-cloak
              x-show="type==='text'">
             {{ heroicon_outline("eye-slash", class="w-6 h-6") }}
         </div>
-        <div class="absolute inset-y-0 right-0 flex items-center cursor-pointer"
+        <div class="absolute inset-y-0 right-4 flex items-center cursor-pointer"
              @click="type='text'"
              x-show="type==='password'">
             {{ heroicon_outline("eye", class="w-6 h-6") }}
diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
index 9514c7b1..ee44251d 100644
--- a/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
+++ b/{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/forms/wrappers.jinja
@@ -10,29 +10,47 @@
     {%- endif -%}
 {%- endmacro -%}
 
+{% macro field_errors(errors) %}
+    <div class="text-error {% if errors is not none %}hidden{% endif %}">{{ errors }}</div>
+{% endmacro %}
+{% macro help_text(field) %}
+    {% if field.help_text %}
+        <p class="text-sm text-gray-500">{{ field.help_text|safe }}</p>
+    {% endif %}
+{% endmacro %}
+
+
 {% macro input_shell(field, errors='') %}
     <div class="field {% if errors %}error {% endif %}{{ input_widget_hook(field) }}">
-            {{ field }}
-            {% if field.label %}{{ field.label_tag() }}{% endif %}
-            <div class="right-icon {% if errors is not none %}hidden{% endif %}">
-                {{ heroicon_solid("exclamation-circle", class="text-error")}}
-            </div>
+        {{ field }}
+        {% if field.label %}{{ field.label_tag() }}{% endif %}
+        <div class="right-icon {% if errors is not none %}hidden{% endif %}">
+            {{ heroicon_solid("exclamation-circle", class="text-error")}}
         </div>
+    </div>
+    {{ field_errors(errors) }}
+    {{ help_text(field) }}
 {% endmacro %}
 {% macro boolean_shell(field, errors='', wrapper_classes="") %}
     <div class="boolean-field flex items-center {% if errors %} error{% endif %} {{wrapper_classes}}">
         {% if field.label %}{{ field.label_tag() }}{% endif %}
         {{ field }}
     </div>
+    {{ field_errors(errors) }}
+    {{ help_text(field) }}
 {% endmacro %}
 {% macro radio_shell(field, errors='') %}
     <div class="radio-field {% if errors %} error{% endif %}">
         <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
     </div>
+    {{ field_errors(errors) }}
+    {{ help_text(field) }}
 {% endmacro %}
 {% macro file_shell(field, errors='') %}
     <div class="file-field {% if errors %} error{% endif %}">
         {% if field.label %}{{ field.label_tag() }}{% endif %}
         <div class="{{ input_widget_hook(field) }}">{{ field }}</div>
     </div>
+    {{ field_errors(errors) }}
+    {{ help_text(field) }}
 {% endmacro %}