<div class="row justify-content-start justify-content-sm-center"> <div class="col-md-10 col-xl-10"> <h2 class="mb-3 mb-sm-0"> <%= icon_div @socket, "bi-card-list", [class: "icon baseline"] %> My Shifts </h2> <div class="row justify-content-start justify-content-sm-center"> <div class="col-md-10 col-xl-10"> <%# month navigation %> <div class="d-flex justify-content-between align-items-end my-4"> <h3 class="text-muted mb-0"> <%= Calendar.strftime(@cursor_date, "%B %Y") %> </h3> <div> <button type="button" phx-click="month-nav" phx-value-month="now" class="btn btn-info text-white" <%= if Map.get(@cursor_date, :month) == Map.get(Date.utc_today(), :month), do: "disabled" %>> <%= icon_div @socket, "bi-asterisk", [class: "icon baseline"] %> <span class="d-none d-sm-inline">Today</span> </button> <button type="button" phx-click="month-nav" phx-value-month="prev" class="btn btn-primary"> <%= icon_div @socket, "bi-chevron-left", [class: "icon baseline"] %> <span class="d-none d-sm-inline">Prev</span> </button> <button type="button" phx-click="month-nav" phx-value-month="next" class="btn btn-primary"> <span class="d-none d-sm-inline">Next</span> <%= icon_div @socket, "bi-chevron-right", [class: "icon baseline", style: "margin-left:0.125rem;"] %> </button> </div> </div> <dl> <%= for day <- Enum.to_list(@date_range) do %> <%= if Date.day_of_week(day, @current_user.week_start_at) == 1 do %> <div class="border-top mt-4 mb-4"></div> <% end %> <dt> <%= Calendar.strftime(day, "%A, %b %-d") %> </dt> <% day_shifts = Enum.filter(@shifts, fn s -> s.date == day end) %> <%= if !Enum.empty?(day_shifts) do %> <dd id="day-<%= day.day %>"> <%= for shift <- day_shifts do %> <div class="row gx-2" id="shift-<%= shift.id %>"> <div class="col-4 col-md-3 col-xl-2 text-end"> <div> <%= format_shift_time(shift.time_start) %> — <%= format_shift_time(shift.time_end) %> </div> <div style="font-size: smaller;"><%= shift.time_zone %></div> </div> <div class="col-8 col-md-9 col-xl-10"> <div> <%= shift.subject %> <%= if shift.location do %> <span class="text-muted">(<%= shift.location %>)</span> <% end %> </div> <%= if shift.description do %> <div style="font-size: smaller;"> <%= text_to_html shift.description %> </div> <% end %> <div style="font-size: smaller;"> <span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: shift.id, data: [confirm: "Are you sure?"] %></span> </div> </div> </div> <% end %> </dd> <% else %> <dd><em>Nothing scheduled</em></dd> <% end %> <% end %> </dl> </div> </div> </div> </div>