From dcee67c1fb00dc24a2beefce0c2e6559a44e2934 Mon Sep 17 00:00:00 2001
From: Anantha Kumaran <ananthakumaran@gmail.com>
Date: Fri, 18 Aug 2023 09:05:03 +0530
Subject: [PATCH] reformat html

---
 lib/exq_ui_web/live/busy_live/index.html.heex |  59 +++++----
 .../historical_stats_component.html.heex      |  36 +++++-
 .../job_details_component.html.heex           | 113 +++++++++---------
 .../components/nav_bar_component.html.heex    |  15 ++-
 .../components/pagination_component.html.heex |  52 +++++---
 .../realtime_stats_component.html.heex        |  32 ++++-
 .../live/components/table_component.html.heex |  59 +++++----
 lib/exq_ui_web/live/dead_live/index.html.heex |  11 +-
 lib/exq_ui_web/live/dead_live/show.html.heex  |   7 +-
 .../live/queue_live/index.html.heex           |  35 ++++--
 lib/exq_ui_web/live/queue_live/show.html.heex |  15 ++-
 .../live/recurring_live/index.html.heex       |  55 ++++++---
 .../live/retry_live/index.html.heex           |  12 +-
 lib/exq_ui_web/live/retry_live/show.html.heex |   7 +-
 .../live/scheduled_live/index.html.heex       |  11 +-
 .../live/scheduled_live/show.html.heex        |   7 +-
 .../templates/layout/live.html.heex           |  20 +++-
 .../templates/layout/root.html.heex           |  16 ++-
 18 files changed, 385 insertions(+), 177 deletions(-)

diff --git a/lib/exq_ui_web/live/busy_live/index.html.heex b/lib/exq_ui_web/live/busy_live/index.html.heex
index c31ac0f..1796028 100644
--- a/lib/exq_ui_web/live/busy_live/index.html.heex
+++ b/lib/exq_ui_web/live/busy_live/index.html.heex
@@ -10,21 +10,27 @@
   </thead>
   <tbody>
     <%= for node <- @nodes do %>
-        <tr>
-          <td>
-            <div class="d-flex align-items-center">
-              <span class="me-2"><%= node.identity %></span>
-              <%= form_for :signal, "#", [id: "node-#{node.identity}", phx_change: :signal, class: "mb-0 form-check form-switch form-check-inline"], fn f -> %>
-                <%= hidden_input(f, :name, value: "TSTP") %>
-                <%= hidden_input(f, :node_id, value: node.identity) %>
-                <%= checkbox(f, :quiet, value: !node.quiet, disabled: node.quiet, class: "form-check-input", role: "switch", title: "quiet") %>
-              <% end %>
-            </div>
-            <span><b>Queues: </b><%= Enum.join(node.queues, ", ") %></span>
-          </td>
-          <td><%= human_time(node.started_at) %></td>
-          <td><%= node.busy %></td>
-        </tr>
+      <tr>
+        <td>
+          <div class="d-flex align-items-center">
+            <span class="me-2"><%= node.identity %></span>
+            <%= form_for :signal, "#", [id: "node-#{node.identity}", phx_change: :signal, class: "mb-0 form-check form-switch form-check-inline"], fn f -> %>
+              <%= hidden_input(f, :name, value: "TSTP") %>
+              <%= hidden_input(f, :node_id, value: node.identity) %>
+              <%= checkbox(f, :quiet,
+                value: !node.quiet,
+                disabled: node.quiet,
+                class: "form-check-input",
+                role: "switch",
+                title: "quiet"
+              ) %>
+            <% end %>
+          </div>
+          <span><b>Queues: </b><%= Enum.join(node.queues, ", ") %></span>
+        </td>
+        <td><%= human_time(node.started_at) %></td>
+        <td><%= node.busy %></td>
+      </tr>
     <% end %>
   </tbody>
 </table>
@@ -43,15 +49,20 @@
   </thead>
   <tbody>
     <%= for job <- @jobs do %>
