<section class="page__content">
    <h2>{{stepNumber}} - Société</h2>
    <p>
        Pour pouvoir établir des devis et factures, l'application a besoin de connaître les
        détails concernant votre structure (entreprise, association ou autre).
    </p>
    <form method="POST" class="form">
        <section class="form__field">
            <h3 class="form__field-title">Raison sociale *</h3>
            <p class="form__field-description">
                Le nom de votre société / association / institution...
            </p>
            <input
                type="text"
                name="name"
                style="width: 410px;"
                value="{{stepData['name']}}"
            />
            {% if validationErrors['name'] %}
            <div class="form__field-error">{{ translate(validationErrors['name']) }}</div>
            {% endif %}
        </section>
        <section class="form__field">
            <h3 class="form__field-title">Adresse *</h3>
            <p class="form__field-description">
                L'adresse postale de votre société / association / institution...
            </p>
            <label>Rue, numéro *</label>
            <input
                type="text"
                name="street"
                style="width: 410px;"
                value="{{stepData['street']}}"
            />
            {% if validationErrors['street'] %}
            <div class="form__field-error">{{ translate(validationErrors['street']) }}</div>
            {% endif %}
            <div class="form__sub-fields">
                <div class="form__sub-fields__item">
                    <label>Code postal *</label>
                    <input
                        type="text"
                        name="zipCode"
                        style="width: 100px;"
                        value="{{stepData['zipCode']}}"
                    />
                    {% if validationErrors['zipCode'] %}
                    <div class="form__field-error">{{ translate(validationErrors['zipCode']) }}</div>
                    {% endif %}
                </div>
                <div class="form__sub-fields__item">
                    <label>Ville *</label>
                    <input
                        type="text"
                        name="locality"
                        style="width: 300px;"
                        value="{{stepData['locality']}}"
                    />
                    {% if validationErrors['locality'] %}
                    <div class="form__field-error">{{ translate(validationErrors['locality']) }}</div>
                    {% endif %}
                </div>
            </div>
            <label>Pays</label>
            <input
                type="text"
                name="country"
                style="width: 250px;"
                value="{{stepData['country']}}"
            />
        </section>
        <section class="form__field">
            <h3 class="form__field-title">Téléphone</h3>
            <p class="form__field-description">
                Le numéro de téléphone qui apparaîtra sur les documents (devis, factures...) (optionnel)
            </p>
            <input
                type="text"
                name="phone"
                style="width: 410px;"
                value="{{stepData['phone']}}"
            />
        </section>
        <section class="form__field">
            <h3 class="form__field-title">E-mail</h3>
            <p class="form__field-description">
                L'adresse e-mail qui apparaîtra sur les documents (optionnel).
            </p>
            <input
                type="text"
                name="email"
                style="width: 410px;"
                value="{{stepData['email']}}"
            />
        </section>
        <section class="form__field">
            <h3 class="form__field-title">T.V.A</h3>
            <p class="form__field-description">
                Votre numéro de T.V.A. intracommunautaire, et le taux à appliquer. Si vous n'êtes pas
                assujeti à la T.V.A. vous pouvez laisser ces champs vides.
            </p>
            <div class="form__sub-fields">
                <div class="form__sub-fields__item">
                    <label>Numéro</label>
                    <input
                        type="text"
                        name="vatNumber"
                        style="width: 250px;"
                        value="{{stepData['vatNumber']}}"
                    />
                </div>
                <div class="form__sub-fields__item">
                    <label>Taux (en %)</label>
                    <input
                        type="number"
                        step="0.1"
                        name="vatRate"
                        style="width: 100px;"
                        value="{{stepData['vatRate']}}"
                    />
                </div>
            </div>
        </section>
        <section class="form__field">
            <h3 class="form__field-title">Autres numéros légaux (optionnel)</h3>
            <p class="form__field-description">
                Vous pouvez ajouter jusqu'à deux numéros administratifs qui pourront apparaître sur
                les devis et factures.
            </p>
            <h4 style="margin: 1rem 0 0;">Premier numéro&nbsp;:</h4>
            <div class="form__sub-fields">
                <div class="form__sub-fields__item">
                    <label>Nom</label>
                    <input
                        type="text"
                        name="legalNumbers[0][name]"
                        style="width: 100px;"
                        value="SIRET"
                    />
                </div>
                <div class="form__sub-fields__item">
                    <label>Valeur</label>
                    <input
                        type="text"
                        name="legalNumbers[0][value]"
                        style="width: 250px;"
                    />
                </div>
            </div>
            <h4 style="margin: 1rem 0 0;">Second numéro&nbsp;:</h4>
            <div class="form__sub-fields">
                <div class="form__sub-fields__item">
                    <label>Nom</label>
                    <input
                        type="text"
                        name="legalNumbers[1][name]"
                        style="width: 100px;"
                        value="APE"
                    />
                </div>
                <div class="form__sub-fields__item">
                    <label>Valeur</label>
                    <input
                        type="text"
                        name="legalNumbers[1][value]"
                        style="width: 250px;"
                    />
                </div>
            </div>
        </section>
        <section class="form__submit">
            <button role="submit">Next step</button>
        </section>
    </form>
</section>
