<?xml version="1.0"?>
<t t-name="portal.portal_my_details_fields">
        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
        <div t-if="error_message" class="alert alert-danger" role="alert">
            <div class="col-lg-12">
                <t t-foreach="error_message" t-as="err"><t t-esc="err"/><br/></t>
            </div>
        </div>
        <div t-attf-class="mb-3 #{error.get('name') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="name">Name</label>
            <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="name or partner.name"/>
        </div>
        <div t-attf-class="mb-3 #{error.get('email') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="email">Email</label>
            <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="email or partner.email"/>
        </div>

        <div class="clearfix"/>
        <div t-attf-class="mb-1 #{error.get('company_name') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label label-optional" for="company_name">Company Name</label>
            <!-- The <input> use "disabled" attribute to avoid sending an unauthorized value on form submit.
                 The user might not have rights to change company_name but should still be able to see it.
            -->
            <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="company_name or partner.commercial_company_name" t-att-disabled="None if partner_can_edit_vat else '1'"/>
            <small t-if="not partner_can_edit_vat" class="form-text text-muted d-block d-xl-none">
                Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.
            </small>
        </div>
        <div t-attf-class="mb-1 #{error.get('vat') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label label-optional" for="vat">VAT Number</label>
            <!-- The <input> use "disabled" attribute to avoid sending an unauthorized value on form submit.
                 The user might not have rights to change company_name but should still be able to see it.
            -->
            <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="vat or partner.vat" t-att-disabled="None if partner_can_edit_vat else '1'"/>
            <small t-if="not partner_can_edit_vat" class="form-text text-muted d-block d-xl-none">Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.</small>
        </div>
        <div t-if="not partner_can_edit_vat" class="col-12 d-none d-xl-block">
            <small class="form-text text-muted">Changing company name or VAT number is not allowed once document(s) have been issued for your account. <br/>Please contact us directly for this operation.</small>
        </div>
        <div t-attf-class="mb-3 #{error.get('phone') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="phone">Phone</label>
            <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="phone or partner.phone"/>
        </div>

        <div class="clearfix"/>
        <div t-attf-class="mb-3 #{error.get('street') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="street">Street</label>
            <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="street or partner.street"/>
        </div>
        <div t-attf-class="mb-3 #{error.get('city') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="city">City</label>
            <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="city or partner.city"/>
        </div>
        <div t-attf-class="mb-3 #{error.get('zip') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label label-optional" for="zipcode">Zip / Postal Code</label>
            <input type="text" name="zipcode" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="zipcode or partner.zip"/>
        </div>
        <div t-attf-class="mb-3 #{error.get('country_id') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label" for="country_id">Country</label>
            <select name="country_id" t-attf-class="form-select #{error.get('country_id') and 'is-invalid' or ''}">
                <option value="">Country...</option>
                <t t-foreach="countries or []" t-as="country">
                    <option t-att-value="country.id" t-att-selected="country.id == int(country_id) if country_id else country.id == partner.country_id.id">
                        <t t-esc="country.name"/>
                    </option>
                </t>
            </select>
        </div>
        <div t-attf-class="mb-3 #{error.get('state_id') and 'o_has_error' or ''} col-xl-6">
            <label class="col-form-label label-optional" for="state_id">State / Province</label>
            <select name="state_id" t-attf-class="form-select #{error.get('state_id') and 'is-invalid' or ''}">
                <option value="">select...</option>
                <t t-foreach="states or []" t-as="state">
                    <option t-att-value="state.id" style="display:none;" t-att-data-country_id="state.country_id.id" t-att-selected="state.id == int(state_id) if state_id else state.id == partner.state_id.id">
                        <t t-esc="state.name"/>
                    </option>
                </t>
            </select>
        </div>
    </t>

    