@page
@model LoginModel

<noundry-card title="Sign In" class="max-w-md mx-auto">
    <form method="post">
        <noundry-text-input
            asp-for="Email"
            label="Email"
            type="email"
            placeholder="you@example.com"
            required="true" />

        <noundry-text-input
            asp-for="Password"
            label="Password"
            type="password"
            required="true" />

        <noundry-checkbox
            asp-for="RememberMe"
            label="Remember me" />

        <noundry-button
            type="submit"
            variant="primary"
            size="lg"
            class="w-full">
            Sign In
        </noundry-button>
    </form>
</noundry-card>

@page
@model ContactModel

<noundry-card title="Get In Touch" class="max-w-xl mx-auto">
    <form method="post">
        <div class="grid md:grid-cols-2 gap-4">
            <noundry-text-input
                asp-for="FirstName"
                label="First Name"
                required="true" />

            <noundry-text-input
                asp-for="LastName"
                label="Last Name"
                required="true" />
        </div>

        <noundry-text-input
            asp-for="Email"
            type="email"
            label="Email"
            required="true" />

        <noundry-textarea
            asp-for="Message"
            label="Message"
            rows="4"
            required="true" />

        <noundry-button
            type="submit"
            variant="primary">
            Send Message
        </noundry-button>
    </form>
</noundry-card>

@page
@model RegisterModel

<noundry-card title="Create Account" class="max-w-md mx-auto">
    <form method="post">
        <noundry-text-input
            asp-for="Name"
            label="Full Name"
            required="true" />

        <noundry-text-input
            asp-for="Email"
            type="email"
            label="Email"
            required="true" />

        <noundry-text-input
            asp-for="Password"
            type="password"
            label="Password"
            required="true" />

        <noundry-text-input
            asp-for="ConfirmPassword"
            type="password"
            label="Confirm Password"
            required="true" />

        <noundry-checkbox
            asp-for="AcceptTerms"
            label="I agree to Terms & Conditions"
            required="true" />

        <noundry-button
            type="submit"
            variant="primary"
            class="w-full">
            Create Account
        </noundry-button>
    </form>
</noundry-card>

<form method="get" class="flex gap-2">
    <div class="flex-1">
        <noundry-text-input
            asp-for="SearchTerm"
            placeholder="Search products..."
            icon="search" />
    </div>

    <noundry-select
        asp-for="Category"
        options="@Model.Categories"
        placeholder="All Categories" />

    <noundry-button
        type="submit"
        variant="primary">
        Search
    </noundry-button>
</form>

<section class="bg-gradient-to-br from-blue-500 to-purple-600 py-20">
    <div class="max-w-4xl mx-auto px-4 text-center text-white">
        <h1 class="text-5xl font-bold mb-6">
            Build Amazing Apps
        </h1>
        <p class="text-xl mb-8 opacity-90">
            Create production-ready .NET applications
        </p>
        <div class="flex gap-4 justify-center">
            <noundry-button
                href="/start"
                bg-color="white"
                text-color="blue-600"
                size="lg">
                Get Started
            </noundry-button>

            <noundry-button
                href="/docs"
                variant="outline"
                size="lg">
                Learn More
            </noundry-button>
        </div>
    </div>
</section>

<noundry-data-table
    items="@Model.Users"
    sortable="true"
    paginated="true">

    <noundry-table-column
        field="Name"
        header="Name"
        sortable="true" />

    <noundry-table-column
        field="Email"
        header="Email" />

    <noundry-table-column
        field="Role"
        header="Role">
        <template>
            <noundry-badge
                text="@item.Role"
                variant="@(item.IsAdmin ? "success" : "default")" />
        </template>
    </noundry-table-column>

    <noundry-table-column header="Actions">
        <template>
            <noundry-button
                size="sm"
                variant="link"
                href="@Url.Action("Edit", new { id = item.Id })">
                Edit
            </noundry-button>
            <noundry-button
                size="sm"
                variant="link"
                color="danger"
                confirm="Delete user?"
                asp-action="Delete"
                asp-route-id="@item.Id">
                Delete
            </noundry-button>
        </template>
    </noundry-table-column>
</noundry-data-table>

