@Override
protected void createBody(Body body)
{
    Tailwind.initialize(this);
}

Tailwind.setTailwindRootPath("/assets/tailwind");
Tailwind.setOorianTailwindJsPath("/assets/oorian");
Tailwind.setUseCdn(false);
Tailwind.initialize(this);

TwButton btn = new TwButton("Click Me");
btn.setColor(TwButton.COLOR_BLUE);
btn.setSize(TwButton.SIZE_MEDIUM);

body.addElement(btn);

TwFormGroup emailGroup = new TwFormGroup();
emailGroup.setLabel(new TwLabel("Email Address"));
emailGroup.setControl(
    new TwInput("you@example.com")
        .setInputType(TwInput.TYPE_EMAIL)
        .setName("email")
        .setRequired(true)
);
emailGroup.setHelpMessage("We'll never share your email.");

// Horizontal layout (label beside control)
emailGroup.setHorizontal(true);

TwInput password = new TwInput();
password.setInputType(TwInput.TYPE_PASSWORD)
        .setPlaceholder("Enter password")
        .setName("password")
        .setRequired(true)
        .setSize(TwInput.SIZE_LARGE);

// Show error state
password.setHasError(true); // Switches border to red

TwSelect select = new TwSelect();
select.setName("country");
select.addPlaceholder("Choose a country...");
select.addOption("United States", "us");
select.addOption("Canada", "ca");
select.addOption("Mexico", "mx", true); // Pre-selected

// Change selection programmatically
select.setSelectedValue("ca");

TwTextarea textarea = new TwTextarea("Enter your message...");
textarea.setRows(6)
        .setName("message")
        .setResizable(false)
        .setRequired(true);

// Checkbox with description
TwCheckbox terms = new TwCheckbox("Accept Terms");
terms.setName("terms")
     .setDescription("I agree to the terms and conditions.")
     .setRequired(true)
     .setColor("green");

// Radio buttons in a group
TwRadio small = new TwRadio("Small");
small.setName("size").setValue("sm").setChecked(true);

TwRadio medium = new TwRadio("Medium");
medium.setName("size").setValue("md");

TwToggle notifications = new TwToggle("Enable notifications");
notifications.setName("notifications")
             .setChecked(true)
             .setDescription("Receive email notifications for new messages.")
             .setColor("green")
             .setSize(TwToggle.SIZE_LARGE)
             .setLabelOnLeft(true);

TwLabel label = new TwLabel("Username", "username-input");
label.setRequired(true);   // Shows red asterisk
label.setHelpText("optional"); // Shows "(optional)" in gray

// Card with image, title, and body text
TwCard card = new TwCard("Featured Article", "A brief description of the article content.");
card.setImageUrl("/images/hero.jpg")
    .setImageAlt("Hero image")
    .setSubtitle("Published January 2026")
    .setShadow(TwCard.SHADOW_LG)
    .setBordered(true)
    .setHoverable(true);

// Card with custom header, body, and footer content
TwCard custom = new TwCard();
custom.setHeaderContent(headerElement);
custom.setBodyContent(bodyElement);
custom.setFooterContent(footerElement);

TwAlert success = new TwAlert("Record saved successfully!", TwAlert.TYPE_SUCCESS);
success.setDismissible(true);

TwAlert error = new TwAlert("Failed to load data.");
error.setType(TwAlert.TYPE_ERROR)
     .setIcon(errorIconElement);

TwBadge status = new TwBadge("Active", TwBadge.COLOR_GREEN);

TwBadge count = new TwBadge("12");
count.setPill(true)
     .setColor(TwBadge.COLOR_RED)
     .setSize(TwBadge.SIZE_SMALL);

TwBadge outline = new TwBadge("Draft");
outline.setOutline(true)
       .setColor(TwBadge.COLOR_INDIGO);

TwModal modal = new TwModal("Confirm Delete");
modal.setBody(confirmMessageElement);
modal.setFooter(buttonRowElement);
modal.setSize(TwModal.SIZE_SMALL);
modal.setCloseOnBackdropClick(false);

// Programmatically open/close
modal.setOpen(true);  // Removes "hidden" class
modal.setOpen(false); // Adds "hidden" class

TwProgress progress = new TwProgress(65);
progress.setColor("green")
        .setSize(TwProgress.SIZE_LARGE)
        .setShowLabel(true)   // Shows "65%"
        .setStriped(true)
        .setAnimated(true);

