loading

<Kit.Phoenix.Roles.LabelPanel.label_panel
  loading={Kit.Phoenix.Loading.sentence("The amount due had not loaded.")}
  aria-label="Loading amount due"
  heading="Amount due"
  heading_rest={%{"aria-hidden": "true"}}
>
  <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "240.00"))} aria-hidden="true" />
</Kit.Phoenix.Roles.LabelPanel.label_panel>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Payment details">
  <:content>
  <Kit.Phoenix.Embed.embed id="embed-card" desktop_block_size={143} phone_block_size={298} loading={Kit.Phoenix.Loading.sentence("The card details had not loaded.")} aria-label="Card details" />
  <Kit.Phoenix.Roles.Agreement.agreement>
    <:text rest={%{id: "embed-consent"}}>Pay confirms your agreement to the <a href="#embed-consent">service terms</a>.</:text>
    <:action><Kit.Phoenix.Roles.PrimaryAction.primary_action id="embed-pay">Pay</Kit.Phoenix.Roles.PrimaryAction.primary_action></:action>
  </Kit.Phoenix.Roles.Agreement.agreement>
  <footer id="embed-footer"><a href="#embed-case">Back to payment details</a></footer>
  </:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<p class="specimen-case-line">A Help answer loading.</p>
<Kit.Phoenix.Layouts.Help.help id="state-loading-help" subject_state={Kit.Phoenix.State.loading("The invoice help had not loaded.")} topic_index_label="Topics">
  <:topic>Review an invoice</:topic>
  <:topic_index>
    <ul>
      <li><Kit.Phoenix.Roles.Destination.destination href="../state-loading/" current>Review an invoice</Kit.Phoenix.Roles.Destination.destination></li>
      <li><Kit.Phoenix.Roles.Destination.destination href="../state-loading/">Send an invoice</Kit.Phoenix.Roles.Destination.destination></li>
    </ul>
  </:topic_index>
  <:answer rest={%{"aria-label": "Loading invoice help"}}>
    <p aria-hidden="true">Check the recipient and amount before sending the invoice.</p>
    <p aria-hidden="true">Open the hirer record to review their billing details.</p>
  </:answer>
  <:human_support id="loading-help-support" labelledby="loading-help-support-title" heading="Human support" heading_rest={%{id: "loading-help-support-title"}}>
    <Kit.Phoenix.Roles.SecondaryAction.secondary_action href="mailto:support@example.test">Write to support</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
  </:human_support>
