Add worklog form fields and enhance templates for better data handling

- Introduced worklog form fields for start and end timestamps, contact, work item, completion status, follow-up, analysis, and notes.
- Updated worklog.html to include a save button and improved layout.
- Enhanced datalist.js for dynamic data binding between input fields and datalists.
- Refactored inventory.html and user.html for consistency and readability.
- Added form.html template for future use.

routes.py

@@ -63,6 +63,17 @@ worklog_headers = {
     "Quick Analysis?": lambda i: {"text": i.analysis, "type": "bool", "html": checked_box if i.analysis else unchecked_box},
 }
 
+worklog_form_fields = {
+    "start": lambda log: {"label": "Start Timestamp", "type": "date", "value": log.start_time.date().isoformat() if log.start_time else ""},
+    "end": lambda log: {"label": "End Timestamp", "type": "date", "value": log.end_time.date().isoformat() if log.end_time else ""},
+    "contact": lambda log: {"label": "Contact", "type": "datalist", "value": log.contact.full_name if log.contact else "", "list": "contactList"},
+    "item": lambda log: {"label": "Work Item", "type": "datalist", "value": log.work_item.identifier if log.work_item else "", "list": "itemList"},
+    "complete": lambda log: {"label": "Complete?", "type": "checkbox", "value": log.complete},
+    "followup": lambda log: {"label": "Follow Up?", "type": "checkbox", "value": log.followup},
+    "analysis": lambda log: {"label": "Quick Analysis?", "type": "checkbox", "value": log.analysis},
+    "notes": lambda log: {"label": "Notes", "type": "textarea", "value": log.notes or "", "rows": 15}
+}
+
 def make_paginated_data(
     query,
     page: int,
@@ -233,4 +244,4 @@ def worklog_entry(id):
     users = eager_load_user_relationships(user_query).all()
     item_query = db.session.query(Inventory)
     items = eager_load_inventory_relationships(item_query).all()
-    return render_template("worklog.html", title=f"Work Log #{id}", log=log, users=users, items=items)
+    return render_template("worklog.html", title=f"Work Log #{id}", log=log, users=users, items=items, form_fields=worklog_form_fields)

static/js/datalist.js

@@ -0,0 +1,20 @@
+document.querySelectorAll('[data-datalist-bind]').forEach(input => {
+    const datalistSelector = input.dataset.datalistBind;
+    const hiddenSelector = input.dataset.hiddenTarget;
+    const datalist = document.querySelector(datalistSelector);
+    const hidden = document.querySelector(hiddenSelector);
+
+    if (!datalist || !hidden) return;
+
+    input.addEventListener('input', function () {
+        const value = this.value;
+        const options = datalist.querySelectorAll('option');
+        let foundId = '';
+        options.forEach(option => {
+            if (option.value === value) {
+                foundId = option.dataset.id || '';
+            }
+        });
+        hidden.value = foundId;
+    });
+});

templates/form.html

@@ -0,0 +1,10 @@
+<!-- templates/worklog.html -->
+{% extends "layout.html" %}
+
+{% import "_table_fragment.html" as tables %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block content %}
+
+{% endblock %}

templates/inventory.html

@@ -9,10 +9,12 @@
 <nav>
     <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
-                <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                    viewBox="0 0 16 16">
-            </svg>
+                    <path
-        </a></li>
+                        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
+                </svg>
+            </a></li>
         <li class="breadcrumb-item"><a href="{{ url_for('main.list_inventory') }}">Inventory</a></li>
         <li class="breadcrumb-item active">{{ item.identifier }}</li>
     </ol>
@@ -23,7 +25,8 @@
         <div class="row">
             <div class="col-6">
                 <label for="timestamp" class="form-label">Date Entered</label>
-                <input type="date" class="form-control" name="timestamp" value="{{ item.timestamp.date().isoformat() }}">
+                <input type="date" class="form-control" name="timestamp"
+                    value="{{ item.timestamp.date().isoformat() }}">
             </div>
             <div class="col-6">
                 <label for="identifier" class="form-label">Identifier</label>
@@ -33,25 +36,29 @@
         <div class="row">
             <div class="col-4">
                 <label for="inventory_name" class="form-label">Inventory #</label>
-                <input type="text" class="form-control" name="inventory_name" placeholder="-" value="{{ item.inventory_name if item.inventory_name else '' }}">
+                <input type="text" class="form-control" name="inventory_name" placeholder="-"
+                    value="{{ item.inventory_name if item.inventory_name else '' }}">
             </div>
             <div class="col-4">
                 <label for="serial" class="form-label">Serial #</label>
-                <input type="text" class="form-control" name="serial" placeholder="-" value="{{ item.serial if item.serial else '' }}">
+                <input type="text" class="form-control" name="serial" placeholder="-"
+                    value="{{ item.serial if item.serial else '' }}">
             </div>
             <div class="col-4">
                 <label for="barcode" class="form-label">Bar Code #</label>
-                <input type="text" class="form-control" name="barcode" placeholder="-" value="{{ item.barcode if item.barcode else '' }}">
+                <input type="text" class="form-control" name="barcode" placeholder="-"
+                    value="{{ item.barcode if item.barcode else '' }}">
             </div>
         </div>
         <div class="row">
             <div class="col-4">
                 <label for="brand" class="form-label">Brand</label>
-                <input list="brandList" id="brand" name="brand" class="form-control" placeholder="-" value="{{ item.brand.name }}">
+                <input list="brandList" id="brand" name="brand" class="form-control" placeholder="-"
+                    value="{{ item.brand.name }}">
                 <input type="hidden" id="brandId">
                 <datalist id="brandList">
                     {% for brand in brands %}
-                        <option data-id="{{ brand.id }}" value="{{ brand.name }}"></option>
+                    <option data-id="{{ brand.id }}" value="{{ brand.name }}"></option>
                     {% endfor %}
                 </datalist>
             </div>
@@ -61,41 +68,46 @@
             </div>
             <div class="col-4">
                 <label for="category" class="form-label">Category</label>
-                <input type="text" class="form-control" name="category" placeholder="-" value="{{ item.item.description }}">
+                <input type="text" class="form-control" name="category" placeholder="-"
+                    value="{{ item.item.description }}">
             </div>
         </div>
         <div class="row">
             <div class="col-4">
                 <label for="owner" class="form-label">Contact</label>
-                <input list="userList" id="owner" class="form-control" name="owner" placeholder="-" value="{{ item.owner.full_name }}">
+                <input list="userList" id="owner" class="form-control" name="owner" placeholder="-"
+                    value="{{ item.owner.full_name }}" data-datalist-bind="#userList" data-hidden-target="#userId">
                 <input type="hidden" id="userId">
                 <datalist id="userList">
                     {% for user in users %}
-                        <option data-id="{{ user.id }}" value="{{ user.full_name }}"></option>
+                    <option data-id="{{ user.id }}" value="{{ user.full_name }}"></option>
                     {% endfor %}
                 </datalist>
             </div>
             <div class="col-4">
                 <label for="location" class="form-label">Location</label>
-                <input list="roomList" id="location" class="form-control" name="location" placeholder="-" value="{{ item.location.full_name }}">
+                <input list="roomList" id="location" class="form-control" name="location" placeholder="-"
+                    value="{{ item.location.full_name }}" data-datalist-bind="#roomList" data-hidden-target="#roomId">
                 <input type="hidden" id="roomId">
                 <datalist id="roomList">
                     {% for room in rooms %}
-                        <option data-id="{{ room.id }}" value="{{ room.full_name }}"></option>
+                    <option data-id="{{ room.id }}" value="{{ room.full_name }}"></option>
                     {% endfor %}
                 </datalist>
             </div>
             <div class="col-2">
                 <label for="condition" class="form-label">Condition</label>
                 <select name="condition" id="" class="form-select" value="{{ item.condition }}">
-                    {% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified", "Removed", "Disposed"] %}
+                    {% for condition in ["Working", "Deployed", "Partially Inoperable", "Inoperable", "Unverified",
-                        <option value="{{ condition }}">{{ condition }}</option>
+                    "Removed", "Disposed"] %}
+                    <option value="{{ condition }}">{{ condition }}</option>
                     {% endfor %}
                 </select>
             </div>
             <div class="col-2 d-flex align-items-center justify-content-center" style="margin-top: 1.9rem;">
                 <div class="form-check mb-0">
-                    <input type="checkbox" class="form-check-input" id="shared" name="shared" {% if item.shared %}checked{% endif %}>
+                    <input type="checkbox" class="form-check-input" id="shared" name="shared" {% if item.shared
+                        %}checked{% endif %}>
                     <label for="shared" class="form-check-label">Shared?</label>
                 </div>
             </div>
@@ -103,23 +115,24 @@
         <div class="row">
             <div class="col-{% if worklog %}6{% else %}12{% endif %}">
                 <label for="notes" class="form-label">Notes &amp; Comments</label>
-                <textarea name="notes" id="notes" class="form-control" rows="10">{{ item.notes if item.notes else '' }}</textarea>
+                <textarea name="notes" id="notes" class="form-control"
+                    rows="10">{{ item.notes if item.notes else '' }}</textarea>
             </div>
             {% if worklog %}
-                <div class="col-6">
+            <div class="col-6">
-                    {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', 'Work Log') }}
+                {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', 'Work Log') }}
-                    {% if worklog_pagination['total_pages'] > 1 %}
+                {% if worklog_pagination['total_pages'] > 1 %}
-                        {{ tables.render_pagination(
+                {{ tables.render_pagination(
-                            page=worklog_pagination['page'],
+                page=worklog_pagination['page'],
-                            has_prev=worklog_pagination['has_prev'],
+                has_prev=worklog_pagination['has_prev'],
-                            has_next=worklog_pagination['has_next'],
+                has_next=worklog_pagination['has_next'],
-                            total_pages=worklog_pagination['total_pages'],
+                total_pages=worklog_pagination['total_pages'],
-                            endpoint='main.inventory_item',
+                endpoint='main.inventory_item',
-                            page_variable='worklog_page',
+                page_variable='worklog_page',
-                            extra_args={'id': item.id, 'worklog_page': worklog_page}
+                extra_args={'id': item.id, 'worklog_page': worklog_page}
-                        ) }}
+                ) }}
-                    {% endif %}
+                {% endif %}
-                </div>
+            </div>
             {% endif %}
         </div>
     </form>

templates/layout.html

@@ -47,6 +47,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
         crossorigin="anonymous"></script>
+    <script src="{{ url_for('static', filename='js/datalist.js') }}"></script>
     <script>{% block script %}{% endblock %}</script>
 </body>
 

templates/user.html

@@ -6,125 +6,115 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block content %}
-    <nav>
+<nav>
-        <ol class="breadcrumb">
+    <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
+        <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house"
-                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                    viewBox="0 0 16 16">
+                    <path
+                        d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
                 </svg>
             </a></li>
-            <li class="breadcrumb-item"><a href="{{ url_for('main.list_users') }}">Users</a></li>
+        <li class="breadcrumb-item"><a href="{{ url_for('main.list_users') }}">Users</a></li>
-            <li class="breadcrumb-item active">{{ user.full_name }}</li>
+        <li class="breadcrumb-item active">{{ user.full_name }}</li>
-        </ol>
+    </ol>
-    </nav>
+</nav>
 
-    <div class="container">
+<div class="container">
-        <form action="POST">
+    <form action="POST">
-            <div class="row">
-                <div class="col-6">
-                    <label for="lastName" class="form-label">Last Name</label>
-                    <input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}">
-                </div>
-
-                <div class="col-6">
-                    <label for="firstName" class="form-label">First Name</label>
-                    <input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}">
-                </div>
-            </div>
-
-            <div class="row mt-2">
-                <div class="col-6">
-                    <label for="supervisor" class="form-label">Supervisor</label>
-                    <input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
-                        value="{{ user.supervisor.full_name }}">
-                    <input type="hidden" id="supervisorId">
-                    <datalist id="supervisorList">
-                        {% for supervisor in users %}
-                            <option data-id="{{ supervisor.id }}" value="{{ supervisor.full_name }}"></option>
-                        {% endfor %}
-                    </datalist>
-                </div>
-
-                <div class="col-6">
-                    <label for="location" class="form-label">Location</label>
-                    <input list="locationList" id="location" name="locationName" class="form-control"
-                        value="{{ user.location.full_name }}">
-                    <input type="hidden" id="locationId">
-                    <datalist id="locationList">
-                        {% for location in rooms %}
-                            <option data-id="{{ location.id }}" value="{{ location.full_name }}"></option>
-                        {% endfor %}
-                    </datalist>
-                </div>
-            </div>
-            <div class="row mt-4">
-                <div class="col-6">
-                    <input type="checkbox" class="form-check-input" id="activeCheck" {% if user.active %}checked{% endif %}>
-                    <label for="activeCheck" class="form-check-label">Active</label>
-                </div>
-                <div class="col-6">
-                    <input type="checkbox" class="form-check-input" id="staffCheck" {% if user.staff %}checked{% endif %}>
-                    <label for="staffCheck" class="form-check-label">Staff</label>
-                </div>
-            </div>
-        </form>
-        <div class="row mt-3">
-            {% if inventory_rows %}
-                <div class="col-6">
-                    <div class="row">
-                        {{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
-                    </div>
-                </div>
-            {% endif %}
-            {% if worklog_rows %}
-                <div class="col-6">
-                    <div class="row">
-                        {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
-                    </div>
-                </div>
-            {% endif %}
-        </div>
         <div class="row">
-            {% if inventory_pagination['total_pages'] > 1 %}
+            <div class="col-6">
-                <div class="col-6">
+                <label for="lastName" class="form-label">Last Name</label>
-                    {{ tables.render_pagination(
+                <input type="text" class="form-control" id="lastName" placeholder="Doe" value="{{ user.last_name }}">
-                        page=inventory_pagination['page'],
+            </div>
-                        has_prev=inventory_pagination['has_prev'],
-                        has_next=inventory_pagination['has_next'],
-                        total_pages=inventory_pagination['total_pages'],
-                        endpoint='main.user',
-                        page_variable='asset_page',
-                        extra_args={'id': user.id, 'worklog_page': worklog_page}
-                    ) }}
-                </div>
-            {% endif %}
-            {% if worklog_pagination['total_pages'] > 1 %}
-                <div class="col-6">
-                    {{ tables.render_pagination(
-                        page=worklog_pagination['page'],
-                        has_prev=worklog_pagination['has_prev'],
-                        has_next=worklog_pagination['has_next'],
-                        total_pages=worklog_pagination['total_pages'],
-                        endpoint='main.user',
-                        page_variable='worklog_page',
-                        extra_args={'id': user.id, 'worklog_page': worklog_page}
-                    ) }}
-                </div>
-            {% endif %}
-        </div>
-    </div>
-{% endblock %}
 
-{% block script %}
+            <div class="col-6">
-document.getElementById('supervisor').addEventListener('input', function() {
+                <label for="firstName" class="form-label">First Name</label>
-    const input = this.value;
+                <input type="text" class="form-control" id="firstName" placeholder="John" value="{{ user.first_name }}">
-    const options = document.querySelectorAll('#supervisorList option');
+            </div>
-    let foundId = '';
+        </div>
-    options.forEach(option => {
+
-        if (option.value === input) {
+        <div class="row mt-2">
-            foundId = option.dataset.id;
+            <div class="col-6">
-        }
+                <label for="supervisor" class="form-label">Supervisor</label>
-    })
+                <input list="supervisorList" id="supervisor" name="supervisorName" class="form-control"
-    document.getElementById('supervisorId').value = foundId;
+                    value="{{ user.supervisor.full_name }}" data-datalist-bind="#supervisorList"
-});
+                    data-hidden-target="#supervisorId">
+                <input type="hidden" id="supervisorId">
+                <datalist id="supervisorList">
+                    {% for supervisor in users %}
+                    <option data-id="{{ supervisor.id }}" value="{{ supervisor.full_name }}"></option>
+                    {% endfor %}
+                </datalist>
+            </div>
+
+            <div class="col-6">
+                <label for="location" class="form-label">Location</label>
+                <input list="locationList" id="location" name="locationName" class="form-control"
+                    value="{{ user.location.full_name }}" data-datalist-bind="#locationList"
+                    data-hidden-target="#locationId">
+                <input type="hidden" id="locationId">
+                <datalist id="locationList">
+                    {% for location in rooms %}
+                    <option data-id="{{ location.id }}" value="{{ location.full_name }}"></option>
+                    {% endfor %}
+                </datalist>
+            </div>
+        </div>
+        <div class="row mt-4">
+            <div class="col-6">
+                <input type="checkbox" class="form-check-input" id="activeCheck" {% if user.active %}checked{% endif %}>
+                <label for="activeCheck" class="form-check-label">Active</label>
+            </div>
+            <div class="col-6">
+                <input type="checkbox" class="form-check-input" id="staffCheck" {% if user.staff %}checked{% endif %}>
+                <label for="staffCheck" class="form-check-label">Staff</label>
+            </div>
+        </div>
+    </form>
+    <div class="row mt-3">
+        {% if inventory_rows %}
+        <div class="col-6">
+            <div class="row">
+                {{ tables.render_table(inventory_headers, inventory_rows, 'inventory_item', title='Assets') }}
+            </div>
+        </div>
+        {% endif %}
+        {% if worklog_rows %}
+        <div class="col-6">
+            <div class="row">
+                {{ tables.render_table(worklog_headers, worklog_rows, 'worklog_entry', title='Work Done') }}
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    <div class="row">
+        {% if inventory_pagination['total_pages'] > 1 %}
+        <div class="col-6">
+            {{ tables.render_pagination(
+            page=inventory_pagination['page'],
+            has_prev=inventory_pagination['has_prev'],
+            has_next=inventory_pagination['has_next'],
+            total_pages=inventory_pagination['total_pages'],
+            endpoint='main.user',
+            page_variable='asset_page',
+            extra_args={'id': user.id, 'worklog_page': worklog_page}
+            ) }}
+        </div>
+        {% endif %}
+        {% if worklog_pagination['total_pages'] > 1 %}
+        <div class="col-6">
+            {{ tables.render_pagination(
+            page=worklog_pagination['page'],
+            has_prev=worklog_pagination['has_prev'],
+            has_next=worklog_pagination['has_next'],
+            total_pages=worklog_pagination['total_pages'],
+            endpoint='main.user',
+            page_variable='worklog_page',
+            extra_args={'id': user.id, 'worklog_page': worklog_page}
+            ) }}
+        </div>
+        {% endif %}
+    </div>
+</div>
 {% endblock %}

templates/worklog.html

@@ -7,54 +7,102 @@
 
 {% block content %}
 <nav>
-    <ol class="breadcrumb">
+    <form action="POST">
-        <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
+        <div class="row d-flex mb-3 justify-content-between">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+            <div class="col">
-                <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+                <ol class="breadcrumb">
-            </svg>
+                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">
-        </a></li>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-        <li class="breadcrumb-item"><a href="{{ url_for('main.list_worklog') }}">Work Log</a></li>
+                                class="bi bi-house" viewBox="0 0 16 16">
-        <li class="breadcrumb-item active">{{ title }}</li>
+                                <path
-    </ol>
+                                    d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z" />
+                            </svg>
+                        </a></li>
+                    <li class="breadcrumb-item"><a href="{{ url_for('main.list_worklog') }}">Work Log</a></li>
+                    <li class="breadcrumb-item active">{{ title }}</li>
+                </ol>
+            </div>
+            <div class="col text-end">
+                <button type="submit" class="btn btn-primary">Save</button>
+            </div>
+        </div>
 
-    <div class="container">
+        <div class="container">
-        <form action="POST">
             <div class="row">
                 <div class="col-6">
                     <label for="start" class="form-label">Start Timestamp</label>
-                    <input type="date" class="form-control" name="start" placeholder="-" value="{{ log.start_time.date().isoformat() if log.start_time }}">
+                    <input type="date" class="form-control" name="start" placeholder="-"
+                        value="{{ log.start_time.date().isoformat() if log.start_time }}">
                 </div>
                 <div class="col-6">
                     <label for="end" class="form-label">End Timestamp</label>
-                    <input type="date" class="form-control" name="end" placeholder="-" value="{{ log.end_time.date().isoformat() if log.end_time }}">
+                    <input type="date" class="form-control" name="end" placeholder="-"
+                        value="{{ log.end_time.date().isoformat() if log.end_time }}">
                 </div>
             </div>
             <div class="row">
                 <div class="col-4">
                     <label for="contact" class="form-label">Contact</label>
-                    <input list="contactList" class="form-control" id="contact" value="{{ log.contact.full_name }}">
+                    <input list="contactList" class="form-control" id="contact" value="{{ log.contact.full_name }}"
+                        data-datalist-bind="#contactList" data-hidden-target="#contactId">
                     <input type="hidden" id="contactId">
                     <datalist id="contactList">
                         {% for contact in users %}
-                        <option data-id="{{ contact.id }}" value="{{ contact.full_name }}">{{ contact.full_name }}</option>
+                        <option data-id="{{ contact.id }}" value="{{ contact.full_name }}">{{ contact.full_name }}
+                        </option>
                         {% endfor %}
                     </datalist>
                 </div>
                 <div class="col-4">
                     <label for="item" class="form-label">Work Item</label>
-                    <input list="itemList" class="form-control" id="item" placeholder="-" value="{{ log.work_item.identifier }}">
+                    <input list="itemList" class="form-control" id="item" placeholder="-"
+                        value="{{ log.work_item.identifier }}" data-datalist-bind="#itemList"
+                        data-hidden-target="#itemId">
                     <input type="hidden" id="itemId">
                     <datalist id="itemList">
                         {% for item in items %}
-                            <option data-id="{{ item.id }}" value="{{ item.identifier }}">{{ item.identifier }}</option>
+                        <option data-id="{{ item.id }}" value="{{ item.identifier }}">{{ item.identifier }}</option>
                         {% endfor %}
                     </datalist>
                 </div>
                 <div class="col-4">
-                    
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="complete" class="form-check-input" {% if log.complete %}checked{%
+                                endif %}>
+                            <label for="complete" class="form-check-label">
+                                Complete?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="followup" class="form-check-input" {% if log.followup %}checked{%
+                                endif %}>
+                            <label for="followup" class="form-check-label">
+                                Follow Up?
+                            </label>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <input type="checkbox" id="analysis" class="form-check-input" {% if log.analysis %}checked{%
+                                endif %}>
+                            <label for="analysis" class="form-check-label">
+                                Quick Analysis?
+                            </label>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </form>
+            <div class="row">
-    </div>
+                <div class="col-12">
+                    <label for="notes" class="form-label">Notes</label>
+                    <textarea name="notes" id="notes" class="form-control"
+                        rows="15">{{ log.notes if log.notes else '' }}</textarea>
+                </div>
+            </div>
+        </div>
 </nav>
+</form>
 {% endblock %}