List

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action id="list-new-invoice" phx-click={Kit.Phoenix.Modal.open("list-new-invoice-dialog")}>New invoice</Kit.Phoenix.Roles.PrimaryAction.primary_action><a href="../layout-list/#layout-list">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 3, query: "", names: ["search"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Invoice reference search"}}>
      <:search id="list-scan-form-group" label="Search invoice references" scannable control_rest={%{id: "list-scan-search", name: "search", placeholder: "Find invoices by reference"}} />
      <:rows rest={%{"aria-label": "Invoices by reference"}}>
        <Kit.Phoenix.Roles.Row.row :for={{reference, place} <- Enum.with_index(["INV-1042", "INV-2075", "INV-3896"], 1)} id={"list-scan-" <> reference} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, search: [reference])}>
          <:subject href="../record/">{reference}</:subject>
        </Kit.Phoenix.Roles.Row.row>
      </:rows>
      <:nothing_matches :let={applied} action="Clear search">No invoices match {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Invoice reference pages">Invoices {count.first}–{count.last} of {count.total}<:one_row :let={count}>Invoice {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} filters_id="kit-list-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters"}} clear_filters_href="?view=awaiting&page=1">
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-saved-views" label="Saved views">
          <:tab href="?view=all&page=1">All invoices</:tab>
          <:tab href="?view=awaiting&page=1" current changed>Awaiting payment</:tab>
          <:tab href="?view=overdue&page=1">Overdue</:tab>
          <:tab href="?view=paid&page=1">Paid this month</:tab>
          <:tab href="?view=drafts&page=1">Drafts</:tab>
          <:tab href="?view=cancelled&page=1">Cancelled</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:search
        id="list-filter-form-group"
        label="Search invoices"
        control_value="Oakmere Primary School"
        control_rest={%{id: "list-filter", placeholder: "Find invoices by hirer name"}}
      />
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-room-filter" name="Room" applied="Main Hall, Small Hall" clear_href="?view=awaiting&overdue=30&page=1">
            <Kit.Phoenix.Roles.SelectionControl.group id="list-room">
              <:legend>Room</:legend>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}} checked>Main Hall</:choice>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}} checked>Small Hall</:choice>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
            </Kit.Phoenix.Roles.SelectionControl.group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=awaiting&room=main-hall,small-hall&page=1">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-overdue-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-overdue"}}>Overdue</:label>
              <:value>
                <select id="list-overdue" name="overdue"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select>
              </:value>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-status-filter" name="Status">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-status"}}>Status</:label>
              <:value>
                <select id="list-status" name="status"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select>
              </:value>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.more id="list-more-filters" count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 0, counts: "filters", forms: %{one: "filter"}}}>
            <:filter id="list-room-filter" name="Room" applied="Main Hall, Small Hall" clear_href="?view=awaiting&overdue=30&page=1" />
            <:filter id="list-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=awaiting&room=main-hall,small-hall&page=1" />
            <:filter id="list-status-filter" name="Status" />
          </Kit.Phoenix.Layouts.List.Filter.more></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-sort-form-group" columnless_order={true} control_value="relevance" control_rest={%{id: "list-sort"}}>
            <:label>Sort</:label>
            <:option value="relevance">Relevance</:option>
            <: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>
      <:save_view><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Save view</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:save_view>
      <:columns_selection_actions rest={%{"aria-label": "Columns and selection actions"}}>
        <Kit.Phoenix.Layouts.List.columns id="list-columns" on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
          <:subject id="list-columns-invoice" reason="Names each invoice">Invoice</:subject>
          <:column id="list-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          <:column id="list-columns-due-date" checked={false} control_rest={%{name: "columns", value: "due-date"}}>Due date</:column>
          <:column id="list-columns-room" checked={false} control_rest={%{name: "columns", value: "room"}}>Room</:column>
        </Kit.Phoenix.Layouts.List.columns>
      </:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.page(Kit.Phoenix.Amount.count(reader(), 2), Kit.Phoenix.Amount.count(reader(), 24), "invoices", %{}, %{})}>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action href="../record/">Review selected</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" sort="unsorted" href="?sort=invoice" />
          <:column_headings label="Amount due" kind="amount" sort="unsorted" href="?sort=amount-desc" id="list-amount-due" width_event="column_width">Amount due</:column_headings>
          <:row rest={%{id: "list-invoice-main-hall"}}
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control checked /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Main Hall hire")])]}
            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")))])}]}
          ><a href="../record/">Oakmere Primary School invoice awaiting final address confirmation</a></:row>
          <:row rest={%{id: "list-invoice-small-hall"}}
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control checked /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Small Hall hire")])]}
            facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "276.00")))])}]}
          ><a href="../record/">Oakmere Primary School</a></:row>
          <:expansion_summary row={0}>Invoice details</:expansion_summary>
          <:expansion row={0} expanded authored_text={%Kit.Phoenix.AuthoredText.Shown{value: %Kit.Phoenix.AuthoredText{content: [ {:heading, [{:text, "Before you arrive", []}]}, {:paragraph, [{:text, "Ask ", []}, {:mention, %Kit.Phoenix.AuthoredText.Mention{kind: :person, id: "aisha-khan", label: "Aisha Khan"}}, {:text, " to confirm ", []}, {:text, "the address", [:bold]}, {:text, " for ", []}, {:mention, %Kit.Phoenix.AuthoredText.Mention{kind: :subject, id: "b-1042", label: "B-1042 Garden room"}}, {:text, " before ", []}, {:date, ~D[2025-03-14]}, {:text, ".", []}, :hard_break, {:text, "Read the ", []}, {:text, "hire terms", [{:link, "https://example.com/hire-terms"}]}, {:text, " first, ", []}, {:text, "then", [:italic]}, {:text, " use ", []}, {:text, "4721", [:code]}, {:text, " at the gate.", []}]}, {:bullet_list, [[{:paragraph, [{:text, "Bring your own chairs.", []}]}], [{:paragraph, [{:text, "Leave the hall by ten.", []}]}]]}, {:ordered_list, [[{:paragraph, [{:text, "Ring the bell by the side gate.", []}]}], [{:paragraph, [{:text, "Wait for the caretaker.", []}]}]]}, {:task_list, [{true, [{:paragraph, [{:text, "Deposit paid", []}]}]}, {false, [{:paragraph, [{:text, "Key returned", []}]}]}]}, {:blockquote, [{:paragraph, [{:text, "The side door sticks in the cold.", []}]}]}, {:code_block, "Gate: 4721\nAlarm: 0990"}, {:paragraph, [{:text, "Floor plan: ", []}, {:file, %Kit.Phoenix.AuthoredText.File{id: "floor-plan", name: "garden-room-plan.pdf"}}]} ]}, reader: reader(), mention_link: fn :person, _id -> "../record/"; :subject, _id -> nil end, file_link: fn _id -> "../record/" end}} />
          <:expansion_summary row={1}>Invoice details</:expansion_summary>
          <:expansion row={1}>
            <Kit.Phoenix.Roles.FactGroup.fact_group>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Payment details</:name><:value>Payment details are available after the address is confirmed.</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
            </Kit.Phoenix.Roles.FactGroup.fact_group>
          </:expansion>
          <:total facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "360.00")))]), supporting: [Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Price when paying by credit card, including the processing fee: "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "370.80")))])]}]}>Total due</:total>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p>Invoices <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 11)} />–<Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 12)} /> of <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 24)} /></p>
        <Kit.Phoenix.Roles.Pager.pager current_page={6} last_page={12} page_href={&"?view=all&page=#{&1}"} rows_per_page={%Kit.Phoenix.Roles.Pager.RowsPerPage{id: "list-rows-per-page", sizes: [2, 10, 25], size: 2, on_change: "rows-per-page"}} go_to_page={%Kit.Phoenix.Roles.Pager.GoToPage{id: "list-go-to-page", reader: reader(), on_submit: "go-to-page"}} aria-label="Invoice pages" />
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-new-invoice-dialog" aria-labelledby="list-new-invoice-title">
      <:heading rest={%{id: "list-new-invoice-title"}}>New invoice</:heading>
      <:form_groups>
        <form id="list-new-invoice-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-new-invoice-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}>
            <:label>Hirer</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-new-invoice-form"}}>Create invoice</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <div id="stacked-lists">
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="stacked-list-first">
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="stacked-list-second">
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    </div>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-comparison">
      <:rows rest={%{"aria-label": "Rooms"}}>
        <Kit.Phoenix.Table.comparison_table>
          <:caption>Room use this quarter</:caption>
          <:subject_heading label="Room" />
          <:column_headings label="Hours booked" kind="amount">Hours booked</:column_headings>
          <:column_headings label="Hires" kind="amount">Hires</:column_headings>
          <:column_headings label="Income" kind="amount">Income</:column_headings>
          <:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.measure(reader(), Decimal.new("64"), :hour, 0))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.count(reader(), 22))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1280.00")))])}]}>
            <Kit.Phoenix.Roles.Row.row>
              <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Main Hall</span></:selection>
              <:subject href="../record/">Main Hall</:subject>
            </Kit.Phoenix.Roles.Row.row>
          </:row>
          <:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.measure(reader(), Decimal.new("38"), :hour, 0))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.count(reader(), 15))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "570.00")))])}]}>
            <Kit.Phoenix.Roles.Row.row>
              <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Garden Room and the kitchen beside it</span></:selection>
              <:subject href="../record/">Garden Room and the kitchen beside it</:subject>
            </Kit.Phoenix.Roles.Row.row>
          </:row>
          <:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.measure(reader(), Decimal.new("12"), :hour, 0))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.count(reader(), 9))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "180.00")))])}]}>
            <Kit.Phoenix.Roles.Row.row>
              <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Meeting Room</span></:selection>
              <:subject href="../record/">Meeting Room</:subject>
            </Kit.Phoenix.Roles.Row.row>
          </:row>
          <:expansion_summary row={0}>Room details</:expansion_summary>
          <:expansion row={0} expanded authored_text={%Kit.Phoenix.AuthoredText.Shown{value: %Kit.Phoenix.AuthoredText{content: [{:paragraph, [{:text, "Evening hires filled every weekday slot.", []}]}]}, reader: reader(), mention_link: fn _kind, _id -> nil end, file_link: fn _id -> nil end}} />
          <:expansion_summary row={1}>Room details</:expansion_summary>
          <:expansion row={1}>
            <Kit.Phoenix.Roles.FactGroup.fact_group>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Busiest day</:name><:value>Saturday</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
            </Kit.Phoenix.Roles.FactGroup.fact_group>
          </:expansion>
          <:total subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Price when paying by credit card, including the processing fee: "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "2090.90")))])]} facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.measure(reader(), Decimal.new("114"), :hour, 0))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.count(reader(), 46))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "2030.00")))])}]}>All rooms</:total>
        </Kit.Phoenix.Table.comparison_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-empty-region">
      <:columns_selection_actions rest={%{"aria-label": "Columns and selection actions"}}><p :if={false}>Select an invoice to review.</p></:columns_selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-selected">
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">Amount due</:column_headings>
          <:row selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control checked /><span>Select Oakmere Primary School invoice</span>]} 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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
    </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-nothing-selected">
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-nothing-selected-remind", "Select invoices to send reminders.")}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:selection_heading label="Select every invoice on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control kind={Kit.Phoenix.Roles.SelectionControl.Kind.checkbox("list-nothing-selected-page", false)} /></:selection_heading>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">Amount due</:column_headings>
          <:row selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere Primary School invoice</span>]} 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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
          <:row selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Riverside Choir invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "120.00")))])}]}><a href="../record/">Riverside Choir</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-filters-only" toolbar_rest={%{"aria-label": "Invoice filters"}} filters_id="list-hirer-filters" filters_label="Filters" filters_form_rest={%{}}>
      <:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-hirer-filter-form-group"
            kind={Kit.Phoenix.Roles.FormGroup.Kind.search()}
            control_rest={%{id: "list-hirer-filter"}}
          >
            <:label rest={%{for: "list-hirer-filter"}}>Filter by hirer</:label>
            <:help>Find invoices by hirer name.</:help>
          </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-saved-views-only" toolbar_rest={%{"aria-label": "Invoice views"}}>
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-saved-views-2" label="Saved views">
          <: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>
          <:tab href="?view=drafts&page=1">Drafts</:tab>
          <:tab href="?view=cancelled&page=1" current>Cancelled</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-cards" toolbar_rest={%{"aria-label": "Room views and controls"}} filters_id="list-cards-filters" filters_label="Filters">
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-saved-views-3" label="Saved views">
          <:tab href="?view=all&page=1" current>All rooms</:tab>
          <:tab href="?view=attention&page=1">Needs attention</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:filters><Kit.Phoenix.Layouts.List.sort id="list-cards-sort-form-group" columnless_order={true} control_value="room" control_rest={%{id: "list-cards-sort"}}>
          <:label>Sort</:label>
          <:option value="room">Room name, A to Z</:option>
          <:option value="room-desc">Room name, Z to A</:option>
          <:option value="booking-desc">Next booking, latest first</:option>
          <:option value="booking">Next booking, earliest first</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:cards rest={%{"aria-label": "Rooms"}}>
        <div>
          <Kit.Phoenix.Roles.Card.card>
            <:subject href="../role-card/#role-card">Main Hall</:subject>
            <:stamp><Kit.Phoenix.Roles.Stamp.stamp state="attention">Deposit awaiting payment</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
            <:stamp><Kit.Phoenix.Roles.Stamp.stamp state="neutral">Keys not collected</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
            <:stamp><Kit.Phoenix.Roles.Stamp.stamp state="settled">Insurance on file</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
            <:facts>
              <Kit.Phoenix.Roles.FactGroup.fact_group>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Next booking</:name><:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-12])} /></:value>
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Amount due</:name><:value words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "240.00")))]} />
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
              </Kit.Phoenix.Roles.FactGroup.fact_group>
            </:facts>
            <:actions>
              <Kit.Phoenix.Roles.ActionGroup.action_group>
                <:lead><Kit.Phoenix.Roles.PrimaryAction.primary_action>Send reminder</Kit.Phoenix.Roles.PrimaryAction.primary_action></:lead>
                <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Hold the room</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
              </Kit.Phoenix.Roles.ActionGroup.action_group>
            </:actions>
          </Kit.Phoenix.Roles.Card.card>
          <Kit.Phoenix.Roles.Card.card>
            <:subject href="../role-card/#role-card">Meeting Room</:subject>
            <:facts>
              <Kit.Phoenix.Roles.FactGroup.fact_group>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Next booking</:name><:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-17])} /></:value>
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
              </Kit.Phoenix.Roles.FactGroup.fact_group>
            </:facts>
            <:actions>
              <Kit.Phoenix.Roles.ActionGroup.action_group>
                <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Open bookings</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
              </Kit.Phoenix.Roles.ActionGroup.action_group>
            </:actions>
          </Kit.Phoenix.Roles.Card.card>
          <Kit.Phoenix.Roles.Card.card>
            <:subject href="../role-card/#role-card">Garden Room and the kitchen beside it</:subject>
            <:stamp><Kit.Phoenix.Roles.Stamp.stamp state="alert">Boiler out of service</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
            <:facts>
              <Kit.Phoenix.Roles.FactGroup.fact_group>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Hirer</:name><:value>Oakmere Primary School</:value>
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Last cleaned</:name><:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-07])} /></:value>
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                  <:name>Capacity</:name><:value words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "seated", 0))]} />
                </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
              </Kit.Phoenix.Roles.FactGroup.fact_group>
            </:facts>
            <:actions>
              <Kit.Phoenix.Roles.ActionGroup.action_group>
                <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Report fixed</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
              </Kit.Phoenix.Roles.ActionGroup.action_group>
            </:actions>
          </Kit.Phoenix.Roles.Card.card>
        </div>
      </:cards>
      <:count_continuation>
        <p>Rooms <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 1)} />–<Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 3)} /> of <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 6)} /></p>
        <Kit.Phoenix.Roles.Pager.pager current_page={1} last_page={2} page_href={&"?view=all&page=#{&1}"} aria-label="Room pages" />
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-search-filters" toolbar_rest={%{"aria-label": "Invoice search and filters"}} filters_id="list-search-filters-sheet" filters_label="Filters">
      <:search id="list-search-filters-hirer-form-group" label="Search invoices" control_rest={%{id: "list-search-filters-hirer", placeholder: "Find invoices by hirer name"}} />
      <:filters><Kit.Phoenix.Layouts.List.sort id="list-search-filters-sort-form-group" columnless_order={false} control_value="invoice" control_rest={%{id: "list-search-filters-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>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</: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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-search-alone" toolbar_rest={%{"aria-label": "Invoice search"}}>
      <:search id="list-search-alone-hirer-form-group" label="Search invoices" control_rest={%{id: "list-search-alone-hirer", placeholder: "Find invoices by hirer name"}} />
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</:caption>
          <:subject_heading label="Invoice" />
          <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-narrow-desk" style="inline-size: min(100%, var(--kit-desk-width));" toolbar_rest={%{"aria-label": "Invoice views and search"}} filters_id="list-narrow-desk-sheet" filters_label="Filters">
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-saved-views-4" label="Saved views">
          <:tab href="?view=all&page=1" current>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="list-narrow-desk-hirer-form-group" label="Search invoices" control_rest={%{id: "list-narrow-desk-hirer", placeholder: "Find invoices by hirer name"}} />
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-narrow-desk-room-filter" name="Room" applied="Main Hall, Small Hall" clear_href="?view=all&overdue=30&page=1">
            <Kit.Phoenix.Roles.SelectionControl.group id="list-narrow-desk-room">
              <:legend>Room</:legend>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}} checked>Main Hall</:choice>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}} checked>Small Hall</:choice>
              <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
            </Kit.Phoenix.Roles.SelectionControl.group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-narrow-desk-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=all&room=main-hall,small-hall&page=1">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-narrow-desk-overdue-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-narrow-desk-overdue"}}>Overdue</:label>
              <:value>
                <select id="list-narrow-desk-overdue" name="overdue"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select>
              </:value>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-narrow-desk-status-filter" name="Status">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-narrow-desk-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-narrow-desk-status"}}>Status</:label>
              <:value>
                <select id="list-narrow-desk-status" name="status"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select>
              </:value>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.more id="list-narrow-desk-more-filters" count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 0, counts: "filters", forms: %{one: "filter"}}}>
            <:filter id="list-narrow-desk-room-filter" name="Room" applied="Main Hall, Small Hall" clear_href="?view=all&overdue=30&page=1" />
            <:filter id="list-narrow-desk-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=all&room=main-hall,small-hall&page=1" />
            <:filter id="list-narrow-desk-status-filter" name="Status" />
          </Kit.Phoenix.Layouts.List.Filter.more></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-narrow-desk-sort-form-group" columnless_order={false} control_value="invoice" control_rest={%{id: "list-narrow-desk-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>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices awaiting payment</: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")))])}]}><a href="../record/">Oakmere Primary School</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-records-table">
      <:rows rest={%{"aria-label": "Payments"}}>
        <Kit.Phoenix.Table.rows_table print_form="rows">
          <:caption>Payments received</:caption>
          <:selection_heading label="Select all payments"><Kit.Phoenix.Roles.SelectionControl.selection_control kind={Kit.Phoenix.Roles.SelectionControl.Kind.checkbox("select-all-payments", true)} /></:selection_heading>
          <:subject_heading label="Payment" />
          <:column_headings label="Received">Received</:column_headings>
          <:column_headings label="Reference">Reference</:column_headings>
          <:column_headings label="Payer account">Payer account</:column_headings>
          <:column_headings label="Method">Method</:column_headings>
          <:column_headings label="Matched" kind="time">Matched</:column_headings>
          <:column_headings label="Fee" kind="amount">Fee</:column_headings>
          <:column_headings label="Net" kind="amount">Net</:column_headings>
          <:column_headings label="Hourly rate" kind="amount">Hourly rate</:column_headings>
          <:column_headings label="Paid towards">Paid towards</:column_headings>
          <:column_headings label="Amount" kind="amount">Amount</:column_headings>
          <:row selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control name="payment" value="card" checked /><span>Select Card payment</span>]} facts={[
            %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([
                Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-03])),
                Kit.Phoenix.Words.text(", after the card payment was matched to the outstanding Main Hall invoice, the corrected billing address was confirmed by the hirer and the duplicate reference was removed")
              ]),
              supporting: [Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Statement checked")])]
            },
            %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("TXN20250203417")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("GB82WEST12345698765432")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Contactless")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-04]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.60")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "39.40")))])},
            %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "20.00")))])},
            %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall invoice of "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))])},
            %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "40.00")))])}
          ]}>
            <a href="../record/">Card payment</a>
          </:row>
          <:row
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control name="payment" value="transfer" /><span>Select Bank transfer</span>]}
            facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("TXN20250128391")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("GB33BUKB20201555555555")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Transfer sent on "), Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-27])), Kit.Phoenix.Words.text(" from the hirer's second account and cleared the next working day")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-29]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "12.00")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall invoice of "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])}]}
          >
            <a href="../record/">Bank transfer</a>
          </:row>
          <:total facts={[nil, nil, nil, nil, nil, nil, nil, nil, nil, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "64.00")))])}]}>Total received</:total>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-wide-records-actions">
      <:rows rest={%{"aria-label": "Payments"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Payments received</:caption>
          <:subject_heading label="Payment" />
          <:column_headings label="Received">Received</:column_headings>
          <:column_headings label="Reference">Reference</:column_headings>
          <:column_headings label="Payer account">Payer account</:column_headings>
          <:column_headings label="Method">Method</:column_headings>
          <:column_headings label="Matched" kind="time">Matched</:column_headings>
          <:column_headings label="Fee" kind="amount">Fee</:column_headings>
          <:column_headings label="Net" kind="amount">Net</:column_headings>
          <:column_headings label="Hourly rate" kind="amount">Hourly rate</:column_headings>
          <:column_headings label="Paid towards">Paid towards</:column_headings>
          <:column_headings label="Amount" kind="amount">Amount</:column_headings>
          <:row
            actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Receipt</Kit.Phoenix.Roles.SubtleAction.subtle_action>], ~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]}
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control name="wide-payment" value="card" /><span>Select Card payment</span>]}
            facts={[
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-03])), Kit.Phoenix.Words.text(", after the card payment was matched to the outstanding Main Hall invoice, the corrected billing address was confirmed by the hirer and the duplicate reference was removed")])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("TXN20250203417")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("GB82WEST12345698765432")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Contactless")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-04]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.60")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "39.40")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "20.00")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall invoice of "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "40.00")))])}
            ]}
          >
            <a href="../record/">Card payment</a>
          </:row>
          <:row
            actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Receipt</Kit.Phoenix.Roles.SubtleAction.subtle_action>], ~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]}
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control name="wide-payment" value="transfer" /><span>Select Bank transfer</span>]}
            facts={[
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("TXN20250128391")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("GB33BUKB20201555555555")])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Transfer sent on "), Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-27])), Kit.Phoenix.Words.text(" from the hirer's second account and cleared the next working day")])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-01-29]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "12.00")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall invoice of "), Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])},
              %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00")))])}
            ]}
          >
            <a href="../record/">Bank transfer</a>
          </:row>
          <:total facts={[nil, nil, nil, nil, nil, nil, nil, nil, nil, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "64.00")))])}]}>Total received</:total>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <details :for={{key, label} <- [{"after", "Date filter on or after a day"}, {"before", "Date filter on or before a day"}, {"between", "Date filter between two days"}]} data-specimen-case>
      <summary>{label}</summary>
      <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} filters_id={"phoenix-list-date-filters-" <> key} filters_label="Filters">
        <:filters><Kit.Phoenix.Layouts.List.Filter.filter id={"phoenix-list-date-filter-" <> key} name="Issued">
            <Kit.Phoenix.Roles.FormGroup.form_group id={"phoenix-list-filter-range-" <> key}>
              <:label>Issued</:label>
              <:control_set :let={binding}><Kit.Phoenix.Roles.DateRange.date_range binding={binding} reader={reader()} name={"issued_" <> key} open_ends={:either} presets={false} today={Kit.Phoenix.Time.day(reader(), ~D[2026-09-15])} direction={:either} /></:control_set>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
        <:rows><p>No entries shown.</p></:rows>
      </Kit.Phoenix.Layouts.List.list>
    </details>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-fitting-saved-views">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} filters_id="kit-list-filters" filters_label="Filters" filters_form_rest={%{}}>
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-fitting-saved-views-saved-views" label="Saved views">
          <:tab href="?view=all&page=1">All invoices</:tab>
          <:tab href="?view=overdue&page=1" current>Overdue</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:search
        id="list-filter-form-group"
        label="Search invoices"
        control_value="Oakmere Primary School"
        control_rest={%{id: "list-filter", placeholder: "Find invoices by hirer name"}}
      />
      <:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-status"}}>Status</:label>
            <:value>
              <select id="list-status"><option>Any status</option><option>Unpaid</option><option>Paid</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
<:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-overdue-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-overdue"}}>Days past the payment due date</:label>
            <:value>
              <select id="list-overdue"><option>Any</option><option>Over 30 days</option><option>Over 60 days</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-sort-form-group" columnless_order={true} control_value="relevance" control_rest={%{id: "list-sort"}}>
            <:label>Sort</:label>
            <:option value="relevance">Relevance</:option>
            <: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 rest={%{"aria-label": "Columns and selection actions"}}>
        <Kit.Phoenix.Layouts.List.columns id="list-fitting-columns" on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
          <:subject id="list-fitting-columns-invoice" reason="Names each invoice">Invoice</:subject>
          <:column id="list-fitting-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          <:column id="list-fitting-columns-due-date" checked={false} control_rest={%{name: "columns", value: "due-date"}}>Due date</:column>
          <:column id="list-fitting-columns-room" checked={false} control_rest={%{name: "columns", value: "room"}}>Room</:column>
        </Kit.Phoenix.Layouts.List.columns>
      </:columns_selection_actions>
      <:selection_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:lead action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("review-selected", "Select an invoice to review.")}>Review selected</:lead>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Overdue invoices</:caption>
          <:subject_heading label="Invoice" sort="unsorted" href="?sort=invoice" />
          <:column_headings label="Amount due" kind="amount" sort="unsorted" href="?sort=amount-desc" />
          <:row
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Main Hall hire")])]}
            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")))])}]}
          ><a href="../../record/">Oakmere Primary School invoice awaiting final address confirmation</a></:row>
          <:row
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Awaiting payment")])]}
            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")))])}]}
          ><a href="../../record/">Oakmere Primary School</a></:row>
          <:expansion_summary row={0}>Invoice details</:expansion_summary>
          <:expansion row={0} expanded authored_text={%Kit.Phoenix.AuthoredText.Shown{value: %Kit.Phoenix.AuthoredText{content: [{:paragraph, [{:text, "Contact Maya to confirm the billing address.", []}]}]}, reader: reader(), mention_link: fn _kind, _id -> nil end, file_link: fn _id -> nil end}} />
          <:expansion_summary row={1}>Invoice details</:expansion_summary>
          <:expansion row={1}>
            <Kit.Phoenix.Roles.FactGroup.fact_group>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Payment details</:name><:value>Payment details are available after the address is confirmed.</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
            </Kit.Phoenix.Roles.FactGroup.fact_group>
          </:expansion>
          <:total facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "168.00")))])}]}>Total due</:total>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p>Invoice <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 6)} /> 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={6} last_page={12} page_href={&"?view=all&page=#{&1}"} aria-label="Invoice pages" />
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>History</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-history">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "History filters"}} filters_id="kit-list-filters" filters_label="Filters">
      <:search id="history-search-form-group" label="Search history" control_value="" control_rest={%{id: "history-search", placeholder: "Find a change or person"}} />
      <:filters><Kit.Phoenix.Roles.FormGroup.form_group id="history-who-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_value="everyone" control_rest={%{id: "history-who"}}>
          <:label rest={%{for: "history-who"}}>Who</:label>
          <:option value="everyone">Everyone</:option>
          <:option value="maya-patel">Maya Patel</:option>
          <:option value="tom-reid">Tom Reid</:option>
        </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
