<h4 class="mb-3">1. Standard Text Input</h4>

<p>A basic text input field with a floating label</p>
<P11Input TValue="string"
          @bind-Value="textValue"
          Label="Name"
          UseFloatingLabel="true" 
          Description="Put text" />

<hr />

<p>Display error message (e.g. wrong user input)</p>
<P11Input TValue="string"
          @bind-Value="textValue2"
          Label="Name"
          UseFloatingLabel="true"
          DisplayErrorMessage="* Username is required" />

<hr />

<p>A basic text input field with a label and a descriptive text.</p>
<P11Input Label="Your Name"
          @bind-Value="textValue3"
          Description="Please enter your full name."
          InputType="text" />

<hr />

<p>A basic text input field with a label, descriptive text and user error message.</p>
<P11Input Label="Your Name"
          @bind-Value="textValue4"
          Description="Please enter your full name."
          InputType="text"
          DisplayErrorMessage="* Your full name is required" />

<br />
<p>Current Value 1: "@textValue"</p>
<p>Current Value 2: "@textValue2"</p>
<p>Current Value 3: "@textValue3"</p>
<p>Current Value 4: "@textValue4"</p>

<h4 class="mb-3">2. Explicit Value Change Logging</h4>
<p>This example demonstrates how to explicitly log value changes using the <code>OnChange</code> event. The log below will update when you finish typing and leave the input field.</p>
<P11Input Label="Log Value Changes"
          @bind-Value="loggedTextValue"
          Description="Type something and then click outside the input field."
          InputType="text"
          OnChange="@((e) => LogEventInput($"Value changed to: '{e.Value}'"))" />
<p>Current Logged Value: "@loggedTextValue"</p>

<hr />

<h4 class="mb-3">2.1 Check when the key is pressed if Enter, Tab, Escape etc...</h4>
<p>This example demonstrates how to hanlde if key is pressed using the <code>OnKeyDown</code> event. The log below will update when you press Enter, Tab etc...</p>
<P11Input Label="Log Value Changes"
          @bind-Value="loggedTextValueKey"
          Description="Type something and then click outside the input field."
          InputType="text"
          OnKeyDown="HandleOnKeyDown" />
<p>Current Logged Value: "@loggedTextValueKey"</p>

@* Event Log *@
<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">Event Log</h4>
    <p>This log displays events triggered by the input components, such as focus, blur, and explicit value changes.</p>
    <div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
        @foreach (var logEntry in eventLogInput)
        {
            <div>@logEntry</div>
        }
    </div>
</div>

<h4 class="mb-3">3. Numeric Input (Integer)</h4>
<p>Input field for integer values. Uses <code>CultureInfo.InvariantCulture</code> for consistent parsing.</p>
<P11Input Label="Age"
          @bind-Value="intValue"
          Description="Enter your age as a whole number."
          InputType="number"
          Culture="@CultureInfo.InvariantCulture" /> @* Using InvariantCulture for consistent number parsing *@
<p>Current Value: @(intValue.HasValue? intValue.ToString() : "null")</p>

<h4 class="mb-3">4. Numeric Input (Decimal / Double)</h4>
<p>Input field for decimal values. Demonstrates culture-specific formatting (e.g., comma as decimal separator for German culture).</p>
<P11Input Label="Price"
          @bind-Value="decimalValue"
          Description="Enter a price with decimal places (e.g., 12.34 or 12,34 depending on culture)."
          InputType="text"
          Culture="@germanCulture" />
<p>Current Value: @(decimalValue.HasValue? decimalValue.Value.ToString(germanCulture) : "null")</p>

<EditForm Model="@myTestModel">
    <DataAnnotationsValidator /> @* Wichtig: Aktiviert die Validierung basierend auf DataAnnotations *@
    <p>Input field for decimal values. Demonstrates culture-specific formatting (e.g., comma as decimal separator for German culture) and validation.</p>
    <P11Input Label="Price"
              @bind-Value="myTestModel.TestDecimalValue"
              Description="Enter a price with decimal places (e.g., 12.34 or 12,34 depending on culture)."
              InputType="text"
              Culture="@germanCulture"
              ValidationFor="@(() => myTestModel.TestDecimalValue)" /> @* HIER wird auf die Eigenschaft des Modells verwiesen *@
    <ValidationMessage For="@(() => myTestModel.TestDecimalValue)" /> @* Zeigt den spezifischen Fehler für dieses Feld an *@
    <p>Current Value: @(myTestModel.TestDecimalValue.ToString(germanCulture))</p>
</EditForm>

<h4 class="mb-3">5. Email Input</h4>
<p>Input field specifically for email addresses, leveraging the browser's native email validation where available.</p>
<P11Input Label="E-Mail"
          @bind-Value="emailValue"
          Description="Your email address."
          InputType="email" />
<p>Current Value: "@emailValue"</p>

