<h2>Settings</h2>
<div class="subheading">Manage your organization's general settings and billing details.</div>
<form id="settings" name="settings" data-name="settings" method="get">
    <div class="heading-wrapper">
        <h3 class="no-margin">General Settings</h3>
    </div>
    <div class="w-layout-grid form-grid">
        <div id="org-name" class="form-field-container">
            <div class="field-label-container">
                <label for="org-name" class="field-label">{Workspace Object Name (e.g. Organization)} Name</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="organization_name"
                data-name="Organization Name"
                placeholder="Your Organization's Name"
                type="text"
                id="org-name"
                required
                aria-required="true"
            >
        </div>
        <div id="invoice-email" class="form-field-container">
            <div class="field-label-container">
                <label for="invoice-email" class="field-label">Email Address to Send Invoices</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="invoice_email"
                data-name="Invoice Email"
                placeholder="[email protected]"
                type="email"
                id="invoice-email"
                required
                aria-required="true"
            >
        </div>
    </div>
    <div class="heading-wrapper">
        <h3 class="no-margin">Billing Address</h3>
    </div>
    <div class="w-layout-grid form-grid">
        <div id="address1" class="form-field-container">
            <div class="field-label-container">
                <label for="address1" class="field-label">Address 1</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="address1"
                data-name="Address 1"
                placeholder="Your Address"
                type="text"
                id="address1"
                required
                aria-required="true"
            >
        </div>
        <div id="address2" class="form-field-container">
            <div class="field-label-container">
                <label for="address2" class="field-label">Address 2</label>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="address2"
                data-name="Address 2"
                placeholder=""
                type="text"
                id="address2"
            >
        </div>
        <div id="city" class="form-field-container">
            <div class="field-label-container">
                <label for="city" class="field-label">City</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="city"
                data-name="City"
                placeholder="Your City"
                type="text"
                id="city"
                required
                aria-required="true"
            >
        </div>
        <div id="state" class="form-field-container">
            <div class="field-label-container">
                <label for="state" class="field-label">Province / State</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <div
                data-delay="0"
                data-hover="false"
                class="dropdown w-dropdown"
                role="combobox"
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="state-label"
            >
                <div class="dropdown-closed w-dropdown-toggle" id="state-label">
                    <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                    <div class="dropdown-text">Select one...</div>
                </div>
                <div class="dropdown-open w-dropdown-list" role="listbox">
                    <div class="dropdown-filter">
                        <input
                            class="dropdown-filter-input w-input"
                            maxlength="256"
                            name="state_filter"
                            data-name="State Filter"
                            placeholder="Filter"
                            type="text"
                            id="state_filter"
                            aria-label="Filter states"
                        >
                    </div>
                    <div class="dropdown-options">
                        <a href="#" class="dropdown-option w-inline-block" role="option" aria-selected="false" id="state-bc">
                            <div class="dropdown-option-selected-icon-container">
                                <div class="dropdown-option-selected-icon w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="dropdown-option-text">British Columbia</div>
                        </a>
                        <a href="#" class="dropdown-option w-inline-block" role="option" aria-selected="false" id="state-alberta">
                            <div class="dropdown-option-selected-icon-container">
                                <div class="dropdown-option-selected-icon w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="dropdown-option-text">Alberta</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="country" class="form-field-container">
            <div class="field-label-container">
                <label for="country" class="field-label">Country</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <div
                data-delay="0"
                data-hover="false"
                class="dropdown w-dropdown"
                role="combobox"
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-labelledby="country-label"
            >
                <div class="dropdown-closed w-dropdown-toggle" id="country-label">
                    <div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
                    <div class="dropdown-text">Select one...</div>
                </div>
                <div class="dropdown-open w-dropdown-list" role="listbox">
                    <div class="dropdown-filter">
                        <input
                            class="dropdown-filter-input w-input"
                            maxlength="256"
                            name="country_filter"
                            data-name="Country Filter"
                            placeholder="Filter"
                            type="text"
                            id="country_filter"
                            aria-label="Filter countries"
                        >
                    </div>
                    <div class="dropdown-options">
                        <a href="#" class="dropdown-option w-inline-block" role="option" aria-selected="true" id="country-us">
                            <div class="dropdown-option-selected-icon-container">
                                <div class="dropdown-option-selected-icon selected w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="dropdown-option-text">United States</div>
                        </a>
                        <a href="#" class="dropdown-option w-inline-block" role="option" aria-selected="false" id="country-canada">
                            <div class="dropdown-option-selected-icon-container">
                                <div class="dropdown-option-selected-icon w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="dropdown-option-text">Canada</div>
                        </a>
                        <a href="#" class="dropdown-option w-inline-block" role="option" aria-selected="false" id="country-uk">
                            <div class="dropdown-option-selected-icon-container">
                                <div class="dropdown-option-selected-icon w-embed">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="20 6 9 17 4 12"></polyline>
                                    </svg>
                                </div>
                            </div>
                            <div class="dropdown-option-text">United Kingdom</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="zip" class="form-field-container">
            <div class="field-label-container">
                <label for="zip" class="field-label">Zip / Postal Code</label>
                <div class="required-star" aria-hidden="true">*</div>
            </div>
            <input
                class="form-field w-input"
                maxlength="256"
                name="zip_code"
                data-name="Zip Code"
                placeholder="Your Zip / Postal Code"
                type="text"
                id="zip"
                required
                aria-required="true"
            >
        </div>
    </div>
</form>