<:filters><Kit.Phoenix.Roles.FormGroup.form_group id="history-when-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_value="all-time" control_rest={%{id: "history-when"}}>
          <:label rest={%{for: "history-when"}}>When</:label>
          <:option value="today">Today</:option>
          <:option value="this-week">This week</:option>
          <:option value="this-month">This month</:option>
          <:option value="all-time">All time</:option>
        </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
      <:rows rest={%{"aria-label": "History"}}>
        <Kit.Phoenix.Layouts.List.day aria-labelledby="history-day-today">
          <:heading rest={%{id: "history-day-today"}}><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-15])} /></:heading>
          <Kit.Phoenix.Layouts.List.entry actor={Kit.Phoenix.Roles.Avatar.person("Maya Patel", "MP")} :let={subject} time={Kit.Phoenix.Time.time_of_day(reader(), ~U[2025-04-15 13:20:00Z])}>
            <:subject href="../../record/">Invoice OH-INV-003 for the Oakmere Primary School spring term</:subject>
            Maya Patel marked {subject} paid after the bank transfer arrived.
          </Kit.Phoenix.Layouts.List.entry>
          <Kit.Phoenix.Layouts.List.entry actor={Kit.Phoenix.Roles.Avatar.person("Tom Reid", "TR", "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+")} :let={subject} time={Kit.Phoenix.Time.time_of_day(reader(), ~U[2025-04-15 09:05:00Z])}><:subject href="../../record/">Yoga class</:subject>Tom Reid moved {subject} to Thursday because the Main Hall floor is being cleaned.
          </Kit.Phoenix.Layouts.List.entry>
        </Kit.Phoenix.Layouts.List.day>
        <Kit.Phoenix.Layouts.List.day aria-labelledby="history-day-yesterday">
          <:heading rest={%{id: "history-day-yesterday"}}><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} /></:heading>
          <Kit.Phoenix.Layouts.List.entry actor={Kit.Phoenix.Roles.Avatar.person("Maya Patel", "MP")} :let={subject} time={Kit.Phoenix.Time.time_of_day(reader(), ~U[2025-04-14 15:45:00Z])}><: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><p>3 entries shown</p></:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Hires</:subject>
  <:lede_range days={Kit.Phoenix.Time.day_with_weekday(reader(), ~D[2025-04-14])} />
  <:lede words="5 hires" />
  <:actions><a href="../../layout-list/#layout-list-period">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Hire views and controls"}} range_days={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} filters_id="kit-list-period-filters" filters_label="Filters">
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-period-saved-views" label="Saved views">
          <:tab href="?view=all&day=2025-04-14" current>All hires</:tab>
          <:tab href="?view=needs-room&day=2025-04-14">Needs a room</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:today label="Today" href="?view=all&day=today" />
      <:previous label="Previous day" href="?view=all&day=2025-04-13" rest={%{rel: "prev"}} />
      <:next label="Next day" href="?view=all&day=2025-04-15" rest={%{rel: "next"}} />
      <:date form_rest={%{}}><Kit.Phoenix.Roles.FormGroup.form_group id="list-period-date"><:label>Go to a day</: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>
      <:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-period-room-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
          <:label rest={%{for: "list-period-room"}}>Room</:label>
          <:value>
            <select id="list-period-room"><option>Any room</option><option>Main Hall</option><option>Garden room</option></select>
          </:value>
        </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
      <:rows rest={%{"aria-label": "Hires"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Hires on 14 April 2025</:caption>
          <:subject_heading label="Hire" />
          <:column_headings label="Time" kind="time">Time</:column_headings>
          <:column_headings label="Room">Room</:column_headings>
          <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 08:30:00Z], ~U[2025-04-14 10:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden room")])}]}><a href="../../record/">Toddler group</a></:row>
          <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 11:00:00Z], ~U[2025-04-14 12:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}]}><a href="../../record/">Pilates with Jo</a></:row>
          <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 13:00:00Z], ~U[2025-04-14 15:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}]}><a href="../../record/">Oakmere WI</a></:row>
          <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 17:00:00Z], ~U[2025-04-14 18:30:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}]}><a href="../../record/">St Anne’s Scout Group</a></:row>
          <:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval(reader(), ~U[2025-04-14 18:30:00Z], ~U[2025-04-14 20:30:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden room")])}]}><a href="../../record/">Brookfield Choir</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 5)} /> hires</p>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Invoices</:subject>
  <:lede words="Grouped by status" />
  <:lede words="32 invoices" />
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action id="list-grouped-new-invoice" phx-click={Kit.Phoenix.Modal.open("list-grouped-new-invoice-dialog")}>New invoice</Kit.Phoenix.Roles.PrimaryAction.primary_action><a href="../../layout-list/#layout-list-grouped">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} filters_id="kit-list-grouped-filters" filters_label="Filters" filters_form_rest={%{}}>
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-grouped-saved-views" label="Saved views">
          <:tab href="?view=all&group=status&sort=amount-desc" current>All invoices</:tab>
          <:tab href="?view=unpaid&group=status&sort=amount-desc">Unpaid</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:search id="list-grouped-search-form-group" label="Search invoices" control_rest={%{id: "list-grouped-search", placeholder: "Find invoices by hirer name"}} />
      <:filters><Kit.Phoenix.Layouts.List.sort id="list-grouped-sort-form-group" columnless_order={false} control_value="amount-desc" control_rest={%{id: "list-grouped-sort"}}>
          <:label>Sort</:label>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="hirer-desc">Hirer, Z to A</:option>
          <:option value="due-desc">Due, newest first</:option>
          <:option value="due">Due, oldest first</:option>
          <:option value="amount-desc">Amount due, largest first</:option>
          <:option value="amount">Amount due, smallest first</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
<:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-grouping-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
          <:label rest={%{for: "list-grouped-grouping"}}>Group by</:label>
          <:value>
            <select id="list-grouped-grouping"><option>None</option><option selected>Status</option><option>Room</option></select>
          </:value>
        </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
      <:columns_selection_actions rest={%{"aria-label": "Columns and selection actions"}}>
        <Kit.Phoenix.Layouts.List.columns id="list-grouped-columns" on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
          <:subject id="list-grouped-columns-hirer" reason="Names each invoice">Hirer</:subject>
          <:column id="list-grouped-columns-due" checked control_rest={%{name: "columns", value: "due"}}>Due</:column>
          <:column id="list-grouped-columns-room" checked control_rest={%{name: "columns", value: "room"}}>Room</:column>
          <:column id="list-grouped-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          <:column id="list-grouped-columns-invoice" checked={false} control_rest={%{name: "columns", value: "invoice"}}>Invoice</:column>
        </Kit.Phoenix.Layouts.List.columns>
      </:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.selected(Kit.Phoenix.Amount.count(reader(), 2), %{})}>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Send reminders</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Invoices by status</:caption>
          <:selection_heading label="Select every invoice on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control kind={Kit.Phoenix.Roles.SelectionControl.Kind.checkbox("list-grouped-select-page", true)} /></:selection_heading>
          <:subject_heading label="Hirer" sort="unsorted" href="?view=all&group=status&sort=hirer" />
          <:column_headings label="Due" kind="time" sort="unsorted" href="?view=all&group=status&sort=due-desc">Due</:column_headings>
          <:column_headings label="Room requested for the booking">Room requested for the booking</:column_headings>
          <:column_headings label="Amount due" kind="amount" sort="descending" href="?view=all&group=status&sort=amount">Amount due</:column_headings>
          <:group
            id="invoices-overdue"
            on_open={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc&closed=paid")}
            on_close={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc&closed=overdue,paid")}
            count="6"
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select every overdue invoice</span>]}
            new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-invoice-dialog", label: "New invoice in Overdue"}}
          ><Kit.Phoenix.Roles.Stamp.stamp state="alert">Overdue</Kit.Phoenix.Roles.Stamp.stamp></:group>
          <:group
            id="invoices-awaiting"
            on_open={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc&closed=paid")}
            on_close={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc&closed=awaiting,paid")}
            count="14"
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control kind={Kit.Phoenix.Roles.SelectionControl.Kind.checkbox("list-grouped-select-awaiting", true)} /><span>Select every invoice awaiting payment</span>]}
            new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-invoice-dialog", label: "New invoice in Awaiting payment"}}
          ><Kit.Phoenix.Roles.Stamp.stamp state="attention">Awaiting payment</Kit.Phoenix.Roles.Stamp.stamp></:group>
          <:group
            id="invoices-paid"
            count="12"
            expanded={false}
            on_open={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc")}
            on_close={Phoenix.LiveView.JS.patch("?view=all&group=status&sort=amount-desc&closed=paid")}
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select every paid invoice</span>]}
            new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-invoice-dialog", label: "New invoice in Paid", state: Kit.Phoenix.ActionState.inert("grouped-invoices-paid-new", "Check the group before adding an invoice.")}}
          ><Kit.Phoenix.Roles.Stamp.stamp state="settled">Paid</Kit.Phoenix.Roles.Stamp.stamp></:group>
          <:row rest={%{id: "grouped-invoice-brookfield-choir"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Brookfield Choir invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-03-03]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "640.00")))])}]}><a href="../../record/">Brookfield Choir</a></:row>
          <:row rest={%{id: "grouped-invoice-oakmere-wi"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere WI invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-03-10]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "420.00")))])}]}><a href="../../record/">Oakmere WI</a></:row>
          <:row rest={%{id: "grouped-invoice-st-anne-s-scout-group"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select St Anne’s Scout Group invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "315.00")))])}]}><a href="../../record/">St Anne’s Scout Group</a></:row>
          <:row rest={%{id: "grouped-invoice-pilates-with-jo"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Pilates with Jo invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-03-14]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "210.00")))])}]}><a href="../../record/">Pilates with Jo</a></:row>
          <:row rest={%{id: "grouped-invoice-toddler-group"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Toddler group invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-03-07]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "96.00")))])}]}><a href="../../record/">Toddler group</a></:row>
          <:row rest={%{id: "grouped-invoice-chess-club"}} group="invoices-overdue" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Chess club invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-02-21]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Meeting Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "48.00")))])}]}><a href="../../record/">Chess club</a></:row>
          <:row rest={%{id: "grouped-invoice-oakmere-primary-school"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control checked /><span>Select Oakmere Primary School invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-30]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "1280.00")))])}]}><a href="../../record/">Oakmere Primary School</a></:row>
          <:row rest={%{id: "grouped-invoice-riverside-dance"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control checked /><span>Select Riverside Dance invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-25]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "860.00")))])}]}><a href="../../record/">Riverside Dance</a></:row>
          <:row rest={%{id: "grouped-invoice-greenway-nursery"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Greenway Nursery invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-02]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "540.00")))])}]}><a href="../../record/">Greenway Nursery</a></:row>
          <:row rest={%{id: "grouped-invoice-hillside-bridge-club"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Hillside Bridge Club invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Meeting Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "380.00")))])}]}><a href="../../record/">Hillside Bridge Club</a></:row>
          <:row rest={%{id: "grouped-invoice-parish-council"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Parish Council invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-05]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "300.00")))])}]}><a href="../../record/">Parish Council</a></:row>
          <:row rest={%{id: "grouped-invoice-yoga-with-priya"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Yoga with Priya invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-22]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "240.00")))])}]}><a href="../../record/">Yoga with Priya</a></:row>
          <:row rest={%{id: "grouped-invoice-book-group"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Book group invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-30]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Meeting Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "120.00")))])}]}><a href="../../record/">Book group</a></:row>
          <:row rest={%{id: "grouped-invoice-knit-and-natter"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Knit and natter invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-09]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "90.00")))])}]}><a href="../../record/">Knit and natter</a></:row>
          <:row rest={%{id: "grouped-invoice-tai-chi"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Tai chi invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-03]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "72.00")))])}]}><a href="../../record/">Tai chi</a></:row>
          <:row rest={%{id: "grouped-invoice-line-dancing"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Line dancing invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-06]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "64.00")))])}]}><a href="../../record/">Line dancing</a></:row>
          <:row rest={%{id: "grouped-invoice-baby-sensory"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Baby sensory invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-29]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "60.00")))])}]}><a href="../../record/">Baby sensory</a></:row>
          <:row rest={%{id: "grouped-invoice-craft-club"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Craft club invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-12]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "48.00")))])}]}><a href="../../record/">Craft club</a></:row>
          <:row rest={%{id: "grouped-invoice-ukulele-group"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Ukulele group invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-01]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Meeting Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "36.00")))])}]}><a href="../../record/">Ukulele group</a></:row>
          <:row rest={%{id: "grouped-invoice-walking-football"}} group="invoices-awaiting" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Walking football invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-05-08]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "30.00")))])}]}><a href="../../record/">Walking football</a></:row>
          <:row rest={%{id: "grouped-invoice-lions-club"}} group="invoices-paid" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Lions Club invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-04-01]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "450.00")))])}]}><a href="../../record/">Lions Club</a></:row>
          <:row rest={%{id: "grouped-invoice-mothers-union"}} group="invoices-paid" actions={[~H[<Kit.Phoenix.Roles.SubtleAction.subtle_action type="button">Duplicate</Kit.Phoenix.Roles.SubtleAction.subtle_action>]]} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Mothers’ Union invoice</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-03-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "160.00")))])}]}><a href="../../record/">Mothers’ Union</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p>Invoices <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 1)} /> to <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 22)} /> of <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 32)} /></p>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-grouped-new-invoice-dialog" aria-labelledby="list-grouped-new-invoice-title">
      <:heading rest={%{id: "list-grouped-new-invoice-title"}}>New invoice</:heading>
      <:form_groups>
        <form id="list-grouped-new-invoice-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-invoice-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}>
            <:label>Hirer</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-grouped-new-invoice-form"}}>Create invoice</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-grouped-rows">
      <:rows rest={%{"aria-label": "Rooms"}}>
        <Kit.Phoenix.Layouts.List.group id="rooms-open" count="2" new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-room-dialog", label: "New room in Open", state: Kit.Phoenix.ActionState.inert("grouped-rooms-open-new", "Check the group before adding a room.")}}>
          <:value><Kit.Phoenix.Roles.Stamp.stamp state="settled">Open</Kit.Phoenix.Roles.Stamp.stamp></:value>
          <Kit.Phoenix.Roles.Row.row id="grouped-room-main-hall">
            <:subject href="../../record/">Main Hall</:subject>
            <:facts>Seats <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 120)} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
          <Kit.Phoenix.Roles.Row.row id="grouped-room-garden-room">
            <:subject href="../../record/">Garden Room</:subject>
            <:facts>Seats <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 40)} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
        </Kit.Phoenix.Layouts.List.group>
        <Kit.Phoenix.Layouts.List.group id="rooms-closed" count="1" expanded={false} new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-room-dialog", label: "New room in Closed for repair"}}>
          <:value><Kit.Phoenix.Roles.Stamp.stamp state="neutral">Closed for repair</Kit.Phoenix.Roles.Stamp.stamp></:value>
          <Kit.Phoenix.Roles.Row.row id="grouped-room-small-hall">
            <:subject href="../../record/">Small Hall</:subject>
            <:facts>Seats <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 60)} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
        </Kit.Phoenix.Layouts.List.group>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-grouped-new-room-dialog" aria-labelledby="list-grouped-new-room-title">
      <:heading rest={%{id: "list-grouped-new-room-title"}}>New room</:heading>
      <:form_groups>
        <form id="list-grouped-new-room-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-room-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} paste={%Kit.Phoenix.Roles.FormGroup.Paste{name: "names", kind: "rooms", reader: reader()}} control_rest={%{name: "name"}}>
            <:label>Room name</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-grouped-new-room-form"}}>Create room</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} id="layout-list-grouped-room">
      <:rows rest={%{"aria-label": "Bookings"}}>
        <Kit.Phoenix.Layouts.List.group id="bookings-main-hall" count="2" new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-booking-main-hall-dialog", label: "New booking in Main Hall"}}>
          <:value><a href="../../record/">Main Hall</a></:value>
          <Kit.Phoenix.Roles.Row.row id="grouped-booking-priya-shah">
            <:subject href="../../record/">Priya Shah</:subject>
            <:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.moment(reader(), ~U[2025-06-14 17:00:00Z])} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
          <Kit.Phoenix.Roles.Row.row id="grouped-booking-tom-reed">
            <:subject href="../../record/">Tom Reed</:subject>
            <:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.moment(reader(), ~U[2025-06-21 09:00:00Z])} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
        </Kit.Phoenix.Layouts.List.group>
        <Kit.Phoenix.Layouts.List.group id="bookings-garden-room" count="1" new_dialog={%Kit.Phoenix.Layouts.List.NewDialog{id: "list-grouped-new-booking-garden-room-dialog", label: "New booking in Garden Room"}}>
          <:value><a href="../../record/">Garden Room</a></:value>
          <Kit.Phoenix.Roles.Row.row id="grouped-booking-ana-lima">
            <:subject href="../../record/">Ana Lima</:subject>
            <:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.moment(reader(), ~U[2025-06-15 11:00:00Z])} /></:facts>
          </Kit.Phoenix.Roles.Row.row>
        </Kit.Phoenix.Layouts.List.group>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-grouped-new-booking-main-hall-dialog" aria-labelledby="list-grouped-new-booking-main-hall-title">
      <:heading rest={%{id: "list-grouped-new-booking-main-hall-title"}}>New booking</:heading>
      <:form_groups>
        <form id="list-grouped-new-booking-main-hall-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-booking-main-hall-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}>
            <:label>Hirer</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-booking-main-hall-room">
            <:label>Room</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
                binding={binding}
                name="room"
                chosen={%Kit.Phoenix.Roles.RecordPicker.Record{id: "r-main-hall", name: ["Main Hall"], fact: "Seats 120"}}
                recent={[
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-main-hall", name: ["Main Hall"], fact: "Seats 120"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-garden-room", name: ["Garden Room"], fact: "Seats 40"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-small-hall", name: ["Small Hall"], fact: "Seats 60"}
                ]}
                none="No rooms match."
                query_event="search_rooms"
                clear
              />
            </:control>
            <:printed_value>Main Hall</:printed_value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-grouped-new-booking-main-hall-form"}}>Create booking</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-grouped-new-booking-garden-room-dialog" aria-labelledby="list-grouped-new-booking-garden-room-title">
      <:heading rest={%{id: "list-grouped-new-booking-garden-room-title"}}>New booking</:heading>
      <:form_groups>
        <form id="list-grouped-new-booking-garden-room-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-booking-garden-room-hirer" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} control_rest={%{name: "hirer"}}>
            <:label>Hirer</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-grouped-new-booking-garden-room-room">
            <:label>Room</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
                binding={binding}
                name="room"
                chosen={%Kit.Phoenix.Roles.RecordPicker.Record{id: "r-garden-room", name: ["Garden Room"], fact: "Seats 40"}}
                recent={[
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-main-hall", name: ["Main Hall"], fact: "Seats 120"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-garden-room", name: ["Garden Room"], fact: "Seats 40"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "r-small-hall", name: ["Small Hall"], fact: "Seats 60"}
                ]}
                none="No rooms match."
                query_event="search_rooms"
                clear
              />
            </:control>
            <:printed_value>Garden Room</:printed_value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-grouped-new-booking-garden-room-form"}}>Create booking</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Invoices</:subject><:lede words="Awaiting payment" /><:actions><a href="../../layout-list/#layout-list-desktop-only">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}><:rows rest={%{"aria-label": "Invoices"}}>
  <Kit.Phoenix.Roles.Row.row id="desktop-facts-row">
    <:subject href="../../record/" supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Hire of Main Hall.")]) |> Kit.Phoenix.Supporting.desktop_only()]}>INV-001</:subject>
    <:stamp><Kit.Phoenix.Roles.Stamp.stamp state="neutral">Awaiting payment</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
    <:facts desktop_only>Hirer: Priya Shah</:facts>
    <:facts desktop_only>Amount: <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "25.00"))} /></:facts>
  </Kit.Phoenix.Roles.Row.row>