</Kit.Phoenix.Layouts.Help.help>
<p class="specimen-case-line">Calendar bands, columns and days loading.</p>
<Kit.Phoenix.Layouts.Calendar.calendar :let={subject_region} subject_state={Kit.Phoenix.State.none()} range_days={Kit.Phoenix.Time.day_range(reader(), ~D[2025-04-14], ~D[2025-04-15])} toolbar_rest={%{"aria-label": "Calendar controls"}} scope_id="state-loading-calendar-filters" filters_label="Filters">
  <:today label="Today" /><:previous label="Previous week" href="?week=previous" rest={%{rel: "prev"}} /><:next label="Next week" href="?week=next" rest={%{rel: "next"}} /><:date><Kit.Phoenix.Roles.FormGroup.form_group id="loading-date"><:label>Go to a date</:label><:control :let={binding}><Kit.Phoenix.Roles.DateField.date_field binding={binding} reader={reader()} name="date" value={Kit.Phoenix.Roles.DateField.Committed.day(Kit.Phoenix.Time.day(reader(), ~D[2025-04-14]))} today={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} direction={:either} /></:control></Kit.Phoenix.Roles.FormGroup.form_group></:date>
  <:scope><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-scope-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "state-loading-calendar-scope"}}><:label rest={%{for: "state-loading-calendar-scope"}}>Hall</:label><:option value="all">All halls</:option></Kit.Phoenix.Roles.FormGroup.form_group></:scope>
  <:view><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-view-form-group"><:label>View</:label><:control_set :let={binding}><Kit.Phoenix.Roles.SegmentedControl.segmented_control binding={binding} name="state-loading-calendar-view" value="week"><:option value="week">Week</:option><:option value="day">Day</:option><:option value="month">Month</:option></Kit.Phoenix.Roles.SegmentedControl.segmented_control></:control_set></Kit.Phoenix.Roles.FormGroup.form_group></:view>
  <Kit.Phoenix.Layouts.Calendar.desk_grid subject_region={subject_region} columns={2} time_gutter_rest={%{"aria-label": "Times"}} bands_loading={Kit.Phoenix.Loading.sentence("The whole-day bookings had not loaded.")} bands_rest={%{"aria-label": "Loading whole-day bookings"}}>
    <:column_head column={Kit.Phoenix.Layouts.Calendar.Column.day(Kit.Phoenix.Time.day(reader(), ~D[2025-04-14]))} />
    <:column_head column={Kit.Phoenix.Layouts.Calendar.Column.day(Kit.Phoenix.Time.day(reader(), ~D[2025-04-15]))} />
    <:band first={1} last={2} stack={1} rest={%{"aria-hidden": "true"}}>Hall closed for rewiring</:band>
    <:hour :for={hour <- ([Kit.Phoenix.Time.clock(reader(), ~T[09:00:00]), Kit.Phoenix.Time.clock(reader(), ~T[10:00:00]), Kit.Phoenix.Time.clock(reader(), ~T[11:00:00])])} time={hour} />
    <:column loading={Kit.Phoenix.Loading.sentence("Monday's bookings had not loaded.")} rest={%{"aria-label": "Loading Monday's bookings"}}>
      <Kit.Phoenix.Layouts.Calendar.block name="Board meeting" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 08:00:00Z], ~U[2025-04-14 10:00:00Z])} kind="Meeting" aria-hidden="true" style="grid-row: 1 / span 2;" />
    </:column>
    <:column loading={Kit.Phoenix.Loading.sentence("Tuesday's bookings had not loaded.")} rest={%{"aria-label": "Loading Tuesday's bookings"}}>
      <Kit.Phoenix.Layouts.Calendar.block name="Yoga class" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-15 09:00:00Z], ~U[2025-04-15 11:00:00Z])} kind="Booking" aria-hidden="true" style="grid-row: 2 / span 2;" />
    </:column>
  </Kit.Phoenix.Layouts.Calendar.desk_grid>
  <Kit.Phoenix.Layouts.Calendar.days subject_region={subject_region}>
    <Kit.Phoenix.Layouts.Calendar.day loading={Kit.Phoenix.Loading.sentence("Monday's bookings had not loaded.")} aria-label="Loading Monday's bookings" day={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} heading_rest={%{"aria-hidden": "true"}}>
      <Kit.Phoenix.Layouts.Calendar.band_row name="Hall closed for rewiring" loading={Kit.Phoenix.Loading.sentence("The whole-day bookings had not loaded.")} aria-label="Loading whole-day bookings" row_rest={%{"aria-hidden": "true"}} />
      <Kit.Phoenix.Layouts.Calendar.item_row name="Board meeting" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 08:00:00Z], ~U[2025-04-14 10:00:00Z])} kind="Meeting" standings={["uncovered"]} loading={Kit.Phoenix.Loading.sentence("Monday's bookings had not loaded.")} aria-label="Loading Monday's bookings" row_rest={%{"aria-hidden": "true"}} />
    </Kit.Phoenix.Layouts.Calendar.day>
    <Kit.Phoenix.Layouts.Calendar.day day={Kit.Phoenix.Time.day(reader(), ~D[2025-04-15])}>
      <Kit.Phoenix.Layouts.Calendar.item_row name="Yoga class" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-15 09:00:00Z], ~U[2025-04-15 11:00:00Z])} kind="Booking" loading={Kit.Phoenix.Loading.sentence("Tuesday's bookings had not loaded.")} aria-label="Loading Tuesday's bookings" row_rest={%{"aria-hidden": "true"}} />
    </Kit.Phoenix.Layouts.Calendar.day>
  </Kit.Phoenix.Layouts.Calendar.days>
