From f518e98aba9dd6820c992d6900530871be596cdb Mon Sep 17 00:00:00 2001
From: Patrick Mayr <patrick@fet.at>
Date: Sat, 19 Mar 2022 21:08:10 +0000
Subject: [PATCH] add tasks redesign

---
 fet2020/tasks/views.py                        |  18 +-
 .../templates/tasks/attachment_create.html    |  43 ++--
 fet2020/templates/tasks/index.html            | 199 ++++++++++--------
 fet2020/templates/tasks/task_create.html      |  69 ++++--
 fet2020/templates/tasks/task_detail.html      |  82 ++++----
 fet2020/templates/tasks/task_update.html      |  50 +++--
 6 files changed, 259 insertions(+), 202 deletions(-)

diff --git a/fet2020/tasks/views.py b/fet2020/tasks/views.py
index b4ce7acf..2896b9a4 100644
--- a/fet2020/tasks/views.py
+++ b/fet2020/tasks/views.py
@@ -51,11 +51,11 @@ def index(request):
             else:
                 show_all_tasks = False
 
-        if "btn_state" in request.GET:
-            if request.GET["btn_state"] == "open":
-                completed = False
-            elif request.GET["btn_state"] == "close":
-                completed = True
+        if "open_tasks" in request.GET:
+            completed = False
+
+        if "closed_tasks" in request.GET:
+            completed = True
 
     tasks = Task.taskmanager.get_tasks(
         user=request.user.id,
@@ -65,12 +65,6 @@ def index(request):
     )
     tasklists = TaskList.objects.all()
 