</:rows><:count_continuation><p>1 invoice</p></:count_continuation></Kit.Phoenix.Layouts.List.list>
<p class="specimen-case-line">As a records table.</p>
<Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}><:rows rest={%{"aria-label": "Invoices"}}>
  <div class="specimen-table-contained">
    <Kit.Phoenix.Table.rows_table>
      <:subject_heading label="Invoice" />
      <:column_headings label="Status">Status</:column_headings>
      <:column_headings label="Hirer">Hirer</:column_headings>
      <:column_headings label="Amount" kind="amount">Amount</:column_headings>
      <:row rest={%{id: "desktop-facts-record"}} subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Hire of Main Hall.")]) |> Kit.Phoenix.Supporting.desktop_only()]} facts={[
        %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H(<Kit.Phoenix.Roles.Stamp.stamp state="neutral">Awaiting payment</Kit.Phoenix.Roles.Stamp.stamp>))},
        %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content("Priya Shah"), desktop_only: true},
        %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "25.00")))]), desktop_only: true}
      ]}><a href="../../record/">INV-001</a></:row>
    </Kit.Phoenix.Table.rows_table>
  </div>
</:rows><:count_continuation><p>1 invoice</p></:count_continuation></Kit.Phoenix.Layouts.List.list>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Rooms</:subject>
  <:lede words="1 room" />
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action id="list-new-room" phx-click={Kit.Phoenix.Modal.open("list-new-room-dialog")}>New room</Kit.Phoenix.Roles.PrimaryAction.primary_action><a href="../../layout-list/#layout-list-new">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} new_id="list-new-room">
      <:rows rest={%{"aria-label": "Rooms"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Room" />
          <:column_headings label="Capacity" kind="amount">Capacity</:column_headings>
          <:row rest={%{id: "list-new-room-main-hall"}} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.count(reader(), 40))])}]}><a href="../../record/">Main Hall</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation><p>1 room</p></:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-new-room-dialog" aria-labelledby="list-new-room-title">
      <:heading rest={%{id: "list-new-room-title"}}>New room</:heading>
      <:form_groups>
        <form id="list-new-room-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-new-room-name" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} paste={%Kit.Phoenix.Roles.FormGroup.Paste{name: "names", kind: "rooms", reader: reader()}} control_rest={%{name: "name"}}>
            <:label>Room name</:label>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-new-room-form"}}>Create room</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Invoices</:subject>
  <:lede words="1 invoice" />
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action id="list-new-picker-invoice" phx-click={Kit.Phoenix.Modal.open("list-new-picker-invoice-dialog")}>New invoice</Kit.Phoenix.Roles.PrimaryAction.primary_action><a href="../../../layout-list/#layout-list-new-record-picker">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Invoice" />
          <:column_headings label="Hirer">Hirer</:column_headings>
          <:row rest={%{id: "list-new-picker-invoice-first"}} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words("Priya Shah")}]}><a href="../../../record/">INV-001</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation><p>1 invoice</p></:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-new-picker-invoice-dialog" aria-labelledby="list-new-picker-invoice-title">
      <:heading rest={%{id: "list-new-picker-invoice-title"}}>New invoice</:heading>
      <:form_groups>
        <form id="list-new-picker-invoice-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-new-picker-invoice-hirer">
            <:label>Hirer</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium" binding={binding} name="hirer" none="No hirers match." query_event="search_hirers" recent={[
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "priya-shah", name: ["Priya Shah"], fact: "Leeds"},
                %Kit.Phoenix.Roles.RecordPicker.Record{id: "tom-reid", name: ["Tom Reid"], fact: "York"}
              ]} />
            </:control>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-new-picker-invoice-form"}}>Create invoice</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Contributions</:subject>
  <:lede words="1 contribution" />
  <:actions><Kit.Phoenix.Roles.PrimaryAction.primary_action id="list-new-contribution" phx-click={Kit.Phoenix.Modal.open("list-new-contribution-dialog")}>New contribution</Kit.Phoenix.Roles.PrimaryAction.primary_action><a href="../../../layout-list/#layout-list-new-number-field">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}>
      <:rows rest={%{"aria-label": "Contributions"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Contribution" />
          <:column_headings label="Amount" kind="amount">Amount</:column_headings>
          <:row rest={%{id: "list-new-contribution-first"}} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "25.00")))])}]}><a href="../../../record/">CT-001</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation><p>1 contribution</p></:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
    <Kit.Phoenix.Roles.Dialog.dialog id="list-new-contribution-dialog" aria-labelledby="list-new-contribution-title">
      <:heading rest={%{id: "list-new-contribution-title"}}>New contribution</:heading>
      <:form_groups>
        <form id="list-new-contribution-form">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-new-contribution-amount">
            <:label>Amount</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="amount" value="" measure={Kit.Phoenix.Roles.NumberField.Measure.currency("GBP")} />
            </:control>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </form>
      </:form_groups>
      <:primary_action rest={%{type: "submit", form: "list-new-contribution-form"}}>Create contribution</:primary_action>
      <:secondary_action>Cancel</:secondary_action>
    </Kit.Phoenix.Roles.Dialog.dialog>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Inbox</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-inbox">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Notification views and actions"}}>
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-inbox-saved-views" label="Saved views">
          <:tab href="?view=inbox" current>Inbox</:tab>
          <:tab href="?view=snoozed">Snoozed</:tab>
          <:tab href="?view=done">Done</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:toolbar_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Mark all read</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
          <:status_lines><Kit.Phoenix.Roles.StatusLine.status_line>Marks the 3 unread notifications as read.</Kit.Phoenix.Roles.StatusLine.status_line></:status_lines>
          <:routes><a href="../../settings/">Notification settings</a></:routes>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:toolbar_actions>
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.selected(Kit.Phoenix.Amount.count(reader(), 1), %{})}>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
          <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
          <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Notifications"}}>
        <Kit.Phoenix.Roles.Row.row unread>
          <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control checked name="notification" value="oakmere-paid" /><span>Select Oakmere Primary School invoice</span></:selection>
          <:subject href="../../record/">Oakmere Primary School invoice</:subject>
          <:facts>Aisha Khan paid it ·&nbsp;09:12</:facts>
          <:actions>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.ActionMenu.action_menu id="inbox-oakmere-paid-fold" label="More actions for this notification" groups={[]} />
          </:actions>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row unread>
          <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control name="notification" value="main-hall-tuesday" /><span>Select Main Hall booking on Tuesday</span></:selection>
          <:subject href="../../record/">Main Hall booking on Tuesday</:subject>
          <:facts>3 updates, latest Tom Reid moved it to 18:00 ·&nbsp;08:40</:facts>
          <:actions>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.ActionMenu.action_menu id="inbox-main-hall-tuesday-fold" label="More actions for this notification" groups={[]} />
          </:actions>
          <:expansion_summary>2 earlier updates</:expansion_summary>
          <:expansion>
            <Kit.Phoenix.Roles.FactGroup.fact_group>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                <:name>Maya Patel</:name><:value>Added the Garden Room</:value>
              </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact>
                <:name>Aisha Khan</:name><:value>Booked it</:value>
              </Kit.Phoenix.Roles.LabelledFact.labelled_fact>
            </Kit.Phoenix.Roles.FactGroup.fact_group>
          </:expansion>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row unread>
          <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control name="notification" value="riverside-reminder" /><span>Select Riverside Dance invoice</span></:selection>
          <:subject href="../../record/">Riverside Dance invoice</:subject>
          <:facts>Maya Patel sent a reminder ·&nbsp;Yesterday</:facts>
          <:actions>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.ActionMenu.action_menu id="inbox-riverside-reminder-fold" label="More actions for this notification" groups={[]} />
          </:actions>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row>
          <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control name="notification" value="garden-room-approved" /><span>Select Garden Room hire</span></:selection>
          <:subject href="../../record/">Garden Room hire</:subject>
          <:facts>Tom Reid approved it ·&nbsp;Yesterday</:facts>
          <:actions>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.ActionMenu.action_menu id="inbox-garden-room-approved-fold" label="More actions for this notification" groups={[]} />
          </:actions>
        </Kit.Phoenix.Roles.Row.row>
        <Kit.Phoenix.Roles.Row.row>
          <:selection><Kit.Phoenix.Roles.SelectionControl.selection_control name="notification" value="brookfield-note" /><span>Select Brookfield Choir invoice</span></:selection>
          <:subject href="../../record/">Brookfield Choir invoice</:subject>
          <:facts>Maya Patel added a note ·&nbsp;Monday</:facts>
          <:actions>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Done</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Snooze</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Unsubscribe</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
            <Kit.Phoenix.Roles.ActionMenu.action_menu id="inbox-brookfield-note-fold" label="More actions for this notification" groups={[]} />
          </:actions>
        </Kit.Phoenix.Roles.Row.row>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-refused-undo">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} filters_id="kit-list-filters" filters_label="Filters" filters_form_rest={%{}}>
      <:page_refusal>
        <Kit.Phoenix.Roles.Refusal.refusal id="list-undo-refused-1">
          <:line>Undo is refused: the Oakmere Primary School invoice changed after you removed it.</:line>
          <:cause href="../../record/#history">Oakmere Primary School invoice history</:cause>
        </Kit.Phoenix.Roles.Refusal.refusal>
      </:page_refusal>
      <:saved_views>
        <Kit.Phoenix.Roles.LocalTabs.local_tabs id="layout-list-refused-undo-saved-views" label="Saved views">
          <:tab href="../fitting-saved-views/?view=all&page=1">All invoices</:tab>
          <:tab href="../fitting-saved-views/?view=overdue&page=1" current>Overdue</:tab>
        </Kit.Phoenix.Roles.LocalTabs.local_tabs>
      </:saved_views>
      <:search
        id="list-filter-form-group"
        label="Search invoices"
        control_value="Oakmere Primary School"
        control_rest={%{id: "list-filter", placeholder: "Find invoices by hirer name"}}
      />
      <:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-status"}}>Status</:label>
            <:value>
              <select id="list-status"><option>Any status</option><option>Unpaid</option><option>Paid</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