</Kit.Phoenix.Layouts.Calendar.calendar>
<p class="specimen-case-line">A Calendar whose whole week is loading.</p>
<Kit.Phoenix.Layouts.Calendar.calendar :let={subject_region} subject_state={Kit.Phoenix.State.loading("This week's bookings had not loaded.")} range_days={Kit.Phoenix.Time.day_range(reader(), ~D[2025-04-21], ~D[2025-04-23])} toolbar_rest={%{"aria-label": "Calendar controls"}} scope_id="state-loading-calendar-week-filters" filters_label="Filters">
  <:today label="Today" /><:previous label="Previous week" href="?week=previous" rest={%{rel: "prev"}} /><:next label="Next week" href="?week=next" rest={%{rel: "next"}} /><:date><Kit.Phoenix.Roles.FormGroup.form_group id="loading-date-2"><:label>Go to a date</:label><:control :let={binding}><Kit.Phoenix.Roles.DateField.date_field binding={binding} reader={reader()} name="date" value={Kit.Phoenix.Roles.DateField.Committed.day(Kit.Phoenix.Time.day(reader(), ~D[2025-04-21]))} today={Kit.Phoenix.Time.day(reader(), ~D[2025-04-21])} direction={:either} /></:control></Kit.Phoenix.Roles.FormGroup.form_group></:date>
  <:scope><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-week-scope-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "state-loading-calendar-week-scope"}}><:label rest={%{for: "state-loading-calendar-week-scope"}}>Hall</:label><:option value="all">All halls</:option></Kit.Phoenix.Roles.FormGroup.form_group></:scope>
  <:view><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-week-view-form-group"><:label>View</:label><:control_set :let={binding}><Kit.Phoenix.Roles.SegmentedControl.segmented_control binding={binding} name="state-loading-calendar-week-view" value="week"><:option value="week">Week</:option><:option value="day">Day</:option><:option value="month">Month</:option></Kit.Phoenix.Roles.SegmentedControl.segmented_control></:control_set></Kit.Phoenix.Roles.FormGroup.form_group></:view>
  <Kit.Phoenix.Layouts.Calendar.desk_grid subject_region={subject_region} columns={3} time_gutter_rest={%{"aria-label": "Times"}} aria-label="Loading this week's bookings">
    <:column_head :for={date <- Date.range(~D[2025-04-21], ~D[2025-04-23])} column={Kit.Phoenix.Layouts.Calendar.Column.day(Kit.Phoenix.Time.day(reader(), date))} />
    <:hour :for={hour <- (for hour <- [~T[09:00:00], ~T[10:00:00], ~T[11:00:00], ~T[12:00:00]], do: Kit.Phoenix.Time.clock(reader(), hour))} time={hour} />
    <:column>
      <Kit.Phoenix.Layouts.Calendar.block name="Board meeting" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-21 08:00:00Z], ~U[2025-04-21 10:00:00Z])} kind="Meeting" aria-hidden="true" style="grid-row: 1 / span 2;" />
    </:column>
    <:column>
      <Kit.Phoenix.Layouts.Calendar.block name="Yoga class" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-22 09:00:00Z], ~U[2025-04-22 11:00:00Z])} kind="Booking" aria-hidden="true" style="grid-row: 2 / span 2;" />
    </:column>
    <:column>
      <Kit.Phoenix.Layouts.Calendar.block name="Choir practice" span={Kit.Phoenix.Time.interval(reader(), ~U[2025-04-23 10:00:00Z], ~U[2025-04-23 11:00:00Z])} kind="Booking" aria-hidden="true" style="grid-row: 3 / span 1;" />
    </:column>
  </Kit.Phoenix.Layouts.Calendar.desk_grid>
  <Kit.Phoenix.Layouts.Calendar.days subject_region={subject_region} aria-label="Loading this week's bookings">
    <Kit.Phoenix.Layouts.Calendar.day :for={{date, name, kind, from, to} <- [{~D[2025-04-21], "Board meeting", "Meeting", ~U[2025-04-21 08:00:00Z], ~U[2025-04-21 10:00:00Z]}, {~D[2025-04-22], "Yoga class", "Booking", ~U[2025-04-22 09:00:00Z], ~U[2025-04-22 11:00:00Z]}, {~D[2025-04-23], "Choir practice", "Booking", ~U[2025-04-23 10:00:00Z], ~U[2025-04-23 11:00:00Z]}]} day={Kit.Phoenix.Time.day(reader(), date)} heading_rest={%{"aria-hidden": "true"}}>
      <Kit.Phoenix.Layouts.Calendar.item_row name={name} span={Kit.Phoenix.Time.interval(reader(), from, to)} kind={kind} row_rest={%{"aria-hidden": "true"}} />
    </Kit.Phoenix.Layouts.Calendar.day>
  </Kit.Phoenix.Layouts.Calendar.days>
