Flesh out work items in the UI

app/views/work_items/_work_item.html.erb

@@ -1,4 +1,8 @@
-<tr class="bg-purple-200">
+<tr class="<%= class_names({
+                             'lecture-future': work_item.available_from.future?,
+                             'bg-purple-200': work_item.workable?,
+                             'bg-green-100': work_item.completed?,
+                           }) %>">
   <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
     <%= work_item.title %>
   </td>
@@ -7,12 +11,19 @@
   </td>
 
   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-    <div class="flex flex-row gap-2">
-        <i class="fa fa-times text-red-700"></i>
+    <div class="flex flex-row gap-2 justify-center">
+      <% if work_item.completed? %>
+        <i class="fa fa-check text-green-700"></i>
+      <% elsif work_item.started? %>
+        <i class="fa fa-play text-blue-700"></i>
+      <% else %>
+        <%# Symbol to show work has not started yet %>
+        <i class="fa fa-clock text-blue-gray-700"></i>
+      <% end %>
     </div>
 
     <template data-popover-target="content">
-      <% unless work_item.tracked_time_entries.empty? %>
+      <% if work_item.started? %>
         <div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white   text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
           <div>
             Time spent: <%= humanise_duration(work_item.total_overall_time) %>
@@ -23,26 +34,25 @@
   </td>
 
   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-    <% if work_item.start_time.future? %>
-      <%= button_to "Prepare",
-                    "X",
+    <% if work_item.workable? %>
+      <% start_label = if work_item.started? then
+                         "Continue"
+                       else
+                         "Start"
+                       end %>
+      <%= button_to start_label,
+                    work_item_start_time_entry_path(work_item),
                     class: 'action-button'
       %>
-    <% elsif work_item.start_time.past? && work_item.due_date.future? %>
-      <%= button_to "Start",
-                    "X",
-                    class: 'action-button'
-      %>
-    <% else %>
-      <div class="flex justify-center">
-        <%= button_to "Review",
-                      "X",
-                      class: 'action-button'
-        %>
-      </div>
     <% end %>
   </td>
 
   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+    <% if work_item.started? && !work_item.completed? %>
+      <%= button_to "Complete",
+                    work_item_complete_path(work_item),
+                    class: 'action-button'
+      %>
+    <% end %>
   </td>
 </tr>