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-start justify-content-sm-center">
  <div class="col-md-12 col-lg-10 col-xl-9">

    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
      <h2 class="mb-3 mb-sm-0">
        <%= icon_div @socket, "bi-clock-history", [class: "icon baseline"] %>
        My Shift Templates
      </h2>
      <%= live_patch to: Routes.shift_template_index_path(@socket, :new), class: "btn btn-primary" do %>
        <%= icon_div @socket, "bi-plus-circle-dotted", [class: "icon baseline me-1"] %>
        New Shift Template
      <% end %>
    </div>


    <div class="row">

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

        <div class="col-12 col-md-6 col-xl-4 ">

          <div class="card mt-4">
            <h5 class="card-header">
              <span class="visually-hidden">Subject:</span>
              <%= shift.subject %>
            </h5>
            <div class="card-body">

              <table class="table table-borderless table-nonfluid table-sm">
                <tbody>
                  <tr>
                    <th scope="row" class="text-end">
                      <%= icon_div @socket, "bi-hourglass", [class: "icon baseline text-muted"] %>
                      <span class="visually-hidden">Hours</span>
                    </th>
                    <td>
                      <%= 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")
                        %>
                    </td>
                  </tr>

                  <tr>
                    <th scope="row" class="text-end">
                      <%= icon_div @socket, "bi-geo", [class: "icon baseline text-muted"] %>
                      <span class="visually-hidden">Location</span>
                    </th>
                    <td>
                      <%= if shift.location do %>
                        <%= shift.location %>
                      <% else %>
                        <span class="text-muted fst-italic">none</span>
                      <% end %>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row" class="text-end">
                      <%= icon_div @socket, "bi-justify-left", [class: "icon baseline text-muted"] %>
                      <span class="visually-hidden">Description</span>
                    </th>
                    <td>
                      <%= if shift.description do %>
                        <%= shift.description %>
                      <% else %>
                        <span class="text-muted fst-italic">none</span>
                      <% end %>
                    </td>
                  </tr>
                </tbody>
              </table>

              <div class="text-end">

                <%= if Roles.can?(@current_user, shift, :delete) do %>
                  <%= link to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"], class: "btn btn-outline-danger btn-sm text-nowrap" do %>
                    <%= icon_div @socket, "bi-trash", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
                    Delete
                  <% end %>
                <% end %>

                <%= if Roles.can?(@current_user, shift, :edit) do %>
                  <%= live_patch to: Routes.shift_template_index_path(@socket, :edit, shift), class: "btn btn-primary btn-sm text-nowrap" do %>
                    <%= icon_div @socket, "bi-pencil", [class: "icon baseline", style: "margin-right:0.125rem;"] %>
                    Edit
                  <% end %>
                <% end %>
              </div>
            </div>
          </div>

        </div>

      <% end %>

    </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_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>