<h3 class="t-sage-heading-6">Feature Toggle</h3>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SageFeatureToggle, {
    description: "Quickly see Segments & filter contacts with a consistent People list view.",
    links: [
      {
        icon: "launch",
        location: "#",
        target: "_blank",
        rel: "noopener",
        text: "Learn more",
      },
      {
        icon: "comment",
        location: "#",
        text: "Feedback",
      }
    ],
    title: "New People list view",
    title_tag: "h5",
  } do %>
    <%= sage_component_section :feature_toggle_input do %>
      <div class="sage-switch">
        <input
          type="checkbox"
          id="feature-toggle-id-1"
          class="sage-switch__input"
          name="feature-toggle-id"
          value="feature-toggle-id"
        >
        <label for="feature-toggle-id-1" class="sage-switch__label sage-switch__label--hide-text">Label Title</label>
      </div>
    <% end %>
  <% end %>
<% end %>
<h3 class="t-sage-heading-6">Feature Toggle with <code><a href="/pages/component/icon_card">Icon Card</a></code></h3>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SageFeatureToggle, {
    description: "New navigation bar layout that places Offers, Coupons, and Affiliates under a brand new “Sales” tab.",
    icon: {
      color: "published",
      icon: "tag",
      label: "New Sales Tab"
    },
    links: [
      {
        icon: "comment",
        location: "#",
        target: "_blank",
        rel: "noopener",
        text: "Feedback",
      },
    ],
    label: {
      color: "locked",
      value: "Label Value",
    },
    title: "New Sales Tab",
  } do %>
    <%= sage_component_section :feature_toggle_input do %>
      <%= sage_component SageSwitch, {
        type: "checkbox",
        id: "feature-toggle-id-2",
        hide_text: true,
        label_text: "Label Title",
        message: "",
        name: "feature-toggle-id",
        value: "feature-toggle-value",
        css_classes: "sage-feature-toggle__switch"
      } %>
    <% end %>
  <% end %>
<% end %>
<h3 class="t-sage-heading-6">Feature Toggle with <code>image</code></h3>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SageFeatureToggle, {
    description: "Quickly see Segments & filter contacts with a consistent People list view.",
    image: "card-placeholder-sm.png",
    links: [
      {
        icon: "launch",
        location: "#",
        target: "_blank",
        rel: "noopener",
        text: "Learn more",
      },
    ],
    label: {
      color: "locked",
      value: "Label Value",
    },
    title: "New People list view",
  } do %>
    <%= sage_component_section :feature_toggle_input do %>
      <%= sage_component SageSwitch, {
        type: "checkbox",
        id: "feature-toggle-id-2",
        hide_text: true,
        label_text: "Label Title",
        message: "",
        name: "feature-toggle-id",
        value: "feature-toggle-value",
        css_classes: "sage-feature-toggle__switch"
      } %>
    <% end %>
  <% end %>
<% end %>