Adds starter HTML form for Engagement Strategy create form

1 files changed, 47 insertions, 9 deletions

diff --git a/engagements/templates/engagements/engagement_strategy_form.html b/engagements/templates/engagements/engagement_strategy_form.html
index 6b2f26c..f0eb414 100644
--- a/engagements/templates/engagements/engagement_strategy_form.html
+++ b/engagements/templates/engagements/engagement_strategy_form.html
@@ -1,17 +1,55 @@
 {% extends "core/base.html" %}}
+{% load widget_tweaks %}
 
-{% block content %}
+{% block title %}Create new Engagement Strategy{% endblock title %}
 
-<h1>Create Engagement Strategy</h1>
+{% block content %}
 
-<div class="row w-full">
-   <div>
-        <form target="{% url "engagements:es-create" %}" method="post">
+<div class="container mx-auto py-8">
+    <div class="bg-white mx-auto shadow-md rounded px-8 pt-6 mb-4 relative w-2/3">
+        <a href="{{ request.META.HTTP_REFERER }}" class="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-200 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+            </svg>
+        </a>
+        <h2 class="text-2xl font-bold mb-6">Create new Engagement Strategy</h2>
+        <form target="{% url "engagements:es-create" %}" method="post" class="space-y-6">
             {% csrf_token %}
-            {{ form.as_p }}
-            <button type="submit">Create</button>
+            {% for field in form %}
+            <div class="my-2">
+                <div>
+                    <label for="{{ field.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2">
+                        {{ field.label }}
+                    </label>
+                </div>
+                <div>
+                    {% render_field field class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                    {% for error in field.errors %}
+                    {{ field }}
+                    {% endfor %}
+                </div>
+                {% if field.help_text %}
+                <div class="flex items-end mb-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke-width="1.0" stroke="currentColor" class="size-4 text-gray-500 mr-2">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
+                    </svg>
+                    <p class="mt-2 text-xs text-gray-500">{{ field.help_text }}</p>
+                </div>
+                {% endif %}
+            </div>
+            {% endfor %}
+            <div class="mt-6">
+                <button type="submit"
+                    class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Submit
+                </button>
+            </div>
+
         </form>
-   </div>
+    </div>
 </div>
 
-{% endblock content %}
+    {% endblock content %}