<div class="grid md:grid-cols-3 gap-6">
    @foreach(var plan in Model.Plans)
    {
        <noundry-card
            class="text-center @(plan.Featured ? "featured" : "")">
            <h3 class="text-xl font-bold mb-2">@plan.Name</h3>
            <div class="text-4xl font-bold mb-4">
                $@plan.Price<span class="text-lg">/mo</span>
            </div>
            <ul class="space-y-2 mb-6 text-sm">
                @foreach(var feature in plan.Features)
                {
                    <li>@feature</li>
                }
            </ul>
            <noundry-button
                class="w-full"
                variant="@(plan.Featured ? "primary" : "secondary")"
                href="@Url.Action("Subscribe", new { id = plan.Id })">
                Choose Plan
            </noundry-button>
        </noundry-card>
    }
</div>

<noundry-modal
    id="confirmModal"
    title="Confirm Action"
    size="md">

    <p>Are you sure you want to delete this item?</p>

    <noundry-modal-footer>
        <noundry-button
            variant="secondary"
            data-modal-close>
            Cancel
        </noundry-button>

        <noundry-button
            variant="danger"
            asp-action="Delete"
            asp-route-id="@Model.Id">
            Delete
        </noundry-button>
    </noundry-modal-footer>
</noundry-modal>

<!-- Trigger Button -->
<noundry-button data-modal-target="confirmModal">
    Open Modal
</noundry-button>

<!-- Success Alert -->
<noundry-alert
    variant="success"
    icon="check-circle"
    dismissible="true">
    Success! Your changes have been saved.
</noundry-alert>

<!-- Error Alert -->
<noundry-alert
    variant="danger"
    icon="x-circle"
    dismissible="true">
    Error! Something went wrong.
</noundry-alert>

<!-- Warning Alert -->
<noundry-alert
    variant="warning"
    icon="exclamation"
    dismissible="true">
    Warning! Please review your input.
</noundry-alert>

<!-- Info Alert -->
<noundry-alert
    variant="info"
    icon="information-circle"
    dismissible="true">
    Info: New features are available.
</noundry-alert>

<noundry-navbar brand="My App" sticky="true">
    <noundry-nav-items>
        <noundry-nav-link
            asp-page="/Index"
            active-class="active">
            Home
        </noundry-nav-link>

        <noundry-nav-dropdown title="Products">
            <noundry-dropdown-item asp-page="/Products/All">
                All Products
            </noundry-dropdown-item>
            <noundry-dropdown-item asp-page="/Products/New">
                New Arrivals
            </noundry-dropdown-item>
            <noundry-dropdown-divider />
            <noundry-dropdown-item asp-page="/Products/Sale">
                Sale
            </noundry-dropdown-item>
        </noundry-nav-dropdown>

        <noundry-nav-link asp-page="/About">
            About
        </noundry-nav-link>

        <noundry-nav-link asp-page="/Contact">
            Contact
        </noundry-nav-link>
    </noundry-nav-items>

    <noundry-nav-actions>
        @if (User.Identity.IsAuthenticated)
        {
            <noundry-button
                asp-page="/Account/Logout"
                variant="outline"
                size="sm">
                Logout
            </noundry-button>
        }
        else
        {
            <noundry-button
                asp-page="/Account/Login"
                variant="primary"
                size="sm">
                Login
            </noundry-button>
        }
    </noundry-nav-actions>
</noundry-navbar>

<div class="grid md:grid-cols-2 gap-6">
    @foreach(var feature in Model.Features)
    {
        <noundry-card>
            <div class="w-12 h-12 bg-@feature.Color-100 rounded-lg flex items-center justify-center mb-4">
                <span class="text-2xl">@feature.Icon</span>
            </div>
            <h3 class="text-lg font-bold mb-2">@feature.Title</h3>
            <p class="text-sm text-gray-600">@feature.Description</p>
        </noundry-card>
    }
</div>

