<div data-w-tab="User Settings" class="tab-pane w-tab-pane">
<div data-current="General" data-easing="ease" data-duration-in="300" data-duration-out="100" class="sub-tabs w-tabs">
<div class="sub-tabs-menu w-tab-menu">
<a data-w-tab="General" class="sub-tab-menu-link w-inline-block w-tab-link w--current">
<div class="sub-tab-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 32 32" width="32" height="32">
<path d="M12,4A5,5,0,1,1,7,9a5,5,0,0,1,5-5m0-2a7,7,0,1,0,7,7A7,7,0,0,0,12,2Z"></path>
<path d="M22,30H20V25a5,5,0,0,0-5-5H9a5,5,0,0,0-5,5v5H2V25a7,7,0,0,1,7-7h6a7,7,0,0,1,7,7Z"></path>
<rect x="22" y="4" width="10" height="2"></rect>
<rect x="22" y="9" width="10" height="2"></rect>
<rect x="22" y="14" width="7" height="2"></rect>
</svg></div>
<div>General</div>
</a>
<a data-w-tab="Security" class="sub-tab-menu-link w-inline-block w-tab-link">
<div class="sub-tab-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 32 32" width="32" height="32">
<path d="M30,24V22H27.8989a4.9678,4.9678,0,0,0-.7319-1.7529l1.49-1.49-1.414-1.414-1.49,1.49A4.9678,4.9678,0,0,0,24,18.1011V16H22v2.1011a4.9678,4.9678,0,0,0-1.7529.7319l-1.49-1.49-1.414,1.414,1.49,1.49A4.9678,4.9678,0,0,0,18.1011,22H16v2h2.1011a4.9678,4.9678,0,0,0,.7319,1.7529l-1.49,1.49,1.414,1.414,1.49-1.49A4.9678,4.9678,0,0,0,22,27.8989V30h2V27.8989a4.9678,4.9678,0,0,0,1.7529-.7319l1.49,1.49,1.414-1.414-1.49-1.49A4.9678,4.9678,0,0,0,27.8989,24Zm-7,2a3,3,0,1,1,3-3A3.0033,3.0033,0,0,1,23,26Z" transform="translate(0 0)"></path>
<path d="M14,26.667l-3.2344-1.7246A8.9858,8.9858,0,0,1,6,17V4H26V14h2V4a2.0023,2.0023,0,0,0-2-2H6A2.0023,2.0023,0,0,0,4,4V17a10.9814,10.9814,0,0,0,5.8242,9.707L14,28.9336Z" transform="translate(0 0)"></path>
</svg></div>
<div>Security</div>
</a>
</div>
<div class="sub-tab-content w-tab-content">
<div data-w-tab="General" class="sub-tab-content-area w-tab-pane w--tab-active">
<h2>General Settings</h2>
<div class="subheading">Manage this user's contact information, and time zone settings.</div>
<div class="w-form">
<form id="edit-settings" name="edit-settings" data-name="edit-settings" method="get">
<div class="form-field-container">
<div class="field-label-container"><
label for="profile-image" class="field-label">Profile Picture</label>
</div>
<div id="profile-image" class="profile-image-edit">
<img alt="{user's name}" src="{profile image}" loading="lazy" class="profile-image">
<div id="change-image" class="change-image"> <!-- onlick open image upload/picker modal -->
<div class="w-embed">
<svg xmlns="http://www.w3.org/2000/svg" height="32" viewbox="0 0 24 24" width="32" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"></path></svg>
</div>
</div>
</div>
</div>
<div class="space-2rem"></div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="First-Name" class="field-label">First Name</label>
</div><
input class="form-field w-input" maxlength="256" name="First-Name" data-name="First Name" placeholder="First Name" type="text" id="First-Name">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="Last-Name" class="field-label">Last Name</label>
</div>
<input class="form-field w-input" maxlength="256" name="Last-Name" data-name="Last Name" placeholder="Last Name" type="text" id="Last-Name">
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="name" class="field-label">Email Address</label>
<div data-tippy-content="The email address cannot be changed by an admin. The user must update it themselves and verify the new email before it takes effect." class="help-tooltip 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<input class="form-field disabled w-input" maxlength="256" name="Email-Address" data-name="Email Address" placeholder="Email Address" type="email" id="Email-Address" disabled> <!-- make sure this only pulls from the DB and cannot be used to write back to the DB if field is enabled in dev tools -->
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="country" class="field-label">Country</label>
</div>
<div id="country" data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">United States</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<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">
<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" class="feather feather-check">
<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">
<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" class="feather feather-check">
<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 class="form-field-container">
<div class="field-label-container">
<label for="timezone" class="field-label">Time Zone</label>
</div>
<div id="timezone" data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">(UTC-05:00) Eastern Time (US & Canada)</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-08:00) Pacific Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-07:00) Mountain Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-06:00) Central Time (US & Canada)</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">(UTC-05:00) Eastern Time (US & Canada)</div>
</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div data-w-tab="Security" class="sub-tab-content-area w-tab-pane">
<h2>Security Settings</h2>
<div class="subheading">Manage user roles, authentication, and access control.</div>
<h3 class="no-margin">Permissions</h3>
<div class="subheading">Define the user’s level of access within the system.</div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="role" class="field-label">Role</label>
<div data-tippy-content="Control the user’s membership in the workspace." class="help-tooltip 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<div id="role" data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">Administrator</div>
</div>
<div class="dropdown-open w-dropdown-list">
<div class="dropdown-filter"><input class="dropdown-filter-input w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Filter" type="text" id="field-2" required=""></div>
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Administrator</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">User</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="heading-wrapper">
<h3 class="no-margin">Authentication</h3>
</div>
<div class="subheading">Manage login security, including password resets and two-factor authentication (2FA).</div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="password-reset" class="field-label">Reset Password</label>
<div data-tippy-content="Sends an email to the user with a link to reset their password." class="help-tooltip 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="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg></div>
</div>
<button id="password-reset" type="button" data-wait="Sending..." class="button secondary w-button">Send Password Reset</button>
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="remove-2fa" class="field-label">Reset 2FA</label>
<div data-tippy-content="Removes the user’s two-factor authentication setup, requiring them to set it up again on their next login." class="help-tooltip 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<button id="remove-2fa" type="button" data-wait="Processing..." class="button secondary w-button">Remove 2FA</button>
</div>
</div>
<div class="heading-wrapper">
<h3 class="no-margin">Workspace Access</h3>
</div>
<div class="subheading">Control the user’s membership in the workspace.</div>
<div class="w-layout-grid form-grid">
<div class="form-field-container">
<div class="field-label-container">
<label for="remove-from-workspace" class="field-label">Remove from Workspace</label>
<div data-tippy-content=" Revokes the user’s access to this workspace and removes their associated permissions." class="help-tooltip 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="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
</div>
<button id="remove-from-workspace" type="button" data-wait="Processing..." class="button danger w-button">Remove from Workspace</button>
</div>
</div>
</div>
</div>
</div>
</div>