<:filters><Kit.Phoenix.Roles.FormGroup.form_group id="list-overdue-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-overdue"}}>Days past the payment due date</:label>
            <:value>
              <select id="list-overdue"><option>Any</option><option>Over 30 days</option><option>Over 60 days</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-sort-form-group" columnless_order={true} control_value="relevance" control_rest={%{id: "list-sort"}}>
            <:label>Sort</:label>
            <:option value="relevance">Relevance</:option>
            <: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 rest={%{"aria-label": "Columns and selection actions"}}>
        <Kit.Phoenix.Layouts.List.columns id="list-refused-undo-columns" on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
          <:subject id="list-refused-undo-columns-invoice" reason="Names each invoice">Invoice</:subject>
          <:column id="list-refused-undo-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          <:column id="list-refused-undo-columns-due-date" checked={false} control_rest={%{name: "columns", value: "due-date"}}>Due date</:column>
          <:column id="list-refused-undo-columns-room" checked={false} control_rest={%{name: "columns", value: "room"}}>Room</:column>
        </Kit.Phoenix.Layouts.List.columns>
      </:columns_selection_actions>
      <:selection_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:lead action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("review-selected", "Select an invoice to review.")}>Review selected</:lead>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Invoices"}}>
        <Kit.Phoenix.Table.rows_table>
          <:caption>Overdue invoices</:caption>
          <:subject_heading label="Invoice" sort="unsorted" href="?sort=invoice" />
          <:column_headings label="Amount due" kind="amount" sort="unsorted" href="?sort=amount-desc" />
          <:row
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Main Hall hire")])]}
            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")))])}]}
          ><a href="../../record/">Oakmere Primary School invoice awaiting final address confirmation</a></:row>
          <:row
            selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Oakmere Primary School invoice</span>]}
            subject_supporting={[Kit.Phoenix.Supporting.line([Kit.Phoenix.Words.text("Awaiting payment")])]}
            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")))])}]}
          ><a href="../../record/">Oakmere Primary School</a></:row>
          <:expansion_summary row={0}>Invoice details</:expansion_summary>
          <:expansion row={0} expanded authored_text={%Kit.Phoenix.AuthoredText.Shown{value: %Kit.Phoenix.AuthoredText{content: [{:paragraph, [{:text, "Contact Maya to confirm the billing address.", []}]}]}, reader: reader(), mention_link: fn _kind, _id -> nil end, file_link: fn _id -> nil end}} />
          <:expansion_summary row={1}>Invoice details</:expansion_summary>
          <:expansion row={1}>
            <Kit.Phoenix.Roles.FactGroup.fact_group>
              <Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Payment details</:name><:value>Payment details are available after the address is confirmed.</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
            </Kit.Phoenix.Roles.FactGroup.fact_group>
          </:expansion>
          <:total facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "168.00")))])}]}>Total due</:total>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p>Invoice <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 6)} /> 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={6} last_page={12} page_href={&"../fitting-saved-views/?view=all&page=#{&1}"} aria-label="Invoice pages" />
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Accounts</:subject>
  <:lede words="Parent accounts hold their subsidiaries" />
  <:lede words="24 accounts" />
  <:actions><a href="../../layout-list/#layout-list-nested">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}>
      <:rows rest={%{"aria-label": "Accounts"}}>
        <Kit.Phoenix.Table.rows_table expand_event="expand-account" failed="These accounts couldn’t load.">
          <:caption>Accounts and their subsidiaries</:caption>
          <:selection_heading label="Select every account on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control /></:selection_heading>
          <:subject_heading label="Account" />
          <:column_headings label="Owner">Owner</:column_headings>
          <:column_headings label="Renews" kind="time">Renews</:column_headings>
          <:column_headings label="Annual value" kind="amount">Annual value</:column_headings>
          <:row rest={%{id: "nested-harbour-group"}} continued level={1} children={:loaded} expanded facts={[]}><a href="../../record/">Harbour Group</a></:row>
          <:row rest={%{id: "nested-harbour-marine"}} level={2} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Harbour Marine</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Priya Shah")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-09-01]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "12400.00")))])}]}><a href="../../record/">Harbour Marine</a></:row>
          <:row rest={%{id: "nested-harbour-freight-and-logistics"}} level={2} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Harbour Freight and Logistics Services</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Tom Okafor")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-11-15]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "9850.00")))])}]}><a href="../../record/">Harbour Freight and Logistics Services</a></:row>
          <:row rest={%{id: "nested-northwind-holdings"}} level={1} children={:loaded} expanded selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Northwind Holdings</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Ana Ruiz")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2026-01-31]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "61750.00")))])}]}><a href="../../record/">Northwind Holdings</a></:row>
          <:row rest={%{id: "nested-northwind-retail"}} level={2} children={:loaded} expanded selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Northwind Retail</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Ana Ruiz")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2026-01-31]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "22300.00")))])}]}><a href="../../record/">Northwind Retail</a></:row>
          <:row rest={%{id: "nested-northwind-retail-online"}} level={3} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Northwind Retail Online</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Ana Ruiz")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2026-01-31]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "8100.00")))])}]}><a href="../../record/">Northwind Retail Online</a></:row>
          <:row rest={%{id: "nested-northwind-studio"}} level={2} children={:unloaded} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Northwind Studio</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Lena Fischer")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-12-05]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "14900.00")))])}]}><a href="../../record/">Northwind Studio</a></:row>
          <:row rest={%{id: "nested-kestrel-partners"}} level={1} children={:loading} expanded selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Kestrel Partners</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Tom Okafor")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-10-20]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "33600.00")))])}]}><a href="../../record/">Kestrel Partners</a></:row>
          <:row rest={%{id: "nested-alder-and-finch"}} level={1} children={:failed} expanded selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Alder &amp; Finch</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Lena Fischer")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2026-03-12]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "27450.00")))])}]}><a href="../../record/">Alder &amp; Finch</a></:row>
          <:row rest={%{id: "nested-bramble-health"}} level={1} children={:unloaded} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Bramble Health</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Priya Shah")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2026-02-28]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "19200.00")))])}]}><a href="../../record/">Bramble Health</a></:row>
          <:row rest={%{id: "nested-copperline"}} level={1} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select Copperline</span>]} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Ana Ruiz")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.day(reader(), ~D[2025-08-18]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "7300.00")))])}]}><a href="../../record/">Copperline</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:count_continuation>
        <p>Accounts <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 11)} />–<Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 20)} /> of <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.count(reader(), 24)} /></p>
        <Kit.Phoenix.Roles.Pager.pager current_page={2} last_page={3} page_href={&"?view=all&page=#{&1}"} aria-label="Account pages" />
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>Register</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-unsaved">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Register actions"}}>
      <:toolbar_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group unsaved={Kit.Phoenix.State.unsaved(:attention, "Not saved")}>
          <:lead><Kit.Phoenix.Roles.PrimaryAction.primary_action type="submit" form="list-unsaved-register">Save register</Kit.Phoenix.Roles.PrimaryAction.primary_action></:lead>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:toolbar_actions>
      <:rows rest={%{"aria-label": "Brookfield Choir, Tuesday"}} form_rest={%{id: "list-unsaved-register"}} keep={%Kit.Phoenix.Keep{key: "tom-okafor/register/brookfield-choir-tuesday", version: "3"}}>
        <Kit.Phoenix.Roles.Row.row :for={{id, name, mark} <- [{"aisha-khan", "Aisha Khan", "present"}, {"priya-shah", "Priya Shah", "absent"}, {"ana-ruiz", "Ana Ruiz", ""}, {"lena-fischer", "Lena Fischer", ""}]} id={"list-unsaved-" <> id}>
          <:subject element="span" rest={%{id: "list-unsaved-" <> id <> "-name"}}>{name}</:subject>
          <:question>
            <Kit.Phoenix.Roles.FormGroup.form_group id={"list-unsaved-" <> id <> "-attendance-group"} kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-unsaved-" <> id <> "-attendance"}}>Attendance</:label>
              <:value>
                <select id={"list-unsaved-" <> id <> "-attendance"} name={"attendance[" <> id <> "]"} form="list-unsaved-register"><option value="" selected={mark == ""}>Not marked</option><option value="present" selected={mark == "present"}>Present</option><option value="absent" selected={mark == "absent"}>Absent</option></select>
              </:value>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </:question>
        </Kit.Phoenix.Roles.Row.row>
      </:rows>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede_range days={Kit.Phoenix.Time.day_with_weekday(reader(), ~D[2025-04-14])} />
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-inert">{@owner}</a></:actions>
  <:body>
      <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} range_days={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} filters_id="list-inert-filters" filters_label="Filters" clear_filters_href="?view=awaiting&page=1">
        <:today label="Today" state={Kit.Phoenix.ActionState.inert("list-inert-today", "Today is outside this term.")} />
        <:previous label="Previous day" href="?day=2025-04-13" inert rest={%{rel: "prev"}} />
        <:next label="Next day" href="?day=2025-04-15" inert rest={%{rel: "next"}} />
        <:date form_rest={%{}}><Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-date"><:label>Go to a day</: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>
        <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-inert-room-filter" name="Room" applied="Main Hall" clear_href="?view=awaiting&page=1" state={Kit.Phoenix.ActionState.inert("list-inert-room-opener", "Room choices wait until the invoices load.") }>
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-room-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-inert-room"}}>Room</:label>
              <:value>
                <select id="list-inert-room" name="room" disabled aria-describedby="list-inert-room-form-group-help"><option value="">Any room</option><option value="main-hall" selected>Main Hall</option><option value="small-hall">Small Hall</option></select>
              </:value>
              <:help>Room choices wait until the invoices load.</:help>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
        <:save_view><Kit.Phoenix.Roles.SecondaryAction.secondary_action state={Kit.Phoenix.ActionState.inert("list-inert-save-view", "Change a filter to save this view.")}>Save view</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:save_view>
        <:toolbar_actions>
          <Kit.Phoenix.Roles.ActionGroup.action_group>
            <:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-inert-export", "Export is ready once the invoices load.")}>Export</:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Send payment reminders</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Mark invoices paid</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Download payment details</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Print invoice statements</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Send invoice statements</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action>Copy invoice references</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
            <:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-inert-discard", "Changes can be discarded once the invoices load. Your entries stay here while you wait.")}>Discard changes</:secondary>
            <:status_lines><Kit.Phoenix.Roles.StatusLine.status_line>All invoices in this view will be included. Filter by Room or Status to choose a smaller set.</Kit.Phoenix.Roles.StatusLine.status_line></:status_lines>
          </Kit.Phoenix.Roles.ActionGroup.action_group>
        </:toolbar_actions>
        <:columns_selection_actions rest={%{"aria-label": "Columns and selection actions"}}>
          <Kit.Phoenix.Layouts.List.columns id="list-inert-columns" state={Kit.Phoenix.ActionState.inert("list-inert-columns-control", "Columns wait until the invoices load.")} on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
            <:subject id="list-inert-columns-invoice" reason="Names each invoice">Invoice</:subject>
            <:column id="list-inert-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          </Kit.Phoenix.Layouts.List.columns>
        </:columns_selection_actions>
        <:selection_actions>
          <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-inert-remind", "Select invoices to send reminders.")}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
        </:selection_actions>
        <:rows rest={%{"aria-label": "Invoices"}}>
          <Kit.Phoenix.Table.rows_table>
            <:caption>Invoices awaiting payment</:caption>
            <:subject_heading label="Invoice" />
            <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../../record/">Oakmere Primary School</a></:row>
          </Kit.Phoenix.Table.rows_table>
        </:rows>
      </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede_range days={Kit.Phoenix.Time.day_with_weekday(reader(), ~D[2025-04-14])} />
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../../layout-list/#layout-list-inert-more-filters">{@owner}</a></:actions>
  <:body>
      <Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()} toolbar_rest={%{"aria-label": "Invoice views and controls"}} range_days={Kit.Phoenix.Time.day(reader(), ~D[2025-04-14])} filters_id="list-inert-filters" filters_label="Filters" clear_filters_href="?view=awaiting&page=1">
        <:today label="Today" state={Kit.Phoenix.ActionState.inert("list-inert-today", "Today is outside this term.")} />
        <:previous label="Previous day" href="?day=2025-04-13" inert rest={%{rel: "prev"}} />
        <:next label="Next day" href="?day=2025-04-15" inert rest={%{rel: "next"}} />
        <:date form_rest={%{}}><Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-date"><:label>Go to a day</: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>
        <:search id="list-inert-search" label="Search invoices" control_rest={%{placeholder: "Find invoices by hirer name"}} />
        <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-inert-room-filter" name="Room" applied="Main Hall" clear_href="?view=awaiting&page=1" state={Kit.Phoenix.ActionState.inert("list-inert-room-opener", "Room choices wait until the invoices load.") }>
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-room-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-inert-room"}}>Room</:label>
              <:value>
                <select id="list-inert-room" name="room" disabled aria-describedby="list-inert-room-form-group-help"><option value="">Any room</option><option value="main-hall" selected>Main Hall</option><option value="small-hall">Small Hall</option></select>
              </:value>
              <:help>More filter choices wait until the invoices load.</:help>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-inert-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=awaiting&page=1">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-overdue-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-inert-overdue"}}>Overdue</:label>
              <:value><select id="list-inert-overdue" name="overdue" disabled aria-describedby="list-inert-overdue-form-group-help"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select></:value>
              <:help>More filter choices wait until the invoices load.</:help>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-inert-status-filter" name="Status">
            <Kit.Phoenix.Roles.FormGroup.form_group id="list-inert-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
              <:label rest={%{for: "list-inert-status"}}>Status</:label>
              <:value><select id="list-inert-status" name="status" disabled aria-describedby="list-inert-status-form-group-help"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select></:value>
              <:help>More filter choices wait until the invoices load.</:help>
            </Kit.Phoenix.Roles.FormGroup.form_group>
          </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.more id="list-inert-more-filters" state={Kit.Phoenix.ActionState.inert("list-inert-more-opener", "More filter choices wait until the invoices load.") }>
            <:filter id="list-inert-room-filter" name="Room" applied="Main Hall" clear_href="?view=awaiting&page=1" />
            <:filter id="list-inert-overdue-filter" name="Overdue" applied="Over 30 days" clear_href="?view=awaiting&page=1" />
            <:filter id="list-inert-status-filter" name="Status" />
          </Kit.Phoenix.Layouts.List.Filter.more></:filters>
        <:save_view><Kit.Phoenix.Roles.SecondaryAction.secondary_action state={Kit.Phoenix.ActionState.inert("list-inert-save-view", "Change a filter to save this view.")}>Save view</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:save_view>
        <:toolbar_actions>
          <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-inert-export", "Export is ready once the invoices load.")}>Export</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
        </:toolbar_actions>
        <:columns_selection_actions rest={%{"aria-label": "Columns and selection actions"}}>
          <Kit.Phoenix.Layouts.List.columns id="list-inert-columns" state={Kit.Phoenix.ActionState.inert("list-inert-columns-control", "Columns wait until the invoices load.")} on_move="move_column" place_label="Place it" row_label="Column" close_label="Keep the order">
            <:subject id="list-inert-columns-invoice" reason="Names each invoice">Invoice</:subject>
            <:column id="list-inert-columns-amount-due" checked control_rest={%{name: "columns", value: "amount-due"}}>Amount due</:column>
          </Kit.Phoenix.Layouts.List.columns>
        </:columns_selection_actions>
        <:selection_actions>
          <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-inert-remind", "Select invoices to send reminders.")}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
        </:selection_actions>
        <:rows rest={%{"aria-label": "Invoices"}}>
          <Kit.Phoenix.Table.rows_table>
            <:caption>Invoices awaiting payment</:caption>
            <:subject_heading label="Invoice" />
            <:column_headings label="Amount due" kind="amount">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")))])}]}><a href="../../../record/">Oakmere Primary School</a></:row>
          </Kit.Phoenix.Table.rows_table>
        </:rows>
      </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 7, query: "", names: ["room", "status", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.loaded("hires")}>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-loaded-remind", "Select hires to send reminders.") |> Kit.Phoenix.ActionState.waits_on(["hire"])} control_rest={%{form: "list-loaded-selection"}}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Hires"}} form_rest={%{id: "list-loaded-selection"}}>
        <Kit.Phoenix.Table.rows_table>
          <:selection_heading label="Select every hire on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control /></:selection_heading>
          <:subject_heading label="Hirer" sort="unsorted" order="hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Status">Status</:column_headings>
        <:row :for={{{hirer, booked, room, room_name, status, status_name}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Riverside Choir", 97, "small-hall", "Small Hall", "confirmed", "Confirmed"}, {"Hollins Judo Club", 45, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Thursday Art Group", 31, "garden-room", "Garden Room", "provisional", "Provisional"}, {"Oakmere Scouts", 18, "small-hall", "Small Hall", "provisional", "Provisional"}, {"Fernley Dance School", 9, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Allotment Society", 4, "garden-room", "Garden Room", "confirmed", "Confirmed"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => [room], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer})} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-selection"})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} rows_per_page={%Kit.Phoenix.Roles.Pager.LoadedRowsPerPage{id: "list-loaded-rows-per-page", sizes: [2, 5, 10]}} go_to_page={%Kit.Phoenix.Roles.Pager.LoadedGoToPage{id: "list-loaded-go-to-page"}} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-at-a-view">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 7, query: "room=main-hall", names: ["room", "status"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-at-a-view-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-at-a-view-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-at-a-view-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-at-a-view-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-at-a-view-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-at-a-view-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-at-a-view-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.loaded("hires")}>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-loaded-at-a-view-remind", "Select hires to send reminders.") |> Kit.Phoenix.ActionState.waits_on(["hire"])} control_rest={%{form: "list-loaded-at-a-view-selection"}}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Hires"}} form_rest={%{id: "list-loaded-at-a-view-selection"}}>
        <Kit.Phoenix.Table.rows_table>
          <:selection_heading label="Select every hire on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control /></:selection_heading>
          <:subject_heading label="Hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Status">Status</:column_headings>
        <:row :for={{{hirer, room, room_name, status, status_name}, place} <- Enum.with_index([{"Oakmere Primary School", "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Riverside Choir", "small-hall", "Small Hall", "confirmed", "Confirmed"}, {"Hollins Judo Club", "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Thursday Art Group", "garden-room", "Garden Room", "provisional", "Provisional"}, {"Oakmere Scouts", "small-hall", "Small Hall", "provisional", "Provisional"}, {"Fernley Dance School", "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Allotment Society", "garden-room", "Garden Room", "confirmed", "Confirmed"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => [room], "status" => [status]})} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-at-a-view-selection"})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} rows_per_page={%Kit.Phoenix.Roles.Pager.LoadedRowsPerPage{id: "list-loaded-at-a-view-rows-per-page", sizes: [2, 5, 10]}} go_to_page={%Kit.Phoenix.Roles.Pager.LoadedGoToPage{id: "list-loaded-at-a-view-go-to-page"}} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-records">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 7, query: "", names: ["room", "status", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-records-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-records-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-records-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-records-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-records-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-records-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-records-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-records-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-records-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
          <:option value="room">Room, A to Z</:option>
          <:option value="-room">Room, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.loaded("hires")}>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-loaded-records-remind", "Select hires to send reminders.") |> Kit.Phoenix.ActionState.waits_on(["hire"])} control_rest={%{form: "list-loaded-records-selection"}}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Hires"}} form_rest={%{id: "list-loaded-records-selection"}}>
        <Kit.Phoenix.Table.rows_table>
          <:selection_heading label="Select every hire on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control /></:selection_heading>
          <:subject_heading label="Hirer" sort="unsorted" order="hirer" />
          <:column_headings label="Room" sort="unsorted" order="room">Room</:column_headings>
          <:column_headings label="Status">Status</:column_headings>
        <:row :for={{{hirer, booked, room, room_name, status, status_name}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Riverside Choir", 97, "small-hall", "Small Hall", "confirmed", "Confirmed"}, {"Hollins Judo Club", 45, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Thursday Art Group", 31, "garden-room", "Garden Room", "provisional", "Provisional"}, {"Oakmere Scouts", 18, "small-hall", "Small Hall", "provisional", "Provisional"}, {"Fernley Dance School", 9, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Allotment Society", 4, "garden-room", "Garden Room", "confirmed", "Confirmed"}], 1)} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-records-selection"})} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => [room], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer, "room" => room_name})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} rows_per_page={%Kit.Phoenix.Roles.Pager.LoadedRowsPerPage{id: "list-loaded-records-rows-per-page", sizes: [2, 5, 10]}} go_to_page={%Kit.Phoenix.Roles.Pager.LoadedGoToPage{id: "list-loaded-records-go-to-page"}} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-cards">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 7, query: "", names: ["room", "status", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-cards-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-cards-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-cards-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-cards-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-cards-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-cards-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-cards-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-cards-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-cards-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:cards rest={%{"aria-label": "Hires"}}>
        <div>
        <Kit.Phoenix.Roles.Card.card :for={{{hirer, booked, room, room_name, status, status_name}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Riverside Choir", 97, "small-hall", "Small Hall", "confirmed", "Confirmed"}, {"Hollins Judo Club", 45, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Thursday Art Group", 31, "garden-room", "Garden Room", "provisional", "Provisional"}, {"Oakmere Scouts", 18, "small-hall", "Small Hall", "provisional", "Provisional"}, {"Fernley Dance School", 9, "main-hall", "Main Hall", "confirmed", "Confirmed"}, {"Allotment Society", 4, "garden-room", "Garden Room", "confirmed", "Confirmed"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => [room], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer})}>
          <:subject href="../../record/">{hirer}</:subject>
          <:stamp><Kit.Phoenix.Roles.Stamp.stamp state={if status == "confirmed", do: "settled", else: "neutral"}>{status_name}</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
          <:facts><Kit.Phoenix.Roles.FactGroup.fact_group><Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Room</:name><:value>{room_name}</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact></Kit.Phoenix.Roles.FactGroup.fact_group></:facts>
        </Kit.Phoenix.Roles.Card.card>
        </div>
      </:cards>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} rows_per_page={%Kit.Phoenix.Roles.Pager.LoadedRowsPerPage{id: "list-loaded-cards-rows-per-page", sizes: [2, 5, 10]}} go_to_page={%Kit.Phoenix.Roles.Pager.LoadedGoToPage{id: "list-loaded-cards-go-to-page"}} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-grouped">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 7, query: "", names: ["room", "status", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-grouped-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 2, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-grouped-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-grouped-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-grouped-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-grouped-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-grouped-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-grouped-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-grouped-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-grouped-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:columns_selection_actions rest={%{"aria-label": "Selection actions"}}></:columns_selection_actions>
      <:selection_actions selection={Kit.Phoenix.Layouts.List.Selection.loaded("hires")}>
        <Kit.Phoenix.Roles.ActionGroup.action_group><:secondary action="secondary-action" action_state={Kit.Phoenix.ActionState.inert("list-loaded-grouped-remind", "Select hires to send reminders.") |> Kit.Phoenix.ActionState.waits_on(["hire"])} control_rest={%{form: "list-loaded-grouped-selection"}}>Send reminders</:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
      </:selection_actions>
      <:rows rest={%{"aria-label": "Hires"}} form_rest={%{id: "list-loaded-grouped-selection"}}>
        <Kit.Phoenix.Table.rows_table>
          <:selection_heading label="Select every hire on this page"><Kit.Phoenix.Roles.SelectionControl.selection_control /></:selection_heading>
          <:subject_heading label="Hirer" sort="unsorted" order="hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Status">Status</:column_headings>
          <:group id="list-loaded-grouped-group-main-hall" count="3" loaded={loaded} place={1} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select every hire in Main Hall</span>]}>Main Hall</:group>
          <:group id="list-loaded-grouped-group-small-hall" count="2" loaded={loaded} place={4} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select every hire in Small Hall</span>]}>Small Hall</:group>
          <:group id="list-loaded-grouped-group-garden-room" count="2" loaded={loaded} place={6} selection={~H[<Kit.Phoenix.Roles.SelectionControl.selection_control /><span>Select every hire in Garden Room</span>]}>Garden Room</:group>
          <:row :for={{{hirer, booked, status, status_name}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "confirmed", "Confirmed"}, {"Hollins Judo Club", 45, "confirmed", "Confirmed"}, {"Fernley Dance School", 9, "confirmed", "Confirmed"}], 1)} group="list-loaded-grouped-group-main-hall" fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => ["main-hall"], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer})} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-grouped-selection"})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
          <:row :for={{{hirer, booked, status, status_name}, place} <- Enum.with_index([{"Riverside Choir", 97, "confirmed", "Confirmed"}, {"Oakmere Scouts", 18, "provisional", "Provisional"}], 4)} group="list-loaded-grouped-group-small-hall" fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => ["small-hall"], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer})} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-grouped-selection"})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Small Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
          <:row :for={{{hirer, booked, status, status_name}, place} <- Enum.with_index([{"Thursday Art Group", 31, "provisional", "Provisional"}, {"Allotment Society", 4, "confirmed", "Confirmed"}], 6)} group="list-loaded-grouped-group-garden-room" fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => ["garden-room"], "status" => [status]}, sorts: %{"booked" => booked, "hirer" => hirer})} selection={hire_selection(%{place: place, hirer: hirer, form: "list-loaded-grouped-selection"})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden Room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} rows_per_page={%Kit.Phoenix.Roles.Pager.LoadedRowsPerPage{id: "list-loaded-grouped-rows-per-page", sizes: [2, 5, 10]}} go_to_page={%Kit.Phoenix.Roles.Pager.LoadedGoToPage{id: "list-loaded-grouped-go-to-page"}} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-more-filters">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 5, rows: 7, query: "", names: ["room", "status", "deposit", "setup", "hirer", "payment", "catering", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} style="inline-size: min(100%, var(--kit-desk-width));" toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-more-filters-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 7, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-room-filter" name="Room" field="room">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-more-filters-room">
            <:legend>Room</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "main-hall"}}>Main Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "small-hall"}}>Small Hall</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "room", value: "garden-room"}}>Garden Room</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-status-filter" name="Status" field="status">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-more-filters-status-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-more-filters-status"}}>Status</:label>
            <:value>
              <select id="list-loaded-more-filters-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-deposit-filter" name="Deposit" field="deposit">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-more-filters-deposit-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-more-filters-deposit"}}>Deposit</:label>
            <:value>
              <select id="list-loaded-more-filters-deposit" name="deposit"><option value="">Any deposit</option><option value="paid">Paid</option><option value="due">Due</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-setup-filter" name="Room setup" field="setup">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-more-filters-setup">
            <:legend>Room setup</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "setup", value: "rows"}}>Rows of chairs</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "setup", value: "tables"}}>Tables</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "setup", value: "open"}}>Open floor</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-hirer-filter" name="Hirer type" field="hirer">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-more-filters-hirer">
            <:legend>Hirer type</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "hirer", value: "school"}}>School</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "hirer", value: "club"}}>Club</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "hirer", value: "society"}}>Society</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-payment-filter" name="Payment" field="payment">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-more-filters-payment-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-more-filters-payment"}}>Payment</:label>
            <:value>
              <select id="list-loaded-more-filters-payment" name="payment"><option value="">Any payment</option><option value="card">Card</option><option value="transfer">Bank transfer</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-more-filters-catering-filter" name="Catering" field="catering">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-more-filters-catering-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()}>
            <:label rest={%{for: "list-loaded-more-filters-catering"}}>Catering</:label>
            <:value>
              <select id="list-loaded-more-filters-catering" name="catering"><option value="">Any catering</option><option value="kitchen">Kitchen hired</option><option value="none">No kitchen</option></select>
            </:value>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
