{% form_theme form '@SyliusShop/Form/theme.html.twig' %}
{% extends '@DediSyliusTheme/DesignSystem/layout.html.twig' %}

{% block content %}
    <div class="ds-container">
        <h2 class="ds-title">{{ 'app.design_system.forms.title'|trans }}</h2>
        <p class="ds-text">{{ 'app.design_system.forms.desc'|trans }}</p>

        {# Input #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.input.title'|trans }} <button class="ds-btn-code" rel=".example-input"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-input">
                <div class="html">
                    {{ form_row(form.txtName01) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="required">...&lt;/label>
    &lt;input id="" name="" type="text" class="form-control" required>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-input">
                <div class="html">
                    {{ form_row(form.txtName04) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;input id="" name="" type="text" class="form-control" disabled>
&lt;/div></code>
                </pre>
            </section>
        </div>
        <div class="row">
            <section class="col-md ds-example example-input">
                <div class="html">
                    {{ form_row(form.txtName02) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;input id="" name="" type="text" class="form-control" value="">
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-input">
                <div class="html">
                    {{ form_row(form.txtName03) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;input id="" name="" type="text" class="form-control" placeholder="">
    &lt;small class="form-text">...&lt;/small>
&lt;/div></code>
                </pre>
            </section>
        </div>

        {# Select #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.select.title'|trans }} <button class="ds-btn-code" rel=".example-select"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-select">
                <div class="html">
                    {{ form_row(form.selectName01) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="required">...&lt;/label>
    &lt;select name="" id="" class="selectpicker form-control" required>
        &lt;option value="">...&lt;/option>
    &lt;/select>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-select">
                <div class="html">
                    {{ form_row(form.selectName02) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;select name="" id="" class="selectpicker form-control" disabled>
        &lt;option value="">...&lt;/option>
    &lt;/select>
&lt;/div></code>
                </pre>
            </section>
        </div>

        {# File #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.file.title'|trans }} <button class="ds-btn-code" rel=".example-file"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-file">
                <div class="html">
                    <div class="form-group">
                        <label for="inputFile01" class="required">{{ 'app.design_system.forms.file.example'|trans }}</label>
                        <div class="custom-file">
                            <input type="file" id="inputFile01" name="inputFile01" class="custom-file-input" required>
                            <label for="inputFile01" class="custom-file-label form-control custom-file-placeholder">{{ 'app.ui.form.file_none'|trans }}</label>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">{{ 'app.ui.form.file_browse'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="required">...&lt;/label>
    &lt;div class="custom-file">
        &lt;input type="file" id="" name="" class="custom-file-input" required>
        &lt;label for="" class="custom-file-label form-control custom-file-placeholder">
            &#123;{ 'app.ui.form.file_none'|trans }}
        &lt;/label>
        &lt;div class="input-group-append">
            &lt;button class="btn btn-primary" type="button">
                &#123;{ 'app.ui.form.file_browse'|trans }}
            &lt;/button>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-file">
                <div class="html">
                    <div class="form-group">
                        <label for="inputFile02">{{ 'app.design_system.forms.file.example'|trans }}</label>
                        <div class="custom-file">
                            <input type="file" id="inputFile02" name="inputFile02" class="custom-file-input" disabled>
                            <label for="inputFile02" class="custom-file-label form-control custom-file-placeholder">{{ 'app.ui.form.file_none'|trans }}</label>
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">{{ 'app.ui.form.file_browse'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;div class="custom-file">
        &lt;input type="file" id="" name="" class="custom-file-input" disabled>
        &lt;label for="" class="custom-file-label form-control custom-file-placeholder">
            &#123;{ 'app.ui.form.file_none'|trans }}
        &lt;/label>
        &lt;div class="input-group-append">
            &lt;button class="btn btn-primary" type="button">
                &#123;{ 'app.ui.form.file_browse'|trans }}
            &lt;/button>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
                </pre>
            </section>
        </div>

        {# Textarea #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.textarea.title'|trans }} <button class="ds-btn-code" rel=".example-textarea"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-textarea">
                <div class="html">
                    {{ form_row(form.txtareaName01) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="required">...&lt;/label>
    &lt;textarea name="" id="" class="form-control" required>&lt;/textarea>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-textarea">
                <div class="html">
                    {{ form_row(form.txtareaName02) }}
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;textarea name="" id="" class="form-control" disabled>&lt;/textarea>
&lt;/div></code>
                </pre>
            </section>
        </div>

        {# checkbox/radio/switch #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.checkbox.title'|trans }} <button class="ds-btn-code" rel=".example-checkbox"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customCheckbox01) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label required">...&lt;/legend>
    &lt;label for="" class="custom-control custom-checkbox">
        &lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-checkbox">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customCheckbox02) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label">...&lt;/legend>
    &lt;label for="" class="custom-control custom-checkbox">
        &lt;input type="checkbox" class="custom-control-input" name="" id="" value="" disabled>
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-checkbox">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
        </div>
        <div class="row">
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customRadio01) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label required">...&lt;/legend>
    &lt;label for="" class="custom-control custom-radio">
        &lt;input type="radio" class="custom-control-input" name="" id="" value="">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-radio">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customRadio02) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label">...&lt;/legend>
    &lt;label for="" class="custom-control custom-radio">
        &lt;input type="radio" class="custom-control-input" name="" id="" value="" disabled>
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-radio">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
        </div>
        <div class="row">
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customSwitch01) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label required">...&lt;/legend>
    &lt;label for="" class="custom-control custom-switch">
        &lt;input type="checkbox" class="custom-control-input" name="" id="" value="">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-switch">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
            <section class="col-md ds-example example-checkbox">
                <div class="html">
                    {{ form_row(form.customSwitch02) }}
                </div>
                <pre>
                    <code>&lt;fieldset class="form-group">
    &lt;legend class="col-form-label">...&lt;/legend>
    &lt;label for="" class="custom-control custom-switch">
        &lt;input type="checkbox" class="custom-control-input" name="" id="" value="" disabled>
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
    &lt;label for="" class="custom-control custom-switch">
        ...
    &lt;/label>
&lt;/fieldset></code>
                </pre>
            </section>
        </div>

        {# Input group #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.group.title'|trans }} <button class="ds-btn-code" rel=".example-group"></button></h3>
        <section class="ds-example example-group">
            <div class="html">
                <div class="form-group">
                    <label for="">Exemple de champ avec bouton</label>
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <div class="input-group-append">
                            <button class="btn btn-square btn-primary" type="button">OK</button>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code>&lt;div class="form-group">
    &lt;label for="">&lt;/label>
    &lt;div class="input-group">
        &lt;input type="text" class="form-control">
        &lt;div class="input-group-append">
            &lt;button class="btn btn-square btn-primary" type="button">...&lt;/button>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
            </pre>
        </section>
        <section class="ds-example example-group">
            <div class="html">
                <div class="form-group">
                    <label for="">Exemple de champ avec element groupé</label>
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <div class="input-group-append">
                            <span class="input-group-text">€</span>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code>&lt;div class="form-group">
    &lt;label for="">&lt;/label>
    &lt;div class="input-group">
        &lt;input type="text" class="form-control">
        &lt;div class="input-group-append">
            &lt;span class="input-group-text">...&lt;/span>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
            </pre>
        </section>
        <section class="ds-example example-group">
            <div class="html">
                <div class="form-group">
                    <div class="input-group input-search">
                        <input type="text" class="form-control" placeholder="Je recherche...">
                        <div class="input-group-append">
                            <button class="btn btn-square" type="button">{% include '@SyliusShop/Icons/search.html.twig' %}</button>
                        </div>
                    </div>
                </div>
            </div>
            <pre>
                <code>&lt;div class="input-group input-search">
    &lt;input type="text" class="form-control" placeholder="">
    &lt;div class="input-group-append">
        &lt;button class="btn btn-square" type="button">
            {&#37; include '@SyliusShop/Icons/search.html.twig' &#37;}
        &lt;/button>
    &lt;/div>
&lt;/div></code>
            </pre>
        </section>

        {# Quantité #}
        <h3 class="ds-subtitle">{{ 'app.design_system.forms.quantity.title'|trans }} <button class="ds-btn-code" rel=".example-qty"></button></h3>
        <section class="ds-example example-qty">
            <div class="html">
                <div class="form-group">
                    <label for="">{{ 'app.design_system.forms.quantity.example'|trans }}</label>
                    <input type="number" value="500" min="0" max="1000" step="10" class="input-number"/>
                </div>
            </div>
            <pre>
                <code>&lt;div class="form-group">
    &lt;label for="">&lt;/label>
    &lt;input type="number" value="" min="" max="" step="" class="input-number"/>
&lt;/div></code>
            </pre>
        </section>

        <h3 class="ds-subtitle">{{ 'app.design_system.forms.validation.title'|trans }} <button class="ds-btn-code" rel=".example-validation"></button></h3>
        <div class="row">
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.input.text'|trans }}</label>
                        <input type="text" class="form-control is-valid" value="{{ 'app.design_system.forms.input.text_filled_succes'|trans }}">
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;input type="text" class="form-control is-valid" value="...">
&lt;/div></code>
            </pre>
            </section>
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.input.text'|trans }}</label>
                        <input type="text" class="form-control is-invalid" value="{{ 'app.design_system.forms.input.text_filled_error'|trans }}">
                        <div class="invalid-feedback">{{ 'app.design_system.forms.input.error_text'|trans }}</div>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;input type="text" class="form-control is-invalid" value="...">
    &lt;div class="invalid-feedback">...&lt;/div>
&lt;/div></code>
            </pre>
            </section>
        </div>
        <div class="row">
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.select.example'|trans }}</label>
                        <select name="" id="" class="selectpicker form-control is-valid">
                            <option value="">{{ 'app.design_system.forms.select.select_item'|trans }}</option>
                            <option value="">Item 1</option>
                            <option value="">Item 2</option>
                        </select>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;select name="" id="" class="selectpicker form-control is-valid">
          &lt;option value="">...&lt;/option>
    &lt;/select>
&lt;/div></code>
            </pre>
            </section>
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.select.example'|trans }}</label>
                        <select name="" id="" class="selectpicker form-control is-invalid">
                            <option value="">{{ 'app.design_system.forms.select.select_item'|trans }}</option>
                            <option value="">Item 1</option>
                            <option value="">Item 2</option>
                        </select>
                        <div class="invalid-feedback">{{ 'app.design_system.forms.select.error_text'|trans }}</div>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;select name="" id="" class="selectpicker form-control is-invalid">
          &lt;option value="">...&lt;/option>
    &lt;/select>
    &lt;div class="invalid-feedback">...&lt;/div>
&lt;/div></code>
            </pre>
            </section>
        </div>

        <div class="row">
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.textarea.example'|trans }}</label>
                        <textarea name="" id="" rows="6" class="form-control is-valid"></textarea>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;textarea name="" id="" rows="6" class="form-control is-valid">&lt;/textarea>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="">{{ 'app.design_system.forms.textarea.example'|trans }}</label>
                        <textarea name="" id="" rows="6" class="form-control is-invalid"></textarea>
                        <div class="invalid-feedback">{{ 'app.design_system.forms.textarea.error_text'|trans }}</div>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="">...&lt;/label>
    &lt;textarea name="" id="" rows="6" class="form-control is-invalid">&lt;/textarea>
    &lt;div class="invalid-feedback">...&lt;/div>
&lt;/div></code>
                </pre>
            </section>
        </div>

        <div class="row">
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="checkbox_3" class="custom-control custom-checkbox mb-2">
                            <input type="checkbox" name="checkbox" id="checkbox_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">{{ 'app.design_system.forms.checkbox.checkbox'|trans }}</span>
                        </label>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="custom-control custom-checkbox">
        &lt;input type="checkbox" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="radio_3" class="custom-control custom-radio mb-2">
                            <input type="radio" name="checkbox" id="radio_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">{{ 'app.design_system.forms.checkbox.radio'|trans }}</span>
                        </label>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="custom-control custom-radio">
        &lt;input type="radio" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
&lt;/div></code>
                </pre>
            </section>
            <section class="col-md ds-example example-validation">
                <div class="html">
                    <div class="form-group">
                        <label for="switch_3" class="custom-control custom-switch mb-2">
                            <input type="checkbox" name="checkbox" id="switch_3" value="Item 1" class="custom-control-input is-invalid">
                            <span class="custom-control-field"></span>
                            <span class="custom-control-text">{{ 'app.design_system.forms.checkbox.switch'|trans }}</span>
                        </label>
                    </div>
                </div>
                <pre>
                    <code>&lt;div class="form-group">
    &lt;label for="" class="custom-control custom-switch">
        &lt;input type="checkbox" name="checkbox" id="" value="" class="custom-control-input is-invalid">
        &lt;span class="custom-control-field">&lt;/span>
        &lt;span class="custom-control-text">...&lt;/span>
    &lt;/label>
&lt;/div></code>
                </pre>
            </section>
        </div>
    </div>
{% endblock %}