</Kit.Phoenix.Layouts.Calendar.calendar>
<p class="specimen-case-line">A Calendar whose whole month is loading.</p>
<%= for bookings <- [[{"Toddler group", "Booking", ~U[2027-02-01 09:30:00Z], ~U[2027-02-01 11:00:00Z]}, {"Board meeting", "Meeting", ~U[2027-02-03 10:00:00Z], ~U[2027-02-03 12:00:00Z]}, {"Yoga class", "Booking", ~U[2027-02-04 18:00:00Z], ~U[2027-02-04 19:00:00Z]}, {"Choir practice", "Booking", ~U[2027-02-09 19:00:00Z], ~U[2027-02-09 21:00:00Z]}, {"Toddler group", "Booking", ~U[2027-02-11 09:30:00Z], ~U[2027-02-11 11:00:00Z]}, {"Board meeting", "Meeting", ~U[2027-02-15 10:00:00Z], ~U[2027-02-15 12:00:00Z]}, {"Yoga class", "Booking", ~U[2027-02-17 18:00:00Z], ~U[2027-02-17 19:00:00Z]}, {"Craft fair", "Booking", ~U[2027-02-18 11:00:00Z], ~U[2027-02-18 15:00:00Z]}, {"Choir practice", "Booking", ~U[2027-02-23 19:00:00Z], ~U[2027-02-23 21:00:00Z]}, {"Toddler group", "Booking", ~U[2027-02-26 09:30:00Z], ~U[2027-02-26 11:00:00Z]}]] do %>
<Kit.Phoenix.Layouts.Calendar.calendar :let={subject_region} subject_state={Kit.Phoenix.State.loading("This month's bookings had not loaded.")} range_days={Kit.Phoenix.Time.month(reader(), 2027, 2)} toolbar_rest={%{"aria-label": "Calendar controls"}} scope_id="state-loading-calendar-month-filters" filters_label="Filters">
  <:today label="Today" /><:previous label="Previous month" href="?month=previous" rest={%{rel: "prev"}} /><:next label="Next month" href="?month=next" rest={%{rel: "next"}} /><:date><Kit.Phoenix.Roles.FormGroup.form_group id="loading-date-3"><:label>Go to a date</:label><:control :let={binding}><Kit.Phoenix.Roles.DateField.date_field binding={binding} reader={reader()} name="date" value={Kit.Phoenix.Roles.DateField.Committed.day(Kit.Phoenix.Time.day(reader(), ~D[2027-02-01]))} today={Kit.Phoenix.Time.day(reader(), ~D[2027-02-01])} direction={:either} /></:control></Kit.Phoenix.Roles.FormGroup.form_group></:date>
  <:scope><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-month-scope-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "state-loading-calendar-month-scope"}}><:label rest={%{for: "state-loading-calendar-month-scope"}}>Hall</:label><:option value="all">All halls</:option></Kit.Phoenix.Roles.FormGroup.form_group></:scope>
  <:view><Kit.Phoenix.Roles.FormGroup.form_group id="state-loading-calendar-month-view-form-group"><:label>View</:label><:control_set :let={binding}><Kit.Phoenix.Roles.SegmentedControl.segmented_control binding={binding} name="state-loading-calendar-month-view" value="month"><:option value="week">Week</:option><:option value="day">Day</:option><:option value="month">Month</:option></Kit.Phoenix.Roles.SegmentedControl.segmented_control></:control_set></Kit.Phoenix.Roles.FormGroup.form_group></:view>
  <Kit.Phoenix.Layouts.Calendar.month_grid subject_region={subject_region} columns={7} aria-label="Loading this month's bookings">
    <:column_head :for={weekday <- ~w(Mon Tue Wed Thu Fri Sat Sun)}><strong>{weekday}</strong></:column_head>
    <Kit.Phoenix.Layouts.Calendar.month_cell :for={date <- Date.range(~D[2027-02-01], ~D[2027-02-28])} day={Kit.Phoenix.Time.day_number(reader(), date)}>
      <:item :for={{name, _kind, from, _to} <- Enum.filter(bookings, &(DateTime.to_date(elem(&1, 2)) == date))} name={name} href="../record/" start={Kit.Phoenix.Time.time_of_day(reader(), from)} />
    </Kit.Phoenix.Layouts.Calendar.month_cell>
  </Kit.Phoenix.Layouts.Calendar.month_grid>
  <Kit.Phoenix.Layouts.Calendar.days subject_region={subject_region} aria-label="Loading this month's bookings">
    <Kit.Phoenix.Layouts.Calendar.day :for={date <- Date.range(~D[2027-02-01], ~D[2027-02-28])} day={Kit.Phoenix.Time.day(reader(), date)} heading_rest={%{"aria-hidden": "true"}}>
      <Kit.Phoenix.Layouts.Calendar.item_row :for={{name, kind, from, to} <- Enum.filter(bookings, &(DateTime.to_date(elem(&1, 2)) == date))} name={name} span={Kit.Phoenix.Time.interval(reader(), from, to)} kind={kind} row_rest={%{"aria-hidden": "true"}} />
    </Kit.Phoenix.Layouts.Calendar.day>
  </Kit.Phoenix.Layouts.Calendar.days>
