@page "/comparevalidator"
@page "/docs/guides/components/comparevalidator.html"
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    CompareValidator
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>CompareValidator</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase form validation that compares user input against predefined values or other components (e.g., password confirmation), conditional validation using <code>Visible</code> property, customizable comparison operators (Equal/NotEqual/LessThan/GreaterThan), and flexible appearance options (inline/block/popup with <code>Popup</code> and <code>Style</code> properties).
</RadzenText>

<RadzenText Anchor="comparevalidator#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Basic Usage
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    RadzenCompareValidator compares the user input against a predefined value or another component.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    To use it perform these steps:
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
<ol>
    <li>Add an input component and set its <code>Name</code>. Data-bind its value to a model property via <code>@@bind-Value=@@model.Property</code>.</li>
    <li>Add RadzenCompareValidator and set its <code>Component</code> property to the <code>Name</code> of the input component. Set its <code>Value</code> property to the value you want to compare with (usually another model property).</li>
</ol>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    <strong>Important!</strong> RadzenCompareValidator works only inside  <RadzenLink Path="/templateform" Text="RadzenTemplateForm" Target="_blank" />.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    Here is a typical user registration form which checks if the user entered the same password.
</RadzenText>

<RadzenExample ComponentName="CompareValidator" Example="CompareValidatorBasicUsage" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenCompareValidator.cs">
    <CompareValidatorBasicUsage />
</RadzenExample>

<RadzenText Anchor="comparevalidator#conditional-validation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Coditional Validation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    To make the validator conditional you can set its <code>Visible</code> property. When set to <code>false</code> the validator will not run. In the example above <code>Visible</code> is set to <code>!string.IsNullOrEmpty(model.RepeatPassword)</code> - the validator will not run if RepeatPassword is empty.
</RadzenText>

<pre>
    <code>
    &lt;RadzenCompareValidator Visible=@@(!string.IsNullOrEmpty(model.RepeatPassword)) Value=@@model.Password Component="RepeatPassword" Text="Passwords should be the same" Popup=@@popup Style="position: absolute" /&gt;
    </code>
</pre>

<RadzenText Anchor="comparevalidator#comparison-operator" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Comparison operator
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    By default RadzenCompareValidator checks if the component value is equal to <code>Value</code>. This can be changed via the <code>Operator</code> property.
</RadzenText>

<RadzenExample ComponentName="CompareValidator" Example="CompareValidatorComparisonOperator" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenCompareValidator.cs">
    <CompareValidatorComparisonOperator />
</RadzenExample>

<RadzenText Anchor="comparevalidator#appearance" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Appearance
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    By default RadzenCompareValidator appears next to the component it validates. To make it appear below add <code>Style="display:block"</code>.
</RadzenText>
<pre>
    <code>
    &lt;RadzenNumeric Name="Count" @@bind-Value=@@model.Count /&gt;
    &lt;RadzenCompareValidator Style="display:block" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" /&gt;
    </code>
</pre>

<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
To make it appear as a styled popup set its <code>Popup</code> property to <code>true</code> and set its CSS <code>position</code> to <code>absolute</code>. The validated component should have <code>display: block</code> so the validation message appears right below it.
</RadzenText>
<pre>
    <code>
    &lt;RadzenNumeric Name="Count" @@bind-Value=@@model.Count Style="display:block" /&gt;
    &lt;RadzenCompareValidator Style="position:absolute" Popup="true" Component="Count" Text="Count should be less than 10" Operator="CompareOperator.LessThan" Value="10" /&gt;
    </code>
</pre>

