def picsum_img(seed): return Img(src=f'https://picsum.photos/300/200?random={seed}')
   
Grid(*[Card(picsum_img(i),P(f"Image {i}")) for i in range(6)])

def StatCard(title, value, color='primary'):
    "A card with a statistics.  Since there is no row/col span class it will take up 1 slot"
    return Card(P(title, cls=TextPresets.muted_sm), H3(value, cls=f'text-{color}'),)

stats = [StatCard(*data) for data in [
                ("Total Users", "1,234",   "blue-600"),
                ("Active Now",  "342",     "green-600"),
                ("Revenue",     "$45,678", "purple-600"),
                ("Conversion",  "2.4%",    "amber-600")]]

def ChartCard(title): 
    "A card for a chart.  col-span-2 means it will take up 2 columns"
    return Div(cls="col-span-2")( 
        Card(H3(title),Div("Chart Goes Here", cls="h-64 uk-background-muted")))
chart_cards = [ChartCard(title) for title in ("Monthly Revenue", "User Growth")]


sidebar = Form(
    H3("SideBar"),
    LabelRange("Range For Filters", min=0, max=100),
    LabelInput("A search Bar"),
    LabelSelect(map(Option, ["Product Line A", "Product Line B", "Product Line C", "Product Line D"]),
                     label="Choose Product Line"),
    LabelCheckboxX("Include Inactive Users"),
    LabelCheckboxX("Include Users without order"),
    LabelCheckboxX("Include Users without email"),
    # This sidebar will take up 2 rows b/c of row-span-2
    cls='row-span-2 space-y-5'
)

Container(Grid(sidebar, *stats, *chart_cards, cols=5))

def InputGroup(label, placeholder='', button_text='Submit', cls=''):
    # Div H Stacked makes the label and input show up on the same row instead of putting the input on a newline
    return DivHStacked(
        FormLabel(label, cls='whitespace-nowrap'),
        Input(placeholder=placeholder))

Container(
    H3("Form with Input Groups"),
    Form(cls='space-y-4')(
        InputGroup("Search Users", "Enter username..."),
        InputGroup("Filter Tags", "Add tags...", "Add"),
        InputGroup("Email List", "Enter email...", "Subscribe"),
        Div(*(  Button(UkIcon(icon, cls='mr-2'), text) for icon, text in [("rocket", "Submit"), ("circle-x", "Cancel")]), cls='space-x-4')))

# DivHStacked makes the a single row so text is to on same line as avatar
DivHStacked(
    DiceBearAvatar("user"), 
    # DivVStacked stacks things vertically together and centers it with flex
    DivVStacked(
        P("John Doe", cls=TextT.lg),
        P("[email protected]", cls=TextT.muted), 
        P("+1-123-456-7890"), cls=TextT.muted))

features = [
    "Unlimited users",
    "24/7 priority support",
    "Custom branding options", 
    "Advanced analytics dashboard",
    "Full API access",
    "Priority request queue"
]


def PricingCard(plan, price, features):
    "Create a polished pricing card with consistent styling"
    return Card(
        DivVStacked( # Center and veritcally stack the plan name and price
            H2(plan),
            H3(price, cls='text-primary'),
            P('per month',cls=TextT.muted),
            cls='space-y-1'),
        # DivHStacked makes green check and feature Li show up on same row instead of newline
        Ul(*[DivHStacked(UkIcon('check', cls='text-green-500 mr-2'), Li(feature)) for feature in features], 
           cls='space-y-4'),
        Button("Subscribe Now", cls=(ButtonT.primary, 'w-full')))

DivVStacked(PricingCard("Pro Plan", "$99", features))

def FooterLinkGroup(title, links):
    # DivVStacked centers and makes title and each link stack vertically
    return DivVStacked(
        H4(title),
        *[A(text, href=f"#{text.lower().replace(' ', '-')}", cls=TextT.muted)  for text in links])

company = ["About", "Blog", "Careers", "Press Kit"]
resource = ["Documentation", "Help Center", "Status", "Contact Sales"]
legal = ["Terms of Service", "Privacy Policy", "Cookie Settings", "Accessibility"]

Container(cls='uk-background-muted py-12')(Div(
    # Company Name and social icons will be on the same row with as much sapce between as possible
    DivFullySpaced( 
        H3("Company Name"),
        # DivHStacked makes the icons be on the same row in a group
        DivHStacked(*[UkIcon(icon, cls=TextT.lead) for icon in 
                      ['twitter', 'facebook', 'github', 'linkedin']])),
    DividerLine(),
    DivFullySpaced( # Each child will be spread out as much as possible based on number of children
        FooterLinkGroup("Company",   company),
        FooterLinkGroup("Resources", resource),
        FooterLinkGroup("Legal",     legal)), 
    DividerLine(),
    P("© 2024 Company Name. All rights reserved.", cls=TextT.lead+TextT.sm),
    cls='space-y-8 p-8'))

def StatsCard(label, value, change):
    color = 'green' if change[0] == '+' else 'red'
    return Card(DivVStacked( # Stacks vertically and centers all elements
        P(label, cls=TextPresets.muted_sm),
        H3(value),
        P(f"{change}% from last month", cls=f"text-{color}-600 text-sm")))
    
def RecentActivity(user, action, time):
    return DivHStacked( # Makes Avatar and text be on same row
        DiceBearAvatar(user, h=8, w=8),
        P(f"{user} {action}", cls="flex-1"),
        P(time, cls=TextPresets.muted_sm))
    
DivVStacked( # Centers the entire dashboard layout
    # Page header
    DivVStacked( # Stacks vertically and centers the title/subtitle
        H2("Welcome back, Isaac!"),
        P("Here's what's happening with your projects today.",cls=TextT.muted)),

    # DivHStacked puts all the stats cards on the same row
    DivHStacked(*(StatsCard(label, value, change)
        for label, value, change in [
            ("Total Projects", "12", "+2.5"),
            ("Hours Logged", "164", "+12.3"),
            ("Tasks Complete", "64%", "-4.1"),
            ("Team Velocity", "23", "+8.4")]
    )),

    # Recent activity
    Card(*(RecentActivity(user, action, time) 
        for user, action, time in [
            ("Sarah Chen", "completed Project Alpha deployment", "2h ago"),
            ("James Wilson", "commented on Project Beta", "4h ago"),
            ("Maria Garcia", "uploaded new design files", "6h ago"),
            ("Alex Kumar", "started Sprint Planning", "8h ago")]),
        header=H3("Recent Activity"),
    ),
    cls="space-y-6"
)

Container(
    H1("Lorem Ipsum", cls="text-center mb-8"),

    # Use 2 columns for the main content
    Div(cls="columns-2 gap-12")(
        P("""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
        ex ea commodo consequat."""),

        DivCentered(cls='mt-8')(
            P("""Duis aute irure dolor in reprehenderit in voluptate velit esse 
            cillum dolore eu fugiat nulla pariatur.""", 
                   cls=(TextT.lg, TextT.bold, TextT.center, TextT.italic, "text-primary"))),

        P("""Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde 
        omnis iste natus error sit voluptatem accusantium doloremque laudantium."""),

        P("""Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit 
        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem 
        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.""")))