-        <tr>
-          <td><%= job.host %></td>
-          <td><%= job.pid %></td>
-          <td><%= job.payload.jid %></td>
-          <td><%= live_redirect job.queue, class: "nounderline", to: Routes.queue_show_path(@socket, job.queue) %></td>
-          <td><%= job.payload.class %></td>
-          <td><%= inspect(job.payload.args) %></td>
-          <td><%= human_time(job.run_at) %></td>
-        </tr>
+      <tr>
+        <td><%= job.host %></td>
+        <td><%= job.pid %></td>
+        <td><%= job.payload.jid %></td>
+        <td>
+          <%= live_redirect(job.queue,
+            class: "nounderline",
+            to: Routes.queue_show_path(@socket, job.queue)
+          ) %>
+        </td>
+        <td><%= job.payload.class %></td>
+        <td><%= inspect(job.payload.args) %></td>
+        <td><%= human_time(job.run_at) %></td>
+      </tr>
     <% end %>
   </tbody>
 </table>
diff --git a/lib/exq_ui_web/live/components/historical_stats_component.html.heex b/lib/exq_ui_web/live/components/historical_stats_component.html.heex
index 0c54a58..4254ae2 100644
--- a/lib/exq_ui_web/live/components/historical_stats_component.html.heex
+++ b/lib/exq_ui_web/live/components/historical_stats_component.html.heex
@@ -4,10 +4,38 @@
       <div class="d-flex align-items-center mt-2">
         <h6 class="mb-0 me-2 text-muted">Historical</h6>
         <div class="btn-group btn-group-sm" role="group">
-          <label phx-target={@myself} phx-click="days" phx-value-days="7" class={"btn #{date_selector_class(@days, 7)}"}>1 week</label>
-          <label phx-target={@myself} phx-click="days" phx-value-days="30" class={"btn #{date_selector_class(@days, 30)}"}>1 month</label>
-          <label phx-target={@myself} phx-click="days" phx-value-days="90" class={"btn #{date_selector_class(@days, 90)}"}>3 months</label>
-          <label phx-target={@myself} phx-click="days" phx-value-days="180" class={"btn #{date_selector_class(@days, 180)}"}>6 months</label>
+          <label
+            phx-target={@myself}
+            phx-click="days"
+            phx-value-days="7"
+            class={"btn #{date_selector_class(@days, 7)}"}
+          >
+            1 week
+          </label>
+          <label
+            phx-target={@myself}
+            phx-click="days"
+            phx-value-days="30"
+            class={"btn #{date_selector_class(@days, 30)}"}
+          >
+            1 month
+          </label>
+          <label
+            phx-target={@myself}
+            phx-click="days"
+            phx-value-days="90"
+            class={"btn #{date_selector_class(@days, 90)}"}
+          >
+            3 months
+          </label>
+          <label
+            phx-target={@myself}
+            phx-click="days"
+            phx-value-days="180"
+            class={"btn #{date_selector_class(@days, 180)}"}
+          >
+            6 months
+          </label>
         </div>
       </div>
     </div>
diff --git a/lib/exq_ui_web/live/components/job_details_component.html.heex b/lib/exq_ui_web/live/components/job_details_component.html.heex
index 51e8e4d..375c154 100644
--- a/lib/exq_ui_web/live/components/job_details_component.html.heex
+++ b/lib/exq_ui_web/live/components/job_details_component.html.heex
@@ -1,59 +1,64 @@
 <div class="row">
   <%= if @item do %>
