Record picker

<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-client">
  <:label>Client</:label>
  <:control :let={binding}>
    <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
      binding={binding}
      name="client"
      chosen={%Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: ["Harbour Dental"], fact: "Leeds"}}
      recent={[
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: ["Harbour Dental"], fact: "Leeds"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-311", name: ["Northgate Pharmacy"], fact: "York"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-052", name: ["Fern & Finch Florists"], fact: "Harrogate"}
      ]}
      none="No clients match."
      query_event="search_clients"
      clear
    />
  </:control>
  <:help>The client this job is billed to.</:help>
  <:printed_value>Harbour Dental</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-client-disabled">
<:label>Client</:label>
<:control :let={binding}>
  <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
    disabled
    binding={binding}
    name="client"
    chosen={%Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: ["Harbour Dental"], fact: "Leeds"}}
    recent={[
      %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: ["Harbour Dental"], fact: "Leeds"},
      %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-311", name: ["Northgate Pharmacy"], fact: "York"},
      %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-052", name: ["Fern & Finch Florists"], fact: "Harrogate"}
    ]}
    none="No clients match."
    query_event="search_clients"
    clear
  />
</:control>
<:help>Only the owner can change this.</:help>
<:printed_value>Harbour Dental</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>

<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-recent">
  <:label>Client</:label>
  <:control :let={binding}>
    <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
      binding={binding}
      name="client"
      recent={[
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: ["Harbour Dental"], fact: "Leeds"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-311", name: ["Northgate Pharmacy"], fact: "York"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-052", name: ["Fern & Finch Florists"], fact: "Harrogate"}
      ]}
      none="No clients match."
      query_event="search_clients"
    >
      <:new dialog="new-client">client</:new>
    </Kit.Phoenix.Roles.RecordPicker.record_picker>
  </:control>
  <:printed_value>No client chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>

<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-matches">
  <:label>Client</:label>
  <:control :let={binding}>
    <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium"
      binding={binding}
      name="client"
      matches={[
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-104", name: [{:matched, "Har"}, "bour Dental"], fact: "Leeds"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-233", name: [{:matched, "Har"}, "bour Dental"], fact: "York"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-118", name: [{:matched, "Har"}, "borne Vets"], fact: "Birmingham"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-310", name: [{:matched, "Har"}, "bourside Physio"], fact: "Bristol"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-087", name: [{:matched, "Har"}, "court Joinery"], fact: "Leeds"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-412", name: [{:matched, "Har"}, "dwick Farm Shop"], fact: "Derby"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-156", name: [{:matched, "Har"}, "low Tyres"], fact: "Harlow"},
        %Kit.Phoenix.Roles.RecordPicker.Record{id: "c-199", name: ["S", {:matched, "har"}, "p Studio"], fact: "Leeds"}
      ]}
      more="11 more. Keep typing to narrow the list."
      none="No clients match."
      query_event="search_clients"
    >
      <:new dialog="new-client">client</:new>
    </Kit.Phoenix.Roles.RecordPicker.record_picker>
  </:control>
  <:printed_value>No client chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>

<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-none">
  <:label>Client</:label>
  <:control :let={binding}>
    <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium" binding={binding} name="client" matches={[]} none="No clients match." query_event="search_clients">
      <:new dialog="new-client">client</:new>
    </Kit.Phoenix.Roles.RecordPicker.record_picker>
  </:control>
  <:printed_value>No client chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>

<Kit.Phoenix.Roles.FormGroup.form_group id="phoenix-picker-matching">
  <:label>Client</:label>
  <:control :let={binding}>
    <Kit.Phoenix.Roles.RecordPicker.record_picker width="medium" binding={binding} name="client" none="No clients match." query_event="search_clients" matching>
      <:new dialog="new-client">client</:new>
    </Kit.Phoenix.Roles.RecordPicker.record_picker>
  </:control>
  <:printed_value>No client chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>