</Kit.Phoenix.Layouts.Calendar.calendar>
<% end %>
<p class="specimen-case-line">Each List region loading.</p>
<Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.loading("The invoices had not loaded.")}
  toolbar_loading={Kit.Phoenix.Loading.sentence("The invoice views and controls had not loaded.")}
  toolbar_rest={%{"aria-label": "Loading invoice views and controls"}}
 filters_id="state-loading-list-filters" filters_label="Filters" filters_form_rest={%{}}>
  <:saved_views>
    <Kit.Phoenix.Roles.LocalTabs.local_tabs id="state-loading-saved-views" label="Saved views" aria-hidden="true">
      <:tab href="?view=all&page=1">All invoices</:tab>
      <:tab href="?view=awaiting&page=1">Awaiting payment</:tab>
      <:tab href="?view=overdue&page=1">Overdue</:tab>
      <:tab href="?view=paid&page=1">Paid this month</:tab>
    </Kit.Phoenix.Roles.LocalTabs.local_tabs>
  </:saved_views>
  <:search id="state-loading-list-filter-form-group" label="Search invoices" control_rest={%{id: "state-loading-list-filter", placeholder: "Find invoices by hirer name"}} />
  <:filters><Kit.Phoenix.Layouts.List.sort id="state-loading-list-sort-form-group" columnless_order={false} control_value="invoice" control_rest={%{id: "state-loading-list-sort"}}>
        <:label>Sort</:label>
        <:option value="invoice">Invoice, A to Z</:option>
        <:option value="invoice-desc">Invoice, Z to A</:option>
        <:option value="amount-desc">Amount due, largest first</:option>
        <:option value="amount">Amount due, smallest first</:option>
      </Kit.Phoenix.Layouts.List.sort></:filters>
  <:columns_selection_actions loading={Kit.Phoenix.Loading.sentence("The columns and selection actions had not loaded.")} rest={%{"aria-label": "Loading columns and selection actions"}}>
    <Kit.Phoenix.Layouts.List.columns id="loading-list-columns" on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order" loading={Kit.Phoenix.Loading.sentence("The columns and selection actions had not loaded.")} aria-label="Loading columns and selection actions">
      <:subject id="loading-list-columns-invoice" reason="Names each invoice">Invoice</:subject>
      <:column id="loading-list-columns-amount-due" checked>Amount due</:column>
    </Kit.Phoenix.Layouts.List.columns>
  </:columns_selection_actions>
  <:rows rest={%{"aria-label": "Loading invoices"}}>
    <Kit.Phoenix.Table.rows_table aria-hidden="true">
      <:caption>Invoices</:caption>
      <:subject_heading label="Invoice" sort="ascending" href="?sort=invoice-desc" />
      <:column_headings label="Amount due" kind="amount" sort="unsorted" href="?sort=amount-desc">Amount due</:column_headings>
      <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))])}]}>Oakmere Primary School</:row>
      <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))])}]}>Oakmere Primary School</:row>
    </Kit.Phoenix.Table.rows_table>
    <Kit.Phoenix.Layouts.List.day loading={Kit.Phoenix.Loading.sentence("The invoices had not loaded.")} aria-label="Loading invoices">
      <:heading rest={%{"aria-hidden": "true"}}><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} /></:heading>
      <Kit.Phoenix.Layouts.List.entry :let={subject} time={Kit.Phoenix.Time.time_of_day(reader(), ~U[2025-04-14 15:45:00Z])} loading={Kit.Phoenix.Loading.sentence("The invoices had not loaded.")}>
        <:subject href="../record/">Invoice OH-INV-003</:subject>
        Maya Patel sent {subject} to Oakmere Primary School.
      </Kit.Phoenix.Layouts.List.entry>
    </Kit.Phoenix.Layouts.List.day>
  </:rows>
  <:count_continuation loading={Kit.Phoenix.Loading.sentence("The invoice pages had not loaded.")} rest={%{"aria-label": "Loading invoice pages"}}>
    <p aria-hidden="true">Invoice <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 1)} /> of <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 12)} /> ·&nbsp;<Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 1)} /> per page</p>
    <Kit.Phoenix.Roles.Pager.pager current_page={1} last_page={12} page_href={&"?view=all&page=#{&1}"} aria-label="Invoice pages" aria-hidden="true" />
  </:count_continuation>
</Kit.Phoenix.Layouts.List.list>