-  <div class="col-4 my-2">
-    <%= for %{name: name, label: label} <- @actions do %>
-      <%= link label, class: "btn btn-danger btn-sm me-1", to: "#", phx_click: name, phx_value_raw: @item.raw %>
-    <% end %>
-  </div>
-  <div class="col-12">
-    <table class="my-2 table table-bordered">
-      <tbody>
-        <tr>
-          <th>Queue</th>
-          <td><%= @item.job.queue %></td>
-        </tr>
-        <tr>
-          <th>Module</th>
-          <td><%= @item.job.class %></td>
-        </tr>
-        <tr>
-          <th>JID</th>
-          <td><%= @item.job.jid %></td>
-        </tr>
-        <tr>
-          <th>Arguments</th>
-          <td><%= inspect(@item.job.args) %></td>
-        </tr>
-        <tr>
-          <th>Enqueued At</th>
-          <td><%= human_time(@item.job.enqueued_at) %></td>
-        </tr>
-        <tr>
-          <th>Failed At</th>
-          <td><%= human_time(@item.job.failed_at) %></td>
-        </tr>
-        <tr>
-          <th>Last Retried At</th>
-          <td><%= human_time(@item.job.retried_at) %></td>
-        </tr>
-        <tr>
-          <th>Retry Count</th>
-          <td><%= @item.job.retry_count %></td>
-        </tr>
-        <tr>
-          <th>Error Module</th>
-          <td><%= @item.job.error_class %></td>
-        </tr>
-        <tr>
-          <th>Error Message</th>
-          <td><pre><%= @item.job.error_message %></pre></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+    <div class="col-4 my-2">
+      <%= for %{name: name, label: label} <- @actions do %>
+        <%= link(label,
+          class: "btn btn-danger btn-sm me-1",
+          to: "#",
+          phx_click: name,
+          phx_value_raw: @item.raw
+        ) %>
+      <% end %>
+    </div>
+    <div class="col-12">
+      <table class="my-2 table table-bordered">
+        <tbody>
+          <tr>
+            <th>Queue</th>
+            <td><%= @item.job.queue %></td>
+          </tr>
+          <tr>
+            <th>Module</th>
+            <td><%= @item.job.class %></td>
+          </tr>
+          <tr>
+            <th>JID</th>
+            <td><%= @item.job.jid %></td>
+          </tr>
+          <tr>
+            <th>Arguments</th>
+            <td><%= inspect(@item.job.args) %></td>
+          </tr>
+          <tr>
+            <th>Enqueued At</th>
+            <td><%= human_time(@item.job.enqueued_at) %></td>
+          </tr>
+          <tr>
+            <th>Failed At</th>
+            <td><%= human_time(@item.job.failed_at) %></td>
+          </tr>
+          <tr>
+            <th>Last Retried At</th>
+            <td><%= human_time(@item.job.retried_at) %></td>
+          </tr>
+          <tr>
+            <th>Retry Count</th>
+            <td><%= @item.job.retry_count %></td>
+          </tr>
+          <tr>
+            <th>Error Module</th>
+            <td><%= @item.job.error_class %></td>
+          </tr>
+          <tr>
+            <th>Error Message</th>
+            <td><pre><%= @item.job.error_message %></pre></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   <% else %>
-  <div class="col-12">
-    <div class="my-2 alert alert-danger">Job not found</div>
-  </div>
+    <div class="col-12">
+      <div class="my-2 alert alert-danger">Job not found</div>
+    </div>
   <% end %>
 </div>
diff --git a/lib/exq_ui_web/live/components/nav_bar_component.html.heex b/lib/exq_ui_web/live/components/nav_bar_component.html.heex
index e863caa..cc45ac7 100644
--- a/lib/exq_ui_web/live/components/nav_bar_component.html.heex
+++ b/lib/exq_ui_web/live/components/nav_bar_component.html.heex
@@ -22,15 +22,22 @@
           <%= nav_link(@socket, "Dead", Routes.dead_index_path(@socket)) %>
         </li>
         <%= if Application.get_env(:exq_ui, :exq_scheduler_name) do %>
-        <li class="nav-item">
-          <%= nav_link(@socket, "Recurring", Routes.recurring_index_path(@socket)) %>
-        </li>
+          <li class="nav-item">
+            <%= nav_link(@socket, "Recurring", Routes.recurring_index_path(@socket)) %>
+          </li>
         <% end %>
       </ul>
     </div>
     <form class="d-flex align-items-center" phx-target="stats">
       <label for="refresh-interval" class="text-light col-auto me-2">Update every</label>
-      <select name="refresh_interval" phx-hook="Refresh" id="refresh-interval" class="form-select" aria-label="Refresh Interval" phx-update="ignore">
+      <select
+        name="refresh_interval"
+        phx-hook="Refresh"
+        id="refresh-interval"
+        class="form-select"
+        aria-label="Refresh Interval"
+        phx-update="ignore"
+      >
         <%= options_for_select([1, 2, 5, 10, 30], 5) %>
       </select>
     </form>
