; MaterialSB Example - Cards
; This example demonstrates how to create cards with content.

IncludeFile "MaterialSB.sbi"

EnableExplicit

Procedure ReadMore()
	Debug "User clicked on 'Read More'"
EndProcedure

Procedure Share()
	Debug "User clicked on 'Share'"
EndProcedure

Procedure Action()
	Debug "User clicked on 'Action'"
EndProcedure

Procedure Main(Result)
	UseModule MaterialSB
	
	SetDarkTheme(#False)
	
	; Navbar
	Navbar(#Navbar_Shadow1 | #Navbar_Container)
	NavbarAddLogo("Cards")
	
	; Create a container row
	Row(#Grid_Container)
	Col(12)
	Append("<h3>Card Component</h3>")
	CloseCurrentParent()
	
	; First column - Simple card
	Col(12, 6, 4)
	
	Card()
	CardImage("https://picsum.photos/400/300")
	CardContent()
	CardTitle("Simple Card")
	Append("<p>This is a simple card with an image, content, and action buttons.</p>")
	CloseCurrentParent()
	CardAction()
	Append(Link("Read More", @ReadMore()))
	Append(Link("Share", @Share()))
	CloseCurrentParent(3)
	
	; Second column - Panel card
	Col(12, 6, 4)
	
	; You don't need to use the helpers, all MaterialSB components support HTML.
	Card("<span class='card-title'>Panel Card</span>", #Card_Panel)
	AddClass(GetCurrentParent(), #Color_Teal + #Color_Lighten_4)
	Append("<p>Panel cards are simpler and don't have sections. Great for short messages or alerts.</p>")
	CloseCurrentParent(2)
	
	; Third column - Card with colored content
	Col(12, 6, 4)
	
	Card()
	AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_1)
	CardContent()
	AddClass(GetCurrentParent(), #Color_White + #Color_Text)
	CardTitle("Colored Card")
	Append("<p>Cards can be styled with MaterializeCSS color classes for visual emphasis.</p>")
	CloseCurrentParent()
	CardAction()
	AddClass(GetCurrentParent(), #Color_Blue + #Color_Darken_2)
	Append(Link("Action", @Action(), #Color_White))
	CloseCurrentParent(3)
	
	; Flags
	Col(12)
	Append("<h5>Card Flags</h5>")
	
	Protected t = Table("Flag", #Table_Striped | #Table_Highlight)
	TableAddColumn("Description", t)
	
	TableAddItem("#Card_Default" + Chr(10) + "Standard card with sections", t)
	TableAddItem("#Card_Panel" + Chr(10) + "Simple panel without structure", t)
	TableAddItem("#Card_Small" + Chr(10) + "Fixed small height", t)
	TableAddItem("#Card_Medium" + Chr(10) + "Fixed medium height", t)
	TableAddItem("#Card_Large" + Chr(10) + "Fixed large height", t)
	TableAddItem("#Card_Horizontal" + Chr(10) + "Horizontal layout", t)
	
	; Tips
	Col(12)
	Append("<br>")
	Card()
	AddClass(GetCurrentParent(), #Color_DeepPurple + #Color_Lighten_3)
	CardContent()
	CardTitle("<h5>Tips</h5>")
	Append("<ul> " +
	       "<li>Use CardContent() and CardAction() to structure your cards properly</li>" +
	       "<li>Panel cards (#Card_Panel) are great for simple messages without sections</li>" +
	       "<li>Apply color classes with AddClass() to customize card appearance</li>" +
		   "</ul>")
	CloseCurrentParent(2)
	
	Append("<br>")
	Append("<br>")
	
	CloseCurrentParent() ; Close the row
		
	AutoInit()
	
	UnuseModule MaterialSB
EndProcedure

MaterialSB::Download(@Main())
; IDE Options = SpiderBasic 3.10 (Windows - x86)
; CursorPosition = 86
; FirstLine = 30
; Folding = -
; iOSAppOrientation = 0
; AndroidAppCode = 0
; AndroidAppOrientation = 0
; EnableXP
; DPIAware
; CompileSourceDirectory