<div class="grid md:grid-cols-3 gap-6">
    @foreach(var post in Model.Posts)
    {
        <noundry-card class="overflow-hidden">
            <img src="@post.ImageUrl" alt="@post.Title" class="w-full h-48 object-cover" />

            <div class="p-6">
                <noundry-badge text="@post.Category" variant="primary" />

                <h3 class="text-lg font-bold mt-2 mb-2">
                    @post.Title
                </h3>

                <p class="text-sm text-gray-600 mb-4">
                    @post.Excerpt
                </p>

                <noundry-button
                    href="@Url.Action("Details", new { id = post.Id })"
                    variant="link"
                    size="sm">
                    Read More →
                </noundry-button>
            </div>
        </noundry-card>
    }
</div>

<div class="grid md:grid-cols-4 gap-6">
    @foreach(var member in Model.TeamMembers)
    {
        <noundry-card class="text-center">
            <img
                src="@member.PhotoUrl"
                alt="@member.Name"
                class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" />

            <h3 class="text-lg font-bold">@member.Name</h3>
            <p class="text-sm text-gray-600 mb-4">@member.Title</p>

            <div class="flex justify-center gap-3">
                @if (!string.IsNullOrEmpty(member.TwitterUrl))
                {
                    <a href="@member.TwitterUrl" class="text-gray-600 hover:text-blue-600">
                        <i class="fab fa-twitter"></i>
                    </a>
                }
                @if (!string.IsNullOrEmpty(member.LinkedInUrl))
                {
                    <a href="@member.LinkedInUrl" class="text-gray-600 hover:text-blue-600">
                        <i class="fab fa-linkedin"></i>
                    </a>
                }
            </div>
        </noundry-card>
    }
</div>

<noundry-timeline>
    @foreach(var milestone in Model.Milestones)
    {
        <noundry-timeline-item
            number="@milestone.Order"
            title="@milestone.Title"
            date="@milestone.Date.ToString("MMMM yyyy")"
            variant="@(milestone.IsCompleted ? "success" : "primary")">
            @milestone.Description
        </noundry-timeline-item>
    }
</noundry-timeline>

<noundry-accordion>
    @foreach(var faq in Model.FAQs)
    {
        <noundry-accordion-item
            title="@faq.Question"
            id="faq-@faq.Id"
            expanded="@(faq.Id == 1)">
            @faq.Answer
        </noundry-accordion-item>
    }
</noundry-accordion>

<noundry-card>
    <noundry-card-header>
        <h3 class="text-xl font-bold">Card Title</h3>
    </noundry-card-header>

    <noundry-card-body>
        <p>This is the card content.</p>
    </noundry-card-body>

    <noundry-card-footer>
        <noundry-button variant="link">
            Learn More
        </noundry-button>
    </noundry-card-footer>
</noundry-card>

<noundry-profile-card
    user="@Model.User"
    show-stats="true"
    cover-image="@Model.User.CoverImageUrl">

    <noundry-profile-stats>
        <noundry-stat label="Posts" value="@Model.User.PostCount" />
        <noundry-stat label="Followers" value="@Model.User.FollowerCount" />
        <noundry-stat label="Following" value="@Model.User.FollowingCount" />
    </noundry-profile-stats>

    <noundry-profile-actions>
        <noundry-button
            asp-action="Follow"
            asp-route-id="@Model.User.Id"
            variant="primary"
            class="w-full">
            Follow
        </noundry-button>
    </noundry-profile-actions>
</noundry-profile-card>

<noundry-product-card product="@Model.Product">
    <noundry-product-image src="@Model.Product.ImageUrl" alt="@Model.Product.Name" />

    <noundry-product-header>
        <h3 class="text-lg font-bold">@Model.Product.Name</h3>
        <noundry-badge
            text="@(Model.Product.InStock ? "In Stock" : "Out of Stock")"
            variant="@(Model.Product.InStock ? "success" : "danger")" />
    </noundry-product-header>

    <noundry-product-description>
        @Model.Product.Description
    </noundry-product-description>

    <noundry-product-footer>
        <div class="flex justify-between items-center mb-4">
            <div class="text-2xl font-bold">
                $@Model.Product.Price.ToString("F2")
            </div>
            <noundry-rating
                value="@Model.Product.AverageRating"
                count="@Model.Product.ReviewCount" />
        </div>

        <noundry-button
            asp-action="AddToCart"
            asp-route-id="@Model.Product.Id"
            variant="primary"
            class="w-full">
            Add to Cart
        </noundry-button>
    </noundry-product-footer>
</noundry-product-card>