diff --git a/lib/exq_ui_web/live/components/pagination_component.html.heex b/lib/exq_ui_web/live/components/pagination_component.html.heex
index a325378..7094882 100644
--- a/lib/exq_ui_web/live/components/pagination_component.html.heex
+++ b/lib/exq_ui_web/live/components/pagination_component.html.heex
@@ -1,19 +1,37 @@
 <div>
-<%= if @total_page > 0 do %>
-<nav class="my-2">
-  <ul class="pagination pagination-sm justify-content-end mb-0">
-    <li class={"page-item #{if @current_page == 1, do: "disabled"}"}>
-      <%= link "«", class: "page-link", to: "#", phx_page_loading: true, phx_click: "page", phx_value_page: 1 %>
-    </li>
-    <%= for i <- @start_page..@end_page do %>
-      <li class={"page-item #{if @current_page == i, do: "active"}"}>
-        <%= link i, class: "page-link", to: "#", phx_page_loading: true, phx_click: "page", phx_value_page: i %>
-      </li>
-    <% end %>
-    <li class={"page-item #{if @current_page == @total_page, do: "disabled"}"}>
-      <%= link "»", class: "page-link", to: "#", phx_page_loading: true, phx_click: "page", phx_value_page: @total_page %>
-    </li>
-  </ul>
-</nav>
-<% end %>
+  <%= if @total_page > 0 do %>
+    <nav class="my-2">
+      <ul class="pagination pagination-sm justify-content-end mb-0">
+        <li class={"page-item #{if @current_page == 1, do: "disabled"}"}>
+          <%= link("«",
+            class: "page-link",
+            to: "#",
+            phx_page_loading: true,
+            phx_click: "page",
+            phx_value_page: 1
+          ) %>
+        </li>
+        <%= for i <- @start_page..@end_page do %>
+          <li class={"page-item #{if @current_page == i, do: "active"}"}>
+            <%= link(i,
+              class: "page-link",
+              to: "#",
+              phx_page_loading: true,
+              phx_click: "page",
+              phx_value_page: i
+            ) %>
+          </li>
+        <% end %>
+        <li class={"page-item #{if @current_page == @total_page, do: "disabled"}"}>
+          <%= link("»",
+            class: "page-link",
+            to: "#",
+            phx_page_loading: true,
+            phx_click: "page",
+            phx_value_page: @total_page
+          ) %>
+        </li>
+      </ul>
+    </nav>
+  <% end %>
 </div>
diff --git a/lib/exq_ui_web/live/components/realtime_stats_component.html.heex b/lib/exq_ui_web/live/components/realtime_stats_component.html.heex
index ba7e20c..a6ddef1 100644
--- a/lib/exq_ui_web/live/components/realtime_stats_component.html.heex
+++ b/lib/exq_ui_web/live/components/realtime_stats_component.html.heex
@@ -4,18 +4,44 @@
       <div class="d-flex align-items-center">
         <h6 class="mb-0 me-2 text-muted">Realtime</h6>
         <span class="legend me-2">
-          <svg class="rounded me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007200"></rect></svg>
+          <svg
+            class="rounded me-1"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            preserveAspectRatio="xMidYMid slice"
+            focusable="false"
+          >
+            <rect width="100%" height="100%" fill="#007200"></rect>
+          </svg>
           <span>Processed</span>
         </span>
         <span class="legend me-2">
-          <svg class="rounded me-1" width="16" height="16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#dc3545"></rect></svg>
+          <svg
+            class="rounded me-1"
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            preserveAspectRatio="xMidYMid slice"
+            focusable="false"
+          >
+            <rect width="100%" height="100%" fill="#dc3545"></rect>
+          </svg>
           <span>Failed</span>
         </span>
       </div>
     </div>
   </div>
   <div class="row">
