<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as a Panel list</h3>
<%= sage_component SagePanelList, {} do %>
  <%= sage_component SageSortable, { resource_name: "link" } do %>

    <% 3.times do %>
      <%= sage_component SageSortableItem, {
        title: "Tristique Elit Bibendum Etiam Cursus",
        subtitle: "Label Text",
        url_update: "update/endpoint",
        id: "id"
      } do %>
        <%= sage_component SageStatusIcon, {
          icon: "lock",
          value: "Authenticated Only"
        } %>
        <%= sage_component SageButton, {
          attributes: {
            "data-js-tooltip": "Preview"
          },
          style: "secondary",
          subtle: true,
          icon: { name: "preview-on", style: "only" },
          value: "Preview"
        } %>
        <%= sage_component SageButton, {
          attributes: {
            "data-js-tooltip": "Edit",
          },
          style: "secondary",
          subtle: true,
          icon: { name: "pen", style: "only" },
          value: "Edit"
        } %>
      <% end %>
    <% end %>

    <%= sage_component_section :empty do %>
      <%= sage_component SageEmptyState, {
        title: "Empty State Title",
        text: "Empty state text",
      } %>
    <% end %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as cards with no subtitles</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItem, {
      title: "Fringilla Ullamcorper Dolor Adipiscing Ultricies",
      url_update: "update/endpoint",
      id: "id",
      card: true
    } do %>
      <%= sage_component SageStatusIcon, {
        icon: "lock",
        value: "Authenticated Only",
      } %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Preview"
        },
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "only" },
        value: "Preview"
      } %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Edit",
        },
        style: "secondary",
        subtle: true,
        icon: { name: "pen", style: "only" },
        value: "Edit"
      } %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItem</code> as cards with images and without subtitles</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItem, {
      title: "Fringilla Ullamcorper Dolor Adipiscing Ultricies",
      url_update: "update/endpoint",
      image: "card-placeholder-sm.png",
      id: "id",
      card: true
    } do %>
      <%= sage_component SageButton, {
        attributes: {
          "data-js-tooltip": "Preview"
        },
        style: "secondary",
        subtle: true,
        icon: { name: "preview-on", style: "only" },
        value: "Preview"
      } %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>


<%= md('
`SageSortableItemCustom` should be used when you want to create a layout within the Sortable Item that follows any pattern using specified dot and dash pattern denoted in the [Sage Grid Templates](../patterns/grid_templates) docs. At its simpliest form, `SageSortableItemCustom` is `SageSortableItem` as cards with no image or subtitles, but any combination Sage Grid Template.
', use_sage_type: true) %>

<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "te"</code> as a Panel List</h3>
<%= sage_component SageSortable, { resource_name: "link" } do %>
  <% 3.times do |i| %>
    <%= sage_component SageSortableItemCustom, {
      grid_template: "te",
      id: "id",
      url_update: "update/endpoint",
    } do %>
      <div>
        <%= sage_component SageCheckbox, {
          id: "c#{i + 1}",
          label_text: "Checked",
          checked: true,
          disabled: false,
          has_error: false
        } %>
      </div>
      <%= sage_component SageDropdown, {
        align: "right",
        items: [
          {
            value: "Edit",
            icon: "pen",
            attributes: {},
          },
          {
            value: "Preview",
            icon: "preview-on",
            attributes: {},
          },
          {
            value: "Delete",
            style: "danger",
            border_before: true,
            modifiers: ["border-before"],
            icon: "trash",
            attributes: {},
          },
        ]
      } do %>
        <%= sage_component SageButton,  {
          style: "secondary",
          subtle: true,
          icon: { name: "dot-menu-horizontal", style: "only" },
          value: "edit",
        } %>
      <% end %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>

<h3 class="t-sage-heading-6"><code>SageSortableItemCustom</code> using a custom <code>grid template : "me"</code>as cards</h3>
<%= sage_component SageSortable, {
  resource_name: "link" } do %>
  <% 3.times do %>
    <%= sage_component SageSortableItemCustom, {
      card: true,
      grid_template: "me",
      id: "id",
      url_update: "update/endpoint",
    } do %>
      <div>
        <%= sage_component SageLink, { label: "Field 1", truncate: true, url: "#" } %>
      </div>
      <span>Field 2</span>
      <%= sage_component SageDropdown, {
        align: "right",
        items: [
          {
            value: "Edit",
            icon: "pen",
            attributes: {},
          },
          {
            value: "Preview",
            icon: "preview-on",
            attributes: {},
          },
          {
            value: "Delete",
            style: "danger",
            border_before: true,
            modifiers: ["border-before"],
            icon: "trash",
            attributes: {},
          },
        ]
      } do %>
        <%= sage_component SageButton,  {
          style: "secondary",
          subtle: true,
          icon: { name: "dot-menu-horizontal", style: "only" },
          value: "edit",
        } %>
      <% end %>
    <% end %>
  <% end %>

  <%= sage_component_section :empty do %>
    <%= sage_component SageEmptyState, {
      title: "Empty State Title",
      text: "Empty state text",
    } %>
  <% end %>
<% end %>