<%
sample_copy = md("
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi rhoncus mauris ut turpis gravida bibendum.
Donec feugiat accumsan velit et semper.
Ut elementum id leo ac fringilla.
")
%>

<%= sage_component SageAlert, {
  color: "warning",
  desc: "While this page depicts Panels within Cards, this is merely a consequence of our documentation structure and not a pattern that should be implemented elsewhere.",
  icon_name: "warning",
} %>

<h2>Overview</h2>

<p>Panels are rich containers that allow for grouping and organizing content details.</p>

<p>Example:</p>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, {
    title: "Panel Header",
    title_tag: "h3",
  } do %>
    <%= sage_component SageButton, {
      value: "More info",
      subtle: true,
      style: "secondary",
      icon: {
        name: "info-circle",
        style: "left"
      }
    } %>
    <%= content_for :sage_panel_header_subtext do %>
      <%= sample_copy.html_safe %>
    <% end %>
  <% end %>
  <%= sage_component SagePanelBlock, { type_block: true } do %>
    <%= sample_copy.html_safe %>
  <% end %>
  <%= sage_component SagePanelFooter, {} do %>
    <%= sage_component SageButton, { value: "Cancel", style: "secondary" } %>
    <%= sage_component SageButton, { value: "Save", style: "primary" } %>
  <% end %>
<% end %>

<p>All panels are made up of three basic building blocks: Header, Body, and Footer.</p>

<h2>Panel Building Blocks</h2>

<h3>Header</h3>

<p>This area usually contains at least a title and an icon or menu positioned in the right corner, both optional. An optional subtext element is useful for documenting the panel objective. It employs the Sage Row layout base with <code>24px</code> gutters.</p>

<h3>Body</h3>

There are a few options for the panel body container.

<h4>Panel Block</h4>

<p>A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set <code>type_block</code> to <code>true</code> to enforce open text spacing rules as established by the <code>sage-type</code> class.</p>

<h4>Panel Stack</h4>

<p>A stack is a single column of elements sitting atop each other with the standard 8px gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.</p>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelStack, {} do %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <%= sage_component SageIcon, { icon: "video-on" } %>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <%= sage_component SageIcon, { icon: "video-on" } %>
        <span>Morbi rhoncus mauris ut turpis gravida bibendum.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <%= sage_component SageIcon, { icon: "video-on" } %>
        <span>Donec feugiat accumsan velit et semper.</span>
      <% end %>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardRow, { grid_template: "et" } do %>
        <%= sage_component SageIcon, { icon: "video-on" } %>
        <span>Ut elementum id leo ac fringilla.</span>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h4>Panel List</h4>

<p>A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.</p>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelList, {} do %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "video-on" } %>
      <span class="t-sage-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "video-on" } %>
      <span class="t-sage-body">Morbi rhoncus mauris ut turpis gravida bibendum.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "video-on" } %>
      <span class="t-sage-body">Donec feugiat accumsan velit et semper.</span>
    <% end %>
    <%= sage_component SagePanelListItem, { grid_template: "et" } do %>
      <%= sage_component SageIcon, { icon: "video-on" } %>
      <span class="t-sage-body">Ut elementum id leo ac fringilla.</span>
    <% end %>
  <% end %>
<% end %>

<h3>Footer</h3>

<p>This area often contains one or more buttons that can be sent to the right edge of the panel with the <code>align_spread: true</code> component attribute. It employs the Sage Row layout base with <code>24px</code> gutters.</p>

<h3>Miscellaneous</h3>

<h4>Panel Row</h4>

<p>A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard Grid Template Patterns.</p>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelRow, { grid_template: "ete" } do %>
    <%= sage_component SageIcon, { icon: "check-circle", css_classes: "t-sage--color-sage" } %>
    <%= sage_component SagePanelBlock, {} do %>
      <p class="t-sage-body-semi">Lorem ipsum dolor sit amet</p>
      <p class="t-sage-body-small t-sage--color-grey">consectetur adipiscing elit</p>
    <% end %>
    <%= sage_component SageButton, {
      value: "Options",
      style: "secondary",
      subtle: true,
      icon: {
        name: "dot-menu-horizontal",
        style: "only"
      }
    } %>
  <% end %>
<% end %>

<h4>Panel Tiles</h4>

<p>Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.</p>

<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelTiles, { tiles_in_row: 3 } do %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Morbi rhoncus mauris ut turpis gravida bibendum.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Donec feugiat accumsan velit et semper.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Ut elementum id leo ac fringilla.</span>
    <% end %>
    <%= sage_component SageCard, {} do %>
      <%= sage_component SageCardFigure, {} do %>
        <%= image_tag("card-placeholder-sm.png", alt: "") %>
      <% end %>
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    <% end %>
  <% end %>
<% end %>

<h4>Panel Divider</h4>

<p>The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.</p>

<%= md("Dividers can also be set to extend to the panel edges with the `--full-bleed` modifier. They may also contain label text.", use_sage_type: true) %>
<%= sage_component SagePanel, {} do %>
  <%= sage_component SagePanelHeader, { title: "Divider:" } %>
  <%= sage_component SagePanelDivider, {} %>
  <%= sage_component SagePanelHeader, { title: "Divider (w/ label):" } %>
  <%= sage_component SagePanelDivider, { label: "Label text" } %>
  <%= sage_component SagePanelHeader, { title: "Divider (full bleed):" } %>
  <%= sage_component SagePanelDivider, { bleed: true } %>
<% end %>

<h4>Panel Figure</h4>

<p>A panel figure contains an image that occupies a substantive space in the panel, typically filling edge to edge. See the <a classs="sage-link" href="panel_figure">Panel Figure component</a>, for more details.</p>

<h5>Panel Figure Utility</h5>

<p>The <code>.sage-panel-grid`</code> utility class can be added onto containers in order to enforce the Panel's internal grid settings.This is helpful in cases where a container of some sort is needed around contents but those contents should still recieve the standard Panel-scoped gaps.</p>