-    # TODO: very bad solution... try to do it better!
-    if completed == False:
-        completed = "open"
-    else:
-        completed = "close"
-
     context = {
         "tasks": tasks,
         "tasklists": tasklists,
@@ -183,7 +177,7 @@ class TaskDetail(LoginRequiredMixin, DetailView):
 
 class DocumentCreate(LoginRequiredMixin, CreateView):
     model = Document
-    template_name = "tasks/docu_create.html"
+    template_name = "tasks/attachment_create.html"
     form_class = DocumentCreateForm
 
     task_id = None
diff --git a/fet2020/templates/tasks/attachment_create.html b/fet2020/templates/tasks/attachment_create.html
index 447b9270..959ac037 100644
--- a/fet2020/templates/tasks/attachment_create.html
+++ b/fet2020/templates/tasks/attachment_create.html
@@ -1,24 +1,27 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
+
 {% block content %}
-
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:task-detail' task_id %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neues Etherpad hinzufügen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Etherpad hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
-            </form>
-        </div>
-    </div>
-</div>
 
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">Titel</span>
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Datum</span>
+                <input type="date" id="id_date" name="date" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+            </label>
+
+            <input type="hidden" name="task" value="{{ task_id }}" id="id_task">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
+        </form>
+    </div>
+</main>
 {% endblock %}
diff --git a/fet2020/templates/tasks/index.html b/fet2020/templates/tasks/index.html
index 4a8c23c5..05032e63 100644
--- a/fet2020/templates/tasks/index.html
+++ b/fet2020/templates/tasks/index.html
@@ -1,92 +1,121 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:task-create' %}">neuen Task hinzufügen</a>
-        </div>
-    </div>
-    <hr>
-
-    <form action="" method="get">
-        <div class="grid-x grid-margin-x">
-            <div class="cell large-4 medium-4 small-12">
-                <label>Task-Gruppe</label>
-                <select id="id_tasklist" name="tasklist">
-                    <option value="all" {% if not show_tasklist %}selected{% endif %}>alle Task-Gruppen</option>
-                    {% for elem in tasklists %}
-                        <option value="{{ elem.id }}" {% if show_tasklist == elem.id %}selected{% endif %}>{{ elem.name }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-
-            <div class="cell large-4 medium-4 small-12">
-                <label>Tasks</label>
-                <select id="id_task" name="tasks">
-                    <option value="own" {% if not show_all_tasks %}selected{% endif %}>eigenen Tasks</option>
-                    <option value="all" {% if show_all_tasks %}selected{% endif %}>alle Tasks</option>
-                </select>
-            </div>
-
-            <div class="cell large-4 medium-4 small-12 align-self-bottom">
-                <button type="submit" class="button" name="btn_state" value="{{ completed }}">Anzeigen</button>
-            </div>
-
-            <div class="cell large-4 medium-4 small-12 align-self-bottom">
-                <button type="submit" class="alert button" name="btn_state" value="open">Offene Tasks</button>
-            </div>
-            <div class="cell large-4 medium-4 small-12 align-self-bottom">
-                <button type="submit" class="success button" name="btn_state" value="close">Abgeschlossene Tasks</button>
-            </div>
-        </div>
-    </form>
-
-    <hr>
-
-    {% if tasks %}
-        <form action="" method="post">
-        {% csrf_token %}
-
-            <div class="grid-x grid-margin-x">
-                {% regroup tasks by task_list as section_list %}
-                {% for group in section_list %}
-
-                    <div class="cell">
-                    <ul class="no-bullet">
-                        <h3>{{ group.grouper }}</h3>
-
-                        {% for task in group.list %}
-                            <div class="grid-x">
-                                <div class="cell medium-3 large-3 small-10">
-                                    <input type="checkbox" name="checkbox" value="{{ task.id }}" {% if task.completed %} checked {% endif %}>
-                                    <a href="{% url 'tasks:task-detail' task.id %}">{{ task.title }}</a>
-                                </div>
-
-                                <div class="cell medium-3 large-3 small-10">
-                                    {% if task.due_date %}
-                                        Fällig bis: {{ task.due_date|date:"d.m.Y" }}
-                                    {% endif %}
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </ul>
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Tasks</h1>
+    <div class="sm:flex sm:flex-row-reverse justify-center">
+        <aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
+            <div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
+                x-show="showModal || $screen('sm')"
+                x-transition:enter="transition duration-300 ease-out"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="transition duration-150 ease-in"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+            >
+                <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
+                    @click.outside="showModal = ! showModal"
+                    x-show="showModal || $screen('sm')"
+                    x-transition:enter="transition transform ease-out duration-300"
+                    x-transition:enter-start="scale-110 opacity-0"
+                    x-transition:enter-end="scale-100 opacity-100"
+                    x-transition:leave="transition transform ease-in duration-150"
+                    x-transition:leave-start="scale-100 opacity-100"
+                    x-transition:leave-end="scale-110 opacity-0"
+                >
+                    <div class="flex justify-between items-center mb-2">
+                        <h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm:section-title-margins sm:w-full">
+                            <span class="mr-1 text-gray-400 sm:hidden">
+                                <i class="fas fa-filter"></i>
+                            </span>
+                            Auswahl einschränken
+                        </h2>
+                        <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
+                            <i class="far fa-times"></i>
+                        </div>
                     </div>
-                {% endfor %}
-
-                <div class="cell">
-                <ul class="no-bullet">
-                    <input type="submit" class="button" name="btn_checkbox" value="Task abschließen">
-                </ul>
+                    <form action="" method="GET" class="grid grid-cols-1 gap-2 sm:gap-4">
+                        <label class="block">
+                            <span class="text-gray-700 dark:text-gray-200">Task-Gruppe</span>
+                            <select id="id_tasklist" name="tasklist" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                                <option value="all" {% if not show_tasklist %}selected{% endif %}>alle Task-Gruppen</option>
+                                {% for elem in tasklists %}
+                                    <option value="{{ elem.id }}" {% if show_tasklist == elem.id %}selected{% endif %}>{{ elem.name }}</option>
+                                {% endfor %}
+                            </select>
+                        </label>
+                        <label>
+                            <span class="text-gray-700 dark:text-gray-200">Tasks</span>
+                            <select id="id_task" name="tasks" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                                <option value="own" {% if not show_all_tasks %}selected{% endif %}>eigenen Tasks</option>
+                                <option value="all" {% if show_all_tasks %}selected{% endif %}>alle Tasks</option>
+                            </select>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" name="open_tasks" {% if not completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                            <span class="ml-2 text-gray-700 dark:text-gray-200">Offene Tasks</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" name="closed_tasks" {% if completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                            <span class="ml-2 text-gray-700 dark:text-gray-200">Geschlossene Tasks</span>
+                        </label>
+                        <input type="submit" class="block btn btn-primary" value="Anzeigen">
+                    </form>
                 </div>
             </div>
-        </form>
-    {% else %}
-        <div class="grid-x">
-            <div class="cell">
+            <button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
+                @click="showModal = true"
+                x-show="!showModal"
+                x-transition:enter="transition duration-100 ease-in"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="transition duration-100 ease-out"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+            >
+                <i class="fas fa-filter p-2"></i>
+            </button>
+        </aside>
+
+        <section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4 text-gray-700 dark:text-gray-200">
+            {% if tasks %}
+                <form action="" method="post">
+                {% csrf_token %}
+                {% regroup tasks by task_list as section_list %}
+                {% for group in section_list %}
+                    <h3>{{ group.grouper }}</h3>
+
+                    {% for task in group.list %}
+                        <label class="flex justify-between items-start">
+                            <div class="inline-flex items-baseline mr-2">
+                                <input type="checkbox" name="checkbox" value="{{ task.id }}" {% if task.completed %}checked{% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                                <span class="ml-2">{{ task.title }} <a href="{% url 'tasks:task-detail' task.id %}" class="inline-block text-proprietary dark:text-proprietary-lighter">Link <i class="fa-solid fa-link"></i></a></span>
+                            </div>
+                            {% if task.due_date %}
+                                <div class="inline-flex gap-2 flex-shrink-0">
+                                    <span class="px-2 py-0.5 rounded-full text-sm font-medium text-proprietary dark:text-blue-100 bg-blue-200 dark:bg-proprietary-dark"><i class="fa-solid fa-hourglass mr-1"></i>{{ task.due_date|date:"d.m.Y" }}</span>
+                                </div>
+                            {% endif %}
+                        </label>
+                    {% endfor %}
+
+                    <div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
+                        <input type="submit" name="btn_checkbox" value="Tasks abschließen" class="btn btn-error block md:flex-grow lg:flex-grow-0">
+
+                        <a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
+                    </div>
+                {% endfor %}
+                </form>
+            {% else %}
                 keine Tasks in dieser Liste für dich.
-            </div>
-        </div>
-    {% endif %}
-</div>
+
+                <div class="flex flex-col md:flex-row gap-y-2 md:gap-y-0 md:gap-x-2 lg:justify-end mt-4">
+                    <a href="{% url 'tasks:task-create' %}" class="btn btn-primary block md:flex-grow lg:flex-grow-0"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
+                </div>
+        {% endif %}
+        </section>
+    </div>
+</main>
 {% endblock %}
diff --git a/fet2020/templates/tasks/task_create.html b/fet2020/templates/tasks/task_create.html
index 68ead194..19ae706a 100644
--- a/fet2020/templates/tasks/task_create.html
+++ b/fet2020/templates/tasks/task_create.html
@@ -1,26 +1,53 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:index' %}">Zurück</a>
-        </div>
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'admin:tasks_tasklist_add' %}">Task-Gruppe erstellen</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neuen Task hinzufügen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Task hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
-            </form>
-        </div>
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">Titel</span>
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">Kürzel für den URL-Link</span>
+                <input type="text" id="id_shortterm" name="shortterm" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Task-Gruppe</span>
+                <select id="id_task_list" name="task_list" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+                    {% for elem in form.task_list %}
+                        {% if forloop.first %}
+                            <option value="">---------</option>
+                        {% else %}
+                            {{ elem }}
+                        {% endif %}
+                    {% endfor %}
+                </select>
+            </label>
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Fähigkeitsdatum</span>
+                <input type="date" id="id_due_date" name="due_date" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+            </label>
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Zuweisen an</span>
+                <select id="id_assigned_to" name="assigned_to" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                    {% for elem in form.assigned_to %}
+                        {% if forloop.first %}
+                            <option value="">Alle</option>
+                        {% else %}
+                            {{ elem }}
+                        {% endif %}
+                    {% endfor %}
+ 
+                </select>
+            </label>
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
+        </form>
+
+        <a href="{% url 'admin:tasks_tasklist_add' %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Task-Gruppe erstellen</a>
     </div>
-</div>
+</main>
 {% endblock %}
diff --git a/fet2020/templates/tasks/task_detail.html b/fet2020/templates/tasks/task_detail.html
index c40b3961..e3910eef 100644
--- a/fet2020/templates/tasks/task_detail.html
+++ b/fet2020/templates/tasks/task_detail.html
@@ -1,52 +1,48 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:index' %}">Zurück</a>
-        </div>
-        {% if topic %}
-            <div class="cell large-3 medium-4 small-12">
-                <a class="button" href="{% url 'intern:topic' topic.slug %}">Zu {{ topic.title }}</a>
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Task-Detailansicht</h1>
+    <div class="flex flex-col gap-y-4 sm:gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+        <aside class="flex gap-2 flex-wrap align-bottom text-sm sm:text-base text-gray-600 dark:text-gray-300">
+            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'tasks:index' %}">{{ task.task_list.name }}</a>
+            <span><i class="fa-solid fa-angle-right"></i></span>
+            <span class="cursor-default">{{ task.title }}</span>
+        </aside>
+        {% if task.note %}
+            <div class="db-page-content-left">
+                {{ task.note }}
             </div>
         {% endif %}
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:task-update' task.id %}">Task bearbeiten</a>
-        </div>
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:docu-create' task.id %}">Etherpad hinzufügen</a>
-        </div>
-    </div>
-    <hr>
 
-    <div class="grid-x padding-bottom-1">
-        <div class="cell">
-            <h2>{{ task.title }}</h2>
+        {% if task.due_date %}
+            <div class="text-right -mt-6">
+                {{ task.due_date }}
+            </div>
+        {% endif %}
 
-            <p>Fällig am: {{ task.due_date }}</p>
-
-            {% if task.completed %}
-            <p>Erledigt am: {{ task.completed_date }}</p>
-            {% endif %}
-
-            {% if task.note %}
-                {{ task.note }}
-            {% endif %}
-            
-            {% for document in documents %}
-                <a href="{{ document.etherpad_key }}">
-                    <div class="news-hero-compact">
-                        <div class="news-hero-compact-text">
-                            <p style="margin-bottom: 0rem;">{{ document.title }}</p>
-                        </div>
-                        <div class="news-hero-compact-right">
-                            <p style="margin-bottom: 0rem;">{{ document.date }}</p>
-                        </div>
-                    </div>
+        <section>
+            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
+                <a href="{% url 'tasks:docu-create' task.id %}" class="flex justify-between">
+                    <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-plus fa-fw mr-1"></i>Neues Etherpad erstellen</h2>
                 </a>
-            {% endfor %}
-        </div>
+
+                {% for document in documents %}
+                    <a href="{{ document.etherpad_key }}" class="flex justify-between items-center gap-2">
+                        <h3 class="text-gray-800 dark:text-gray-200">{{ document.title }}</h2>
+                        <span class=" text-gray-700 dark:text-gray-300">{{ document.date }}<span class="ml-2 hidden sm:inline-block"><i class="fas fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
+                    </a>
+                {% endfor %}
+
+            </div>
+        </section>
+
+        {% if topic %}
+            <a href="{% url 'intern:topic' topic.slug %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Zu {{ topic.title }}</a>
+        {% endif %}
+
+        <a href="{% url 'tasks:task-update' task.id %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Task bearbeiten</a>
     </div>
-</div>
+</main>
 {% endblock %}
diff --git a/fet2020/templates/tasks/task_update.html b/fet2020/templates/tasks/task_update.html
index 1b1c9dbc..bdbd451d 100644
--- a/fet2020/templates/tasks/task_update.html
+++ b/fet2020/templates/tasks/task_update.html
@@ -1,26 +1,34 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'tasks:task-detail' task.id %}">Zurück</a>
-        </div>
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'admin:tasks_task_change' task.id %}">Task im Admin bearbeiten</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Task '{{ task.title }}' bearbeiten</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Task '{{ task.title }}' bearbeiten</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Bearbeiten">
-            </form>
-        </div>
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Zuweisen an</span>
+                <select id="id_assigned_to" name="assigned_to" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                    {% for elem in form.assigned_to %}
+                        {% if forloop.first %}
+                            <option value="">Alle</option>
+                        {% else %}
+                            {{ elem }}
+                        {% endif %}
+                    {% endfor %}
+                </select>
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">Fähigkeitsdatum</span>
+                <input type="date" id="id_due_date" name="due_date" value="{{ task.due_date|date:"Y-m-d" }}" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+            </label>
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
+        </form>
+
+        <a href="{% url 'admin:tasks_task_change' task.id %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Task im Admin bearbeiten</a>
     </div>
-</div>
+</main>
 {% endblock %}