<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "selected_with_icon",
    name: "selected_with_icon",
    value: "selected_with_icon",
    checked: true,
    icon: true
  }) do %>
    Selected, with icon
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "selected_without_icon",
    name: "selected_without_icon",
    value: "selected_without_icon",
    checked: true,
  }) do %>
    Selected, without icon
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "unselected",
    name: "unselected",
    value: "unselected",
  }) do %>
    Unselected
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "disabled",
    name: "disabled",
    value: "disabled",
    disabled: true
  }) do %>
    Disabled
  <% end %>
  
</div>

<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "male",
    name: "gender",
    value: "male",
    multi: false
  }) do %>
    Male
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "female",
    name: "gender",
    value: "female",
    multi: false
  }) do %>
    Female
  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "other",
    name: "gender",
    value: "other",
    multi: false
  }) do %>
    Other
  <% end %>
  
</div>

<div class="pb--doc-demo-row">

  <%= pb_rails("selectable_card", props: {
    input_id: "block",
    name: "block",
    value: "block",
    checked: true
  }) do %>
    <%= pb_rails("title", props: { text: "Block", size: 4 }) %>
    <%= pb_rails("body", props: { tag: "span"}) do %>
      This uses block
    <% end %>
  <% end %>

  <br><br>

  <%= pb_rails("selectable_card", props: {
    input_id: "tag",
    name: "tag",
    value: "tag",
    text: "This passes in text",
    checked: false
  }) %>

</div>