shift73k/lib/shift73k_web/live/shift_template_live/index.html.leex

<%= if @live_action in [:new, :edit] do %>
  <%= live_modal @socket, Shift73kWeb.ShiftTemplateLive.FormComponent,
    id: @shift_template.id || :new,
    title: @page_title,
    action: @live_action,
    shift_template: @shift_template,
    current_user: @current_user %>
<% end %>


<div class="row justify-content-center">
  <div class="col-md-12 col-lg-10 col-xl-9 ">

    <div class="d-flex justify-content-between d-flex align-items-center mb-4">
      <h2>
        <%= icon_div @socket, "bi-clock-history", [class: "icon baseline"] %>
        My Shift Templates
      </h2>
      <%= live_patch "New Shift Template", to: Routes.shift_template_index_path(@socket, :new), class: "btn btn-primary" %>
    </div>


    <div class="row justify-content-center">
      <div class="col-12 col-sm-11 col-md-10 col-lg-8 col-xl-7 ">

        <%= for shift <- @shift_templates do %>

          <div class="card mt-4">
            <div class="card-body">
              <h4 class="card-title"><%= shift.subject %></h4>
              <h5 class="card-subtitle mb-2 text-muted">
                <%= shift.start_time |> Calendar.strftime("%I:%M %p") %>
                &mdash;
                <%=
                  shift.start_time
                  |> Time.add((60 * 60 * shift.length_hours) + ((shift.length_minutes || 0) * 60))
                  |> Calendar.strftime("%I:%M %p")
                  %>
                <span class="fs-6">[<%= shift.timezone %>]</span>
              </h5>
              <p class="card-text">
                <table class="table table-borderless table-nonfluid">
                  <tbody>
                    <tr>
                      <th scope="row" class="text-end">Description</th>
                      <td>
                        <%= if shift.description do %>
                          <%= shift.description %>
                        <% else %>
                          <span class="text-muted fst-italic">empty</span>
                        <% end %>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row" class="text-end">Location</th>
                      <td>
                        <%= if shift.location do %>
                          <%= shift.location %>
                        <% else %>
                          <span class="text-muted fst-italic">empty</span>
                        <% end %>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </p>
              <a href="#" class="card-link">Card link</a>
              <a href="#" class="card-link">Another link</a>
            </div>
          </div>

        <% end %>


      </div>
    </div>



    <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Subject</th>
          <th>Description</th>
          <th>Location</th>
          <th>Timezone</th>
          <th>Start time</th>
          <th>Length</th>

          <th></th>
        </tr>
      </thead>
      <tbody id="shift_templates">
        <%= for shift <- @shift_templates do %>
          <tr id="shift_template-<%= shift.id %>">
            <td><%= shift.subject %></td>
            <td><%= shift.description %></td>
            <td><%= shift.location %></td>
            <td><%= shift.timezone %></td>
            <td><%= shift.start_time |> Calendar.strftime("%I:%M %p") %></td>
            <td><%= shift.length_hours %>h <%= shift.length_minutes || 0 %>m</td>

            <td>
              <span><%= live_redirect "Show", to: Routes.shift_template_show_path(@socket, :show, shift) %></span>
              <span><%= live_patch "Edit", to: Routes.shift_template_index_path(@socket, :edit, shift) %></span>
              <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"] %></span>
            </td>
          </tr>
        <% end %>
      </tbody>
    </table>
    </div>

  </div>
</div>