<div class="account-settings-container">
    <div class="wrapper-header">
        <h2 class="header-title"><%- gettext("Account Settings") %></h2>
        <small class="account-settings-header-subtitle"><%- gettext("These settings include basic information about your account. You can also specify additional information and see your linked social accounts on this page.") %></small>
    </div>

    <div class="account-settings-sections">
        <% _.each(sections, function(section) { %>
            <div class="section">
                <h3 class="section-header"><%- gettext(section.title) %></h3>
                <div class="account-settings-section-body">
                    <div class="ui-loading-indicator">
                        <span class="spin"><i class="icon fa fa-refresh" aria-hidden=true></i></span>
                        <span class="copy"><%- gettext("Loading") %></span>
                    </div>
                    <div class="ui-loading-error is-hidden">
                        <i class="fa fa-exclamation-triangle message-error" aria-hidden=true></i>
                        <span class="copy"><%- gettext("An error occurred. Please reload the page.") %></span>
                    </div>
                </div>
            </div>
        <% }); %>
    </div>
</div>