-    <div id="realtime-chart" class="col-12" phx-hook="RealtimePlot" phx-update="ignore" data-tick={@tick_interval}>
+    <div
+      id="realtime-chart"
+      class="col-12"
+      phx-hook="RealtimePlot"
+      phx-update="ignore"
+      data-tick={@tick_interval}
+    >
     </div>
   </div>
 </div>
diff --git a/lib/exq_ui_web/live/components/table_component.html.heex b/lib/exq_ui_web/live/components/table_component.html.heex
index d2e6adb..3d4a54b 100644
--- a/lib/exq_ui_web/live/components/table_component.html.heex
+++ b/lib/exq_ui_web/live/components/table_component.html.heex
@@ -2,38 +2,57 @@
   <div class="row align-items-center">
     <div class="col-6">
       <%= for %{name: name, label: label} <- @actions do %>
-          <button type="button" class="my-2 btn btn-danger btn-sm js-action" data-name={name} ><%= label %></button>
+        <button type="button" class="my-2 btn btn-danger btn-sm js-action" data-name={name}>
+          <%= label %>
+        </button>
       <% end %>
     </div>
     <div class="col-6">
-      <.live_component module={ExqUIWeb.PaginationComponent} id="pagination" total={@total} current_page={@current_page} page_size={@page_size} />
+      <.live_component
+        module={ExqUIWeb.PaginationComponent}
+        id="pagination"
+        total={@total}
+        current_page={@current_page}
+        page_size={@page_size}
+      />
     </div>
   </div>
   <div class="row">
     <div class="col-12">
-      <%= f = form_for :table, "#", [phx_submit: :action] %>
-      <button type="submit" class="btn btn-primary js-submit-button" style="display:none">Submit</button>
-      <%= hidden_input(f, :action, class: "js-hidden-submit") %>
-      <table class="table table-bordered" id={@id}>
-        <thead>
-          <tr>
-            <th class="text-center"><input class="form-check-input js-select-all-rows" type="checkbox" value=""></th>
-            <%= for %{header: header} <- @columns do %>
+      <%= form_for :table, "#", [phx_submit: :action], fn f -> %>
+        <button type="submit" class="btn btn-primary js-submit-button" style="display:none">
+          Submit
+        </button>
+        <%= hidden_input(f, :action, class: "js-hidden-submit") %>
+        <table class="table table-bordered" id={@id}>
+          <thead>
+            <tr>
+              <th class="text-center">
+                <input class="form-check-input js-select-all-rows" type="checkbox" value="" />
+              </th>
+              <%= for %{header: header} <- @columns do %>
                 <th scope="col"><%= header %></th>
-            <% end %>
-          </tr>
-        </thead>
-        <tbody>
-          <%= for item <- @items do %>
+              <% end %>
+            </tr>
+          </thead>
+          <tbody>
+            <%= for item <- @items do %>
               <tr>
-                <td class="text-center"><%= checkbox(f, item.id, hidden_input: false, checked_value: item.raw, class: "form-check-input js-select-row") %></td>
+                <td class="text-center">
+                  <%= checkbox(f, item.id,
+                    hidden_input: false,
+                    checked_value: item.raw,
+                    class: "form-check-input js-select-row"
+                  ) %>
+                </td>
                 <%= for %{accessor: accessor} = column <- @columns do %>
-                    <td class={column[:text_break] && "text-break"}><%= accessor.(item) %></td>
+                  <td class={column[:text_break] && "text-break"}><%= accessor.(item) %></td>
                 <% end %>
               </tr>