<:filters><Kit.Phoenix.Layouts.List.Filter.more id="list-loaded-more-filters-more" count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 0, counts: "filters", forms: %{one: "filter"}}}>
          <:filter id="list-loaded-more-filters-room-filter" name="Room" field="room" />
          <:filter id="list-loaded-more-filters-status-filter" name="Status" field="status" />
          <:filter id="list-loaded-more-filters-deposit-filter" name="Deposit" field="deposit" />
          <:filter id="list-loaded-more-filters-setup-filter" name="Room setup" field="setup" />
          <:filter id="list-loaded-more-filters-hirer-filter" name="Hirer type" field="hirer" />
          <:filter id="list-loaded-more-filters-payment-filter" name="Payment" field="payment" />
          <:filter id="list-loaded-more-filters-catering-filter" name="Catering" field="catering" />
        </Kit.Phoenix.Layouts.List.Filter.more></:filters>
<:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-more-filters-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-more-filters-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:rows rest={%{"aria-label": "Hires"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Hirer" sort="unsorted" order="hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Status">Status</:column_headings>
        <:row :for={{{hirer, booked, room, room_name, status, status_name, deposit, setup, hirer_type, payment, catering}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "main-hall", "Main Hall", "confirmed", "Confirmed", "paid", "rows", "school", "transfer", "kitchen"}, {"Riverside Choir", 97, "small-hall", "Small Hall", "confirmed", "Confirmed", "paid", "rows", "society", "card", "none"}, {"Hollins Judo Club", 45, "main-hall", "Main Hall", "confirmed", "Confirmed", "due", "open", "club", "card", "none"}, {"Thursday Art Group", 31, "garden-room", "Garden Room", "provisional", "Provisional", "due", "tables", "society", "transfer", "kitchen"}, {"Oakmere Scouts", 18, "small-hall", "Small Hall", "provisional", "Provisional", "paid", "open", "club", "card", "none"}, {"Fernley Dance School", 9, "main-hall", "Main Hall", "confirmed", "Confirmed", "due", "open", "school", "transfer", "kitchen"}, {"Allotment Society", 4, "garden-room", "Garden Room", "confirmed", "Confirmed", "paid", "tables", "society", "card", "kitchen"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"room" => [room], "status" => [status], "deposit" => [deposit], "setup" => [setup], "hirer" => [hirer_type], "payment" => [payment], "catering" => [catering]}, sorts: %{"booked" => booked, "hirer" => hirer})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(status_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-date-range">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 5, rows: 7, query: "", names: ["date[first]", "date[last]"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-date-range-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 1, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-date-range-date-filter" name="Hire date" field="date">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-date-range-date">
            <:label>Hire date</:label>
            <:control_set :let={binding}><Kit.Phoenix.Roles.DateRange.date_range binding={binding} reader={reader()} name="date" open_ends={:either} presets={false} today={Kit.Phoenix.Time.day(reader(), ~D[2026-09-15])} direction={:either} /></:control_set>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
      <:rows rest={%{"aria-label": "Hires"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Hire date">Hire date</:column_headings>
        <:row :for={{{hirer, day, room_name}, place} <- Enum.with_index([{"Oakmere Primary School", ~D[2026-09-19], "Main Hall"}, {"Riverside Choir", ~D[2026-09-24], "Small Hall"}, {"Hollins Judo Club", ~D[2026-10-02], "Main Hall"}, {"Thursday Art Group", ~D[2026-10-08], "Garden Room"}, {"Oakmere Scouts", ~D[2026-10-17], "Small Hall"}, {"Fernley Dance School", ~D[2026-10-23], "Main Hall"}, {"Allotment Society", ~D[2026-11-06], "Garden Room"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"date" => [Date.to_iso8601(day)]})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(reader() |> Kit.Phoenix.Time.day(day))])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-record-picker">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 5, rows: 7, query: "", names: ["hirer"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Event filters"}} filters_id="list-loaded-record-picker-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 1, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-record-picker-hirer-filter" name="Hirer" field="hirer">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-record-picker-hirer">
            <:label>Hirer</:label>
            <:control :let={binding}>
              <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
                binding={binding}
                name="hirer"
                recent={[
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "h-104", name: ["Oakmere Primary School"], fact: "Education"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "h-211", name: ["Riverside Choir"], fact: "Music"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "h-318", name: ["Hollins Judo Club"], fact: "Sport"},
                  %Kit.Phoenix.Roles.RecordPicker.Record{id: "h-052", name: ["Allotment Society"], fact: "Gardening"}
                ]}
                none="No hirers match."
                query_event="search_hirers"
              />
            </:control>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
      <:rows rest={%{"aria-label": "Events"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Event" />
          <:column_headings label="Hirer">Hirer</:column_headings>
          <:column_headings label="Room">Room</:column_headings>
        <:row :for={{{event, hirer, hirer_name, room_name}, place} <- Enum.with_index([{"Summer fair", "h-104", "Oakmere Primary School", "Main Hall"}, {"Choir rehearsal", "h-211", "Riverside Choir", "Small Hall"}, {"Judo grading", "h-318", "Hollins Judo Club", "Main Hall"}, {"Autumn concert", "h-211", "Riverside Choir", "Main Hall"}, {"Parents' evening", "h-104", "Oakmere Primary School", "Small Hall"}, {"Junior judo", "h-318", "Hollins Judo Club", "Garden Room"}, {"Plant sale", "h-052", "Allotment Society", "Garden Room"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"hirer" => [hirer]}, names: %{"hirer" => %{hirer => hirer_name}})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(hirer_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}]}><a href="../../record/">{event}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No events match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Event pages">Events {count.first}–{count.last} of {count.total}<:one_row :let={count}>Event {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-slider">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 5, rows: 7, query: "", names: ["fee[lowest]", "fee[highest]"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire filters"}} filters_id="list-loaded-slider-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 1, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-slider-fee-filter" name="Fee" field="fee">
          <Kit.Phoenix.Roles.FormGroup.form_group id="list-loaded-slider-fee">
            <:label>Fee</:label>
            <:control_set :let={binding}>
              <Kit.Phoenix.Roles.Slider.slider binding={binding} reader={reader()} min={0} max={400} step={20} measure={Kit.Phoenix.Roles.NumberField.Measure.currency("GBP")}>
                <:thumb label="Lowest fee" name="fee[lowest]" value="0" />
                <:thumb label="Highest fee" name="fee[highest]" value="400" />
              </Kit.Phoenix.Roles.Slider.slider>
            </:control_set>
            <:help>From £0 to £400.</:help>
          </Kit.Phoenix.Roles.FormGroup.form_group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
      <:rows rest={%{"aria-label": "Hires"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Hirer" />
          <:column_headings label="Room">Room</:column_headings>
          <:column_headings label="Fee" kind="amount">Fee</:column_headings>
        <:row :for={{{hirer, fee, room_name}, place} <- Enum.with_index([{"Oakmere Primary School", 240, "Main Hall"}, {"Riverside Choir", 80, "Small Hall"}, {"Hollins Judo Club", 150, "Main Hall"}, {"Thursday Art Group", 60, "Garden Room"}, {"Oakmere Scouts", 320, "Small Hall"}, {"Fernley Dance School", 45, "Main Hall"}, {"Allotment Society", 180, "Garden Room"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"fee" => [Integer.to_string(fee)]})} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "#{fee}.00")))])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No hires match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-search">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 5, rows: 7, query: "", names: ["search", "sort"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Hire search"}} filters_id="list-loaded-search-filters" filters_label="Filters" filters_form_rest={%{}}>
      <:search id="list-loaded-search-form-group" label="Search hires" control_rest={%{id: "list-loaded-search", name: "search", placeholder: "Find hires by hirer or room"}} />
      <:filters><Kit.Phoenix.Layouts.List.sort id="list-loaded-search-sort-form-group" columnless_order={true} control_value="-booked" control_rest={%{id: "list-loaded-search-sort", name: "sort"}}>
          <:label>Sort</:label>
          <:option value="relevance" rest={%{hidden: true}}>Relevance</:option>
          <:option value="-booked">Booked, newest first</:option>
          <:option value="booked">Booked, oldest first</:option>
          <:option value="hirer">Hirer, A to Z</:option>
          <:option value="-hirer">Hirer, Z to A</:option>
        </Kit.Phoenix.Layouts.List.sort></:filters>
      <:rows rest={%{"aria-label": "Hires"}}>
        <Kit.Phoenix.Table.rows_table>
          <:subject_heading label="Hirer" sort="unsorted" order="hirer" />
          <:column_headings label="Room">Room</:column_headings>
        <:row :for={{{hirer, booked, room_name}, place} <- Enum.with_index([{"Oakmere Primary School", 120, "Main Hall"}, {"Riverside Choir", 97, "Small Hall"}, {"Hollins Judo Club", 45, "Main Hall"}, {"Thursday Art Group", 31, "Garden Room"}, {"Oakmere Scouts", 18, "Small Hall"}, {"Fernley Dance School", 9, "Main Hall"}, {"Allotment Society", 4, "Garden Room"}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, sorts: %{"booked" => booked, "hirer" => hirer}, search: [hirer, room_name])} facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text(room_name)])}]}><a href="../../record/">{hirer}</a></:row>
        </Kit.Phoenix.Table.rows_table>
      </:rows>
      <:nothing_matches :let={applied} action="Clear search">No hires match {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Hire pages">Hires {count.first}–{count.last} of {count.total}<:one_row :let={count}>Hire {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>

<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
  <:subject>List</:subject>
  <:lede words={@owner} />
  <:lede words="Layout example" />
  <:actions><a href="../../layout-list/#layout-list-loaded-question">{@owner}</a></:actions>
  <:body>
    <Kit.Phoenix.Layouts.List.list :for={loaded <- [Kit.Phoenix.Layouts.List.Loaded.new(reader: reader(), page_size: 2, rows: 5, query: "day=saturday", names: ["day"])]} subject_state={Kit.Phoenix.State.none()} loaded={loaded} toolbar_rest={%{"aria-label": "Class filters"}} filters_id="list-loaded-question-filters" filters_label="Filters" filters_form_rest={%{}} filters_count={%Kit.Phoenix.Roles.Count{reader: reader(), count: 1, counts: "filters", forms: %{one: "filter"}}}>
      <:filters><Kit.Phoenix.Layouts.List.Filter.filter id="list-loaded-question-day-filter" name="Day" field="day">
          <Kit.Phoenix.Roles.SelectionControl.group id="list-loaded-question-day">
            <:legend>Day</:legend>
            <:choice kind={:checkbox} control_rest={%{name: "day", value: "saturday"}}>Saturday</:choice>
            <:choice kind={:checkbox} control_rest={%{name: "day", value: "sunday"}}>Sunday</:choice>
          </Kit.Phoenix.Roles.SelectionControl.group>
        </Kit.Phoenix.Layouts.List.Filter.filter></:filters>
      <:toolbar_actions>
        <Kit.Phoenix.Roles.ActionGroup.action_group>
          <:lead action="primary-action" action_state={Kit.Phoenix.ActionState.inert("list-loaded-question-continue", "Choose a class to continue.") |> Kit.Phoenix.ActionState.waits_on(["selected[]"])} control_rest={%{type: "submit", form: "list-loaded-question-answers"}}>Continue</:lead>
          <:status_lines>
            <Kit.Phoenix.Layouts.List.answer_status_line id="list-loaded-question-status" :let={names}>
              {names} chosen.
            </Kit.Phoenix.Layouts.List.answer_status_line>
          </:status_lines>
        </Kit.Phoenix.Roles.ActionGroup.action_group>
      </:toolbar_actions>
      <:rows rest={%{"aria-label": "Classes"}} form_rest={%{id: "list-loaded-question-answers"}}>
        <Kit.Phoenix.Roles.Row.row :for={{{key, name, day, day_name, chosen}, place} <- Enum.with_index([{"ballet", "Ballet, ages 4 to 6", "saturday", "Saturday", false}, {"tap", "Tap, ages 7 to 10", "sunday", "Sunday", true}, {"jazz", "Jazz, ages 11 to 14", "saturday", "Saturday", true}, {"street", "Street dance, ages 8 to 12", "saturday", "Saturday", false}, {"contemporary", "Contemporary, ages 15 to 18", "sunday", "Sunday", false}], 1)} fields={Kit.Phoenix.Layouts.List.Fields.new(loaded, place, filters: %{"day" => [day]})}>
          <:subject href="../../record/" rest={%{id: "list-loaded-question-#{key}"}}>{name}</:subject>
          <:facts>{day_name}</:facts>
          <:question>
            <Kit.Phoenix.Roles.SelectionControl.group id={"list-loaded-question-#{key}-choice"} aria-labelledby={"list-loaded-question-#{key}"}>
              <:choice kind={:checkbox} checked={chosen} control_rest={%{name: "selected[]", value: key, form: "list-loaded-question-answers"}}>Choose</:choice>
            </Kit.Phoenix.Roles.SelectionControl.group>
          </:question>
        </Kit.Phoenix.Roles.Row.row>
      </:rows>
      <:nothing_matches :let={applied} action="Clear filters">No classes match: {applied}.</:nothing_matches>
      <:count_continuation>
        <Kit.Phoenix.Roles.Pager.loaded :let={count} loaded={loaded} aria-label="Class pages">Classes {count.first}–{count.last} of {count.total}<:one_row :let={count}>Class {count.first} of {count.total}</:one_row></Kit.Phoenix.Roles.Pager.loaded>
      </:count_continuation>
    </Kit.Phoenix.Layouts.List.list>
  </:body>
</Kit.Phoenix.Layouts.Shell.shell>