{% extends "base.html" %}
{% load components %}

{% block title %}Form Demo - Component Framework{% endblock %}

{% block content %}
<div class="card">
    <h2>Form Component with Validation</h2>
    <p>This form uses Pydantic for validation. Try submitting with invalid data to see live error messages.</p>
</div>

<div class="card">
    {% live_component "contact_form" %}
</div>

<div class="info">
    <h3>Features:</h3>
    <ul style="margin-left: 20px; margin-top: 10px;">
        <li>Server-side validation with Pydantic</li>
        <li>Live error feedback without page reload</li>
        <li>Field-level error messages</li>
        <li>Success message on valid submission</li>
    </ul>
</div>

<div class="card">
    <h3>Try these validations:</h3>
    <ul style="margin-left: 20px; margin-top: 10px;">
        <li>Name must be 2-100 characters</li>
        <li>Email must be valid format</li>
        <li>Message must be 10-1000 characters</li>
    </ul>
</div>
{% endblock %}