-          <% end %>
-        </tbody>
-      </table>
+            <% end %>
+          </tbody>
+        </table>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/lib/exq_ui_web/live/dead_live/index.html.heex b/lib/exq_ui_web/live/dead_live/index.html.heex
index 47c21d3..75357a9 100644
--- a/lib/exq_ui_web/live/dead_live/index.html.heex
+++ b/lib/exq_ui_web/live/dead_live/index.html.heex
@@ -1,2 +1,11 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.TableComponent} id="dead-table" actions={@actions} columns={@columns} items={@items} total={@total} current_page={@current_page} page_size={@page_size}  />
+<.live_component
+  module={ExqUIWeb.TableComponent}
+  id="dead-table"
+  actions={@actions}
+  columns={@columns}
+  items={@items}
+  total={@total}
+  current_page={@current_page}
+  page_size={@page_size}
+/>
diff --git a/lib/exq_ui_web/live/dead_live/show.html.heex b/lib/exq_ui_web/live/dead_live/show.html.heex
index 4728ed9..120b64b 100644
--- a/lib/exq_ui_web/live/dead_live/show.html.heex
+++ b/lib/exq_ui_web/live/dead_live/show.html.heex
@@ -1,2 +1,7 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.JobDetailsComponent} id="jobs-details" item={@item} actions={@actions} />
+<.live_component
+  module={ExqUIWeb.JobDetailsComponent}
+  id="jobs-details"
+  item={@item}
+  actions={@actions}
+/>
diff --git a/lib/exq_ui_web/live/queue_live/index.html.heex b/lib/exq_ui_web/live/queue_live/index.html.heex
index d3ae379..773f334 100644
--- a/lib/exq_ui_web/live/queue_live/index.html.heex
+++ b/lib/exq_ui_web/live/queue_live/index.html.heex
@@ -9,19 +9,28 @@
   </thead>
   <tbody>
     <%= for queue <- @queues do %>
-        <tr>
-          <td>
-            <span>
-              <%= live_redirect queue.name, class: "nounderline", to: Routes.queue_show_path(@socket, queue.name) %>
-            </span>
-          </td>
-          <td><%= queue.count %></td>
-          <td>
-            <span>
-              <%= link "Delete", class: "btn btn-danger btn-sm", to: "#", phx_click: "delete", phx_value_name: queue.name, data: [confirm: "Are you sure?"] %>
-            </span>
-          </td>
-        </tr>
+      <tr>
+        <td>
+          <span>
+            <%= live_redirect(queue.name,
+              class: "nounderline",
+              to: Routes.queue_show_path(@socket, queue.name)
+            ) %>
+          </span>
+        </td>
+        <td><%= queue.count %></td>
+        <td>
+          <span>
+            <%= link("Delete",
+              class: "btn btn-danger btn-sm",
+              to: "#",
+              phx_click: "delete",
+              phx_value_name: queue.name,
+              data: [confirm: "Are you sure?"]
+            ) %>
+          </span>
+        </td>
+      </tr>
     <% end %>
   </tbody>
 </table>
diff --git a/lib/exq_ui_web/live/queue_live/show.html.heex b/lib/exq_ui_web/live/queue_live/show.html.heex
index 8f3a7ec..38e96eb 100644
--- a/lib/exq_ui_web/live/queue_live/show.html.heex
+++ b/lib/exq_ui_web/live/queue_live/show.html.heex
@@ -2,8 +2,19 @@
 <div class="row">
   <div col="col-16">
     <div class="d-flex align-items-center">
-      <span class="text-muted">Enqueued jobs in <b><%= @name %></b> queue: <b><%= @total %></b></span>
+      <span class="text-muted">
+        Enqueued jobs in <b><%= @name %></b> queue: <b><%= @total %></b>
+      </span>
     </div>
   </div>
 </div>
-<.live_component module={ExqUIWeb.TableComponent} id="queues-table" actions={@actions} columns={@columns} items={@items} total={@total} current_page={@current_page} page_size={@page_size} />
+<.live_component
+  module={ExqUIWeb.TableComponent}
+  id="queues-table"
+  actions={@actions}
+  columns={@columns}
+  items={@items}
+  total={@total}
+  current_page={@current_page}
+  page_size={@page_size}
+/>
diff --git a/lib/exq_ui_web/live/recurring_live/index.html.heex b/lib/exq_ui_web/live/recurring_live/index.html.heex
index 17df406..58a069f 100644
--- a/lib/exq_ui_web/live/recurring_live/index.html.heex
+++ b/lib/exq_ui_web/live/recurring_live/index.html.heex
@@ -21,25 +21,42 @@
         </thead>
         <tbody>
           <%= for item <- @items do %>
