{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form, render_field, render_form_row %}

{% block content %}

    <h2>Example Form</h2>
    <pre>
class ExampleForm(FlaskForm):
    date = DateField(description="We'll never share your email with anyone else.")  # add help text with `description`
    datetime = DateTimeField(render_kw={'placeholder': 'this is a placeholder'})  # add HTML attribute with `render_kw`
    datetimelocal = DateTimeLocalField()
    time = TimeField()
    month = MonthField()
    floating = FloatField()
    integer = IntegerField()
    decimalslider = DecimalRangeField()
    integerslider = IntegerRangeField(render_kw={'min': '0', 'max': '4'})
    email = EmailField()
    url = URLField()
    telephone = TelField()
    image = FileField(render_kw={'class': 'my-class'}, validators=[Regexp('.+\.jpg$')])  # add your class
    option = RadioField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    select = SelectField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    selectmulti = SelectMultipleField(choices=[('dog', 'Dog'), ('cat', 'Cat'), ('bird', 'Bird'), ('alien', 'Alien')])
    bio = TextAreaField()
    search = SearchField() # will autocapitalize on mobile
    title = StringField() # will not autocapitalize on mobile
    secret = PasswordField()
    remember = BooleanField('Remember me')
    submit = SubmitField()</pre>
    {{ render_form(example_form) }}

    <h2>Render a form with render_form</h2>
    <pre>{% raw %}{{ render_form(form) }}{% endraw %}</pre>
    {{ render_form(form) }}

    <h2>Custom buttons with button_style and button_size</h2>
    <pre>{% raw %}{{ render_form(form, button_style='success', button_size='block') }}{% endraw %}</pre>
    {{ render_form(form, button_style='success', button_size='block') }}

    <h2>Custom buttons with button_map</h2>
    <pre>{% raw %}{{ render_form(button_form, button_map={'submit': 'primary', 'cancel': 'secondary', 'delete': 'danger'}) }}{% endraw %}</pre>
    {{ render_form(button_form, button_map={'submit': 'primary', 'cancel': 'secondary', 'delete': 'danger'}) }}

    <h2>Render a form field with render_field</h2>
    <pre>{% raw %}
{{ render_field(form.username) }}
{{ render_field(form.password) }}
{{ render_field(form.remember) }}
{{ render_field(form.submit) }}
{% endraw %}</pre>

    <form method="post">
    {{ form.csrf_token }}
    {{ render_field(form.username) }}
    {{ render_field(form.password) }}
    {{ render_field(form.remember) }}
    {{ render_field(form.submit) }}
    </form>

    <h2>Render a form with render_form_row</h2>
    <pre>{% raw %}
{{ render_form_row([form.username, form.password]) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-6', 'password': 'col-md-4'}) }}
{{ render_form_row([form.username, form.password], col_map={'username': 'col-md-2', 'password': 'col-md-8'}) }}
{{ render_form_row([form.username, form.password], col_class_default='col-md-2') }}
{{ render_form_row([form.remember]) }}
{{ render_form_row([form.submit]) }}
{% endraw %}</pre>
        
    <form method="post">
    {{ form.csrf_token }}
    {{ render_form_row([form.username, form.password]) }}
    {{ render_form_row([form.username, form.password], col_map={'username': 'col-md-6', 'password': 'col-md-4'}) }}
    {{ render_form_row([form.username, form.password], col_map={'username': 'col-md-2', 'password': 'col-md-8'}) }}
    {{ render_form_row([form.username, form.password], col_class_default='col-md-2') }}
    {{ render_form_row([form.remember]) }}
    {{ render_form_row([form.submit]) }}
    </form>

    <h2>Test FormField and FormField</h2>
    <h2>Telephone Form</h2>
    {{ render_form(telephone_form) }}
    
    <h2>IM Form</h2>
    {{ render_form(im_form) }}

    <h2>Contact Form</h2>
    {{ render_form(contact_form) }}
{% endblock %}
