<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>

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

  <%= pb_rails("selectable_card", props: {
    text: "Selected With Options",
    input_id: "selected_with options",
    name: "selected_with options",
    value: "selected_with options",
    checked: true,
    input_options: {
      class: "input-class",
      name: "overwriting-name",
      value: "overwriting-value",
    }
  }) %>

</div>

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

  <%= pb_rails("selectable_card", props: {
    input_id: "selectable-image-default",
    name: "selectable-image-default",
    value: "selectable-image-default",
    checked: true,
    icon: true
  }) do %>
    <%= pb_rails("image", props: { rounded: true, size: "xl",url: "https://unsplash.it/500/400/?image=634" }) %>
    <%= pb_rails("body", props: { tag: "span"}) do %>
      Add text here
    <% end %>

  <% end %>

  <%= pb_rails("selectable_card", props: {
    input_id: "selectable-image-xl",
    name: "selectable-image-xl",
    value: "selectable-image-xl",
    checked: false,
    icon: true
  }) do %>
    <%= pb_rails("image", props: { rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
  <% end %>

</div>

<%= pb_rails("title", props: {
  size: 3,
  text: "What programming languages do you know?"
}) %>

<br />

<%= pb_rails("selectable_card", props: {
  checked: true,
  input_id: "ruby",
  name: "ruby",
  value: "ruby",
  variant: "display_input"
}) do %>
  Ruby
<% end %>

<%= pb_rails("selectable_card", props: {
  checked: true,
  input_id: "javascript",
  name: "javascript",
  value: "javascript",
  variant: "display_input"
}) do %>
  JavaScript
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "typescript",
  name: "typescript",
  value: "typescript",
  variant: "display_input"
}) do %>
  TypeScript
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "swift",
  name: "swift",
  value: "swift",
  variant: "display_input"
}) do %>
  Swift
<% end %>

<br />

<%= pb_rails("title", props: {
  size: 3,
  text: "How likely are you to recommend Playbook to a friend?"
}) %>

<br />

<%= pb_rails("selectable_card", props: {
  checked: true,
  input_id: "first_radio",
  multi: false,
  name: "radio_group",
  value: "first_radio",
  variant: "display_input"
}) do %>
  5
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "second_radio",
  multi: false,
  name: "radio_group",
  value: "second_radio",
  variant: "display_input"
}) do %>
  4
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "third_radio",
  multi: false,
  name: "radio_group",
  value: "third_radio",
  variant: "display_input"
}) do %>
  3
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "fourth_radio",
  multi: false,
  name: "radio_group",
  value: "fourth_radio",
  variant: "display_input"
}) do %>
  2
<% end %>

<%= pb_rails("selectable_card", props: {
  input_id: "fifth_radio",
  multi: false,
  name: "radio_group",
  value: "fifth_radio",
  variant: "display_input"
}) do %>
  1
<% end %>

<%= pb_rails("title", props: {
  size: 3,
  text: "What sports do you like?"
}) %>

<br />

<%= pb_rails("selectable_card", props: {
  error: true,
  input_id: "football",
  name: "football",
  value: "football",
  variant: "display_input"
}) do %>
  Football
<% end %>

<%= pb_rails("selectable_card", props: {
  error: true,
  input_id: "basketball",
  name: "basketball",
  value: "basketball",
  variant: "display_input"
}) do %>
  Basketball
<% end %>

<%= pb_rails("selectable_card", props: {
  error: true,
  input_id: "baseball",
  name: "baseball",
  value: "baseball",
  variant: "display_input"
}) do %>
  Baseball
<% end %>