-              <tr>
-                <td>
-                  <%= form_for :active, "#", [id: "schedule-#{item.schedule.name}", phx_change: :active, class: "mb-0 form-check form-switch form-check-inline", style: "margin: auto;display: flex;justify-content: center"], fn f -> %>
-                    <%= hidden_input(f, :name, value: item.schedule.name) %>
-                    <%= hidden_input(f, :enabled, value: !item.schedule.schedule_opts.enabled) %>
-                    <%= checkbox(f, :toggle, value: item.schedule.schedule_opts.enabled, class: "form-check-input", role: "switch", title: "disable") %>
-                  <% end %>
-                </td>
-                <td><%= item.schedule.name %></td>
-                <td class="text-break"><%= item.schedule.description %></td>
-                <td class="text-nowrap"><%= item.cron %></td>
-                <td><%= item.schedule.timezone %></td>
-                <td class="text-nowrap"><%= human_time(item.last_run) %></td>
-                <td class="text-nowrap" style={!item.schedule.schedule_opts.enabled && "text-decoration: line-through"} ><%= human_time(item.next_run) %></td>
-                <td><%= item.schedule.job.queue %></td>
-                <td><%= item.schedule.job.class %></td>
-                <td class="text-break"><%= inspect(item.schedule.job.args) %></td>
-                <td class="text-nowrap"><%= link "Enqueue Now", class: "btn btn-danger btn-sm", to: "#", phx_click: "enqueue_now", phx_value_name: item.schedule.name %></td>
-              </tr>
+            <tr>
+              <td>
+                <%= form_for :active, "#", [id: "schedule-#{item.schedule.name}", phx_change: :active, class: "mb-0 form-check form-switch form-check-inline", style: "margin: auto;display: flex;justify-content: center"], fn f -> %>
+                  <%= hidden_input(f, :name, value: item.schedule.name) %>
+                  <%= hidden_input(f, :enabled, value: !item.schedule.schedule_opts.enabled) %>
+                  <%= checkbox(f, :toggle,
+                    value: item.schedule.schedule_opts.enabled,
+                    class: "form-check-input",
+                    role: "switch",
+                    title: "disable"
+                  ) %>
+                <% end %>
+              </td>
+              <td><%= item.schedule.name %></td>
+              <td class="text-break"><%= item.schedule.description %></td>
+              <td class="text-nowrap"><%= item.cron %></td>
+              <td><%= item.schedule.timezone %></td>
+              <td class="text-nowrap"><%= human_time(item.last_run) %></td>
+              <td
+                class="text-nowrap"
+                style={!item.schedule.schedule_opts.enabled && "text-decoration: line-through"}
+              >
+                <%= human_time(item.next_run) %>
+              </td>
+              <td><%= item.schedule.job.queue %></td>
+              <td><%= item.schedule.job.class %></td>
+              <td class="text-break"><%= inspect(item.schedule.job.args) %></td>
+              <td class="text-nowrap">
+                <%= link("Enqueue Now",
+                  class: "btn btn-danger btn-sm",
+                  to: "#",
+                  phx_click: "enqueue_now",
+                  phx_value_name: item.schedule.name
+                ) %>
+              </td>
+            </tr>
           <% end %>
         </tbody>
       </table>
