<%= sage_component SageAlert, {
  color: "warning",
  title: "Deprecated",
  desc:  "Catalog Item usage is no longer recommended. Please use the #{link_to "List component", "/pages/component/list"} instead to construct a similar experience or as a replacement option.".html_safe,
  icon_name: "danger-filled",
} %>

<%= sage_component SageCardList, {} do %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All - The Children Call: Their Favorite Time Of Year",
      image: "card-placeholder-sm.png",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All – The Children Call: Their Favorite Time Of Year",
      icon: "mail",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "coupon", style: "left" },
        value: "1 Partridge In A Pear Tree",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
  <% 2.times do %>
    <%= sage_component SageCatalogItem, {
      title: "Fun For All – The Children Call: Their Favorite Time Of Year",
      href: "#"
    } do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "comment", style: "left" },
        value: "5 Golden Eggs",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "users", style: "left" },
        value: "3 Geese A-Laying",
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        small: true,
        icon: { name: "coupon", style: "left" },
        value: "1 Partridge In A Pear Tree",
      } %>
      <%= content_for :sage_aside do %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: sage_component(SageBadge, { color: "published", value: "Publish" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "info", value: "Drip" }),
            attributes: { "href": "#" },
          }, {
            value: sage_component(SageBadge, { color: "draft", value: "Draft" }),
            attributes: { "href": "#" },
          }, {
            value: "Delete Category",
            icon: "trash",
            style: "danger",
            attributes: { "href": "#" },
          }]
        } do %>
          <%= sage_component SageBadge, {
            color: "info",
            interactive_type: :dropdown,
            value: "Drip",
          } %>
        <% end %>
        <%= sage_component SageDropdown, {
          align: "right",
          items: [{
            value: "Edit Item",
            icon: "pen",
            attributes: {
              "href": "#",
            },
          }]
        } do %>
          <%= sage_component SageButton, {
            style: "secondary",
            icon: { name: "dot-menu-horizontal", style: "only" },
            value: "Edit",
            align: "end",
            subtle: true,
          } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>