// Indeterminate loading bar
TwProgress loading = new TwProgress();
loading.setIndeterminate(true);

TwSpinner spinner = new TwSpinner("Loading data...");
spinner.setSize(TwSpinner.SIZE_LARGE)
       .setColor("indigo");

TwToast toast = new TwToast("Changes saved successfully!");
toast.setType(TwToast.TYPE_SUCCESS);
toast.setPosition(TwToast.POSITION_BOTTOM_RIGHT);
toast.setAutoDismissMs(3000); // 3 seconds
toast.setDismissible(true);

// Toast with action button
TwToast undo = new TwToast("Item deleted.");
undo.setType(TwToast.TYPE_WARNING);
undo.setAction("Undo", "/undo?id=42");

// Text skeleton
TwSkeleton line = new TwSkeleton();
line.setShape(TwSkeleton.SHAPE_TEXT); // Rounded, h-4
line.setWidth("full");

// Circle skeleton (avatar placeholder)
TwSkeleton avatar = new TwSkeleton("48px", "48px");
avatar.setShape(TwSkeleton.SHAPE_CIRCLE);

// Static skeleton (no animation)
TwSkeleton staticBox = new TwSkeleton("200px", "100px");
staticBox.setAnimate(false);

@Page("/login")
public class LoginPage extends HtmlPage
{
    @Override
    protected void createHead(Head head)
    {
        head.setTitle("Login");
        Tailwind.addAllResources(head);
    }

    @Override
    protected void createBody(Body body)
    {
        TwContainer container = new TwContainer();
        container.setMaxWidth(TwContainer.SIZE_SM);

        TwCard card = new TwCard();
        card.setCardTitle("Sign In");
        card.setShadow(TwCard.SHADOW_LG);

        // Email field
        TwFormGroup emailGroup = new TwFormGroup();
        emailGroup.setLabel(new TwLabel("Email"));
        emailGroup.setControl(
            new TwInput("you@example.com")
                .setInputType(TwInput.TYPE_EMAIL)
                .setName("email")
                .setRequired(true)
        );

        // Password field
        TwFormGroup passGroup = new TwFormGroup();
        passGroup.setLabel(new TwLabel("Password"));
        passGroup.setControl(
            new TwInput()
                .setInputType(TwInput.TYPE_PASSWORD)
                .setName("password")
                .setRequired(true)
        );

        // Remember me toggle
        TwToggle remember = new TwToggle("Remember me");
        remember.setName("remember");

        // Submit button
        TwButton loginBtn = new TwButton("Sign In");
        loginBtn.setFullWidth(true)
                .setButtonType("submit")
                .setSize(TwButton.SIZE_LARGE);

        // Assemble the body content
        Div formContent = new Div();
        formContent.addElement(emailGroup);
        formContent.addElement(passGroup);
        formContent.addElement(remember);
        formContent.addElement(new TwSpacer(TwSpacer.SIZE_MD));
        formContent.addElement(loginBtn);
        card.setBodyContent(formContent);

        container.addElement(new TwSpacer(TwSpacer.SIZE_2XL));
        container.addElement(card);
        body.addElement(container);
    }
}

// Responsive card grid for a dashboard
TwGrid grid = new TwGrid();
grid.setCols(1).setSmCols(2).setLgCols(4).setGap("6");

String[] titles = {"Users", "Revenue", "Orders", "Growth"};
String[] values = {"12,450", "$84,200", "1,024", "+12.5%"};

for (int i = 0; i < titles.length; i++)
{
    TwCard card = new TwCard(titles[i], values[i]);
    card.setShadow(TwCard.SHADOW_SM);
    card.setHoverable(true);
    grid.addElement(card);
}

body.addElement(grid);

TwButtonGroup toolbar = new TwButtonGroup();
toolbar.addButton(new TwIconButton(TwIconButton.ICON_EDIT)
    .setAriaLabel("Edit").setVariant(TwIconButton.VARIANT_GHOST));
toolbar.addButton(new TwIconButton(TwIconButton.ICON_DOWNLOAD)
    .setAriaLabel("Download").setVariant(TwIconButton.VARIANT_GHOST));
toolbar.addButton(new TwIconButton(TwIconButton.ICON_DELETE)
    .setAriaLabel("Delete").setVariant(TwIconButton.VARIANT_DANGER));