<h4 class="mb-3">6. Password Input</h4>
<p>Input field for sensitive information like passwords. Characters are masked.</p>
<P11Input Label="Password"
          @bind-Value="passwordValue"
          Description="Minimum 8 characters."
          InputType="password" />
<p>Current Value (not displayed for security reasons): [*****]</p>

<h4 class="mb-3">7. Input with Additional Attributes & Custom Class</h4>
<p>Demonstrates passing arbitrary HTML attributes (like <code>placeholder</code>, <code>maxlength</code>, <code>class</code>) directly to the underlying <code>&lt;input&gt;</code> element, and applying a custom CSS class to the component's root <code>div</code>.</p>
<P11Input Label="Focus me (with Placeholder)"
          @bind-Value="focusedValue"
          placeholder="Enter something here..."
          maxlength="20"
          CssClass="my-custom-input-group"
          class="bg-light border-success"
          OnFocus="@(() => LogEventInput("Input got focus!"))"
          OnBlur="@(() => LogEventInput("Input lost focus!"))" />
<p>Current Value: "@focusedValue"</p>

@* Event Log *@
<div class="bg-light p-4 rounded mb-4">
    <h4 class="mb-3">Event Log</h4>
    <p>This log displays events triggered by the input components, such as focus, blur, and explicit value changes.</p>
    <div class="border p-2" style="height: 150px; overflow-y: scroll; background-color: #f8f9fa;">
        @foreach (var logEntry in eventLogInput)
        {
            <div>@logEntry</div>
        }
    </div>
</div>

<h4 class="mb-3">8. Input without Label (Accessibility Warning)</h4>
<p>This example intentionally omits the <code>Label</code> parameter. In development mode, this should trigger an accessibility warning on the UI, highlighting the importance of labels for screen readers.</p>
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle me-2"></i>
    Expected behavior: In development mode, a warning about missing label should appear below the input.
</div>
<P11Input @bind-Value="noLabelValue"
          Description="This description has no associated label!" />
<p>Current Value: "@noLabelValue"</p>

<br />
<br />

<p>An input field for a 16-bit integer value (should trigger AOT warning).</p>
<P11Input Label="Short Value"
          @bind-Value="shortValue"
          Description="Please enter a short integer."
          InputType="number"
          ShowDevelopmentErrors="true" /> @* Important: Set ShowDevelopmentErrors to true *@
<p class="mt-2">Current value: "@shortValue"</p>
<p class="text-muted">Type of the bound value: @(shortValue.GetType().Name ?? "null")</p>

<h4 class="mb-3">9. InputType 'number' with TValue 'string' (Configuration Warning)</h4>
<p>This example intentionally uses <code>InputType="number"</code> with a <code>string</code> TValue. In development mode, this should trigger a configuration warning on the UI, as it's generally not recommended for proper numeric input handling.</p>
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle me-2"></i>
    Expected behavior: In development mode, a warning about mismatched InputType and TValue should appear below the input.
</div>
<P11Input Label="Text as Number (Warning)"
          @bind-Value="stringAsNumberValue"
          InputType="number"
          Description="A warning should appear here, as TValue is String, but InputType is 'number'." />
<p>Current Value: "@stringAsNumberValue"</p>

<h4 class="mb-3">10. Date Input (using DateTime)</h4>
<p>Input field for date selection, using <code>DateTime?</code> as the bound value type.</p>
<P11Input Label="Date of Birth"
          @bind-Value="dateValue"
          InputType="date"
          Culture="@CultureInfo.InvariantCulture"
          Description="Select your date of birth. (Format: YYYY-MM-DD)" />
<p>Current Value: @(dateValue.HasValue? dateValue.Value.ToShortDateString() : "null")</p>

@page "/[YOUR-PAGE]"
@page "/[YOUR-PAGE]/{MyMinimalApiMessage}"

<h4 class="mb-3">11. Input with Additional Attributes 'name', 'autocomplete' and 'placeholder'</h4>
<form id="idLoginForm" action="/api/login" method="post" Model="@myLoginModel">
    <p>Submit input field to minimal API ussing html additional attributes to send account and password.</p>
    <P11Input Label="Account"
              name="account"
              autocomplete="off"
              placeholder="Enter 'admin'' here..."
              @bind-Value="myLoginModel.Account"
              Description="Enter account name."
              InputType="text" />
    <P11Input Label="Password"
              name="password"
              autocomplete="off"
              placeholder="Enter '123'' here..."
              @bind-Value="myLoginModel.Password"
              Description="Enter password."
              InputType="text" />
    <br />
    <P11Button Text="Login" HtmlType="HtmlType.Submit" ButtonVariant="ButtonVariant.Success" OnClick="() => { }" />
</form>

@if (!string.IsNullOrEmpty(MyMinimalApiMessage))
{
    <p>
        <b>Minimal API Message: @MyMinimalApiMessage</b>
    </p>
}