diff --git a/lib/exq_ui_web/live/retry_live/index.html.heex b/lib/exq_ui_web/live/retry_live/index.html.heex
index ea08910..f7d4801 100644
--- a/lib/exq_ui_web/live/retry_live/index.html.heex
+++ b/lib/exq_ui_web/live/retry_live/index.html.heex
@@ -1,3 +1,11 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.TableComponent} id="retry-table" actions={@actions} columns={@columns} items={@items} total={@total} current_page={@current_page} page_size={@page_size} />
-
+<.live_component
+  module={ExqUIWeb.TableComponent}
+  id="retry-table"
+  actions={@actions}
+  columns={@columns}
+  items={@items}
+  total={@total}
+  current_page={@current_page}
+  page_size={@page_size}
+/>
diff --git a/lib/exq_ui_web/live/retry_live/show.html.heex b/lib/exq_ui_web/live/retry_live/show.html.heex
index 4728ed9..120b64b 100644
--- a/lib/exq_ui_web/live/retry_live/show.html.heex
+++ b/lib/exq_ui_web/live/retry_live/show.html.heex
@@ -1,2 +1,7 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.JobDetailsComponent} id="jobs-details" item={@item} actions={@actions} />
+<.live_component
+  module={ExqUIWeb.JobDetailsComponent}
+  id="jobs-details"
+  item={@item}
+  actions={@actions}
+/>
diff --git a/lib/exq_ui_web/live/scheduled_live/index.html.heex b/lib/exq_ui_web/live/scheduled_live/index.html.heex
index 8d84cbe..3b83c96 100644
--- a/lib/exq_ui_web/live/scheduled_live/index.html.heex
+++ b/lib/exq_ui_web/live/scheduled_live/index.html.heex
@@ -1,2 +1,11 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.TableComponent} id="scheduled-table" actions={@actions} columns={@columns} items={@items} total={@total} current_page={@current_page} page_size={@page_size} />
+<.live_component
+  module={ExqUIWeb.TableComponent}
+  id="scheduled-table"
+  actions={@actions}
+  columns={@columns}
+  items={@items}
+  total={@total}
+  current_page={@current_page}
+  page_size={@page_size}
+/>
diff --git a/lib/exq_ui_web/live/scheduled_live/show.html.heex b/lib/exq_ui_web/live/scheduled_live/show.html.heex
index 4728ed9..120b64b 100644
--- a/lib/exq_ui_web/live/scheduled_live/show.html.heex
+++ b/lib/exq_ui_web/live/scheduled_live/show.html.heex
@@ -1,2 +1,7 @@
 <.live_component module={ExqUIWeb.StatsComponent} id="stats" />
-<.live_component module={ExqUIWeb.JobDetailsComponent} id="jobs-details" item={@item} actions={@actions} />
+<.live_component
+  module={ExqUIWeb.JobDetailsComponent}
+  id="jobs-details"
+  item={@item}
+  actions={@actions}
+/>
diff --git a/lib/exq_ui_web/templates/layout/live.html.heex b/lib/exq_ui_web/templates/layout/live.html.heex
index 9eb31ed..1df0686 100644
--- a/lib/exq_ui_web/templates/layout/live.html.heex
+++ b/lib/exq_ui_web/templates/layout/live.html.heex
@@ -1,11 +1,23 @@
 <.live_component module={ExqUIWeb.NavBarComponent} id="nav-bar" />
 <main role="main" class="container">
-  <p style="display:none" class="invisible alert alert-info" role="alert"
+  <p
+    style="display:none"
+    class="invisible alert alert-info"
+    role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="info"><%= live_flash(@flash, :info) %></p>
+    phx-value-key="info"
+  >
+    <%= live_flash(@flash, :info) %>
+  </p>
 
-  <p style="display:none" class="alert alert-danger" role="alert"
+  <p
+    style="display:none"
+    class="alert alert-danger"
+    role="alert"
     phx-click="lv:clear-flash"
-    phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+    phx-value-key="error"
+  >
+    <%= live_flash(@flash, :error) %>
+  </p>
   <%= @inner_content %>
 </main>
diff --git a/lib/exq_ui_web/templates/layout/root.html.heex b/lib/exq_ui_web/templates/layout/root.html.heex
index dce89e5..21c6bb9 100644
--- a/lib/exq_ui_web/templates/layout/root.html.heex
+++ b/lib/exq_ui_web/templates/layout/root.html.heex
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en" phx-socket={live_socket_path(@conn)}>
   <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <%= csrf_meta_tag() %>
-    <%= live_title_tag assigns[:page_title] || "ExqUI" %>
-    <style><%= raw(render("app.css")) %></style>
-    <script><%= raw(render("app.js")) %></script>
+    <%= live_title_tag(assigns[:page_title] || "ExqUI") %>
+    <style>
+      <%= raw(render("app.css")) %>
+    </style>
+    <script>
+      <%= raw(render("app.js")) %>
+    </script>
   </head>
   <body>
     <%= @inner_content %>