Forms: Account
Component #1
Privacy
Delete your account
When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.
<!-- Content -->
<div class="container">
<div class="d-grid gap-3 gap-lg-5">
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-header-title">Basic info</h4>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form -->
<div class="row mb-4">
<label class="col-sm-3 col-form-label form-label">Profile photo</label>
<div class="col-sm-9">
<!-- Media -->
<div class="d-flex align-items-center">
<!-- Avatar -->
<label class="avatar avatar-xl avatar-circle" for="avatarUploader">
<img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
</label>
<div class="d-grid d-sm-flex gap-2 ms-4">
<div class="form-attachment-btn btn btn-primary btn-sm">Upload photo
<input type="file" class="js-file-attach form-attachment-btn-label" id="avatarUploader"
data-hs-file-attach-options='{
"textTarget": "#avatarImg",
"mode": "image",
"targetAttr": "src",
"resetTarget": ".js-file-attach-reset-img",
"resetImg": "../assets/img/160x160/img1.jpg",
"allowTypes": [".png", ".jpeg", ".jpg"]
}'>
</div>
<!-- End Avatar -->
<button type="button" class="js-file-attach-reset-img btn btn-white btn-sm">Delete</button>
</div>
</div>
<!-- End Media -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="firstNameLabel" class="col-sm-3 col-form-label form-label">Full name <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Displayed on public forums, such as Front."></i></label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" name="firstName" id="firstNameLabel" placeholder="Clarice" aria-label="Clarice" value="Natalie">
<input type="text" class="form-control" name="lastName" id="lastNameLabel" placeholder="Boone" aria-label="Boone" value="Curtis">
</div>
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="emailLabel" class="col-sm-3 col-form-label form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" name="email" id="emailLabel" placeholder="clarice@example.com" aria-label="clarice@example.com" value="natalie@example.com">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="js-add-field row mb-4"
data-hs-add-field-options='{
"template": "#addPhoneFieldTemplate",
"container": "#addPhoneFieldContainer",
"defaultCreated": 0
}'>
<label for="phoneLabel" class="col-sm-3 col-form-label form-label">Phone <span class="form-label-secondary">(Optional)</span></label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="js-input-mask form-control" name="phone" id="phoneLabel" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx" value="+1(605)5618929"
data-hs-mask-options='{
"mask": "+{0}(000)000-00-00"
}'>
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" name="phoneSelect"
data-hs-tom-select-options='{
"width": "8rem",
"hideSearch": true
}'>
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- Container For Input Field -->
<div id="addPhoneFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus-circle me-1"></i> Add phone
</a>
</div>
</div>
<!-- End Form -->
<!-- Add Phone Input Field -->
<div id="addPhoneFieldTemplate" style="display: none; position: relative;">
<div class="input-group input-group-add-field">
<input type="text" class="js-input-mask-dynamic form-control" data-name="additionlPhone" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx"
data-hs-mask-options='{
"mask": "+{0}(000)000-00-00"
}'>
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select-dynamic form-select" data-name="additionlPhoneSelect"
data-hs-tom-select-options='{
"width": "8rem",
"hideSearch": true
}'>
<option value="Mobile" selected>Mobile</option>
<option value="Home">Home</option>
<option value="Work">Work</option>
<option value="Fax">Fax</option>
<option value="Direct">Direct</option>
</select>
</div>
<!-- End Select -->
</div>
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="bi-x-lg"></i>
</a>
</div>
<!-- End Add Phone Input Field -->
<!-- Form -->
<div class="row mb-4">
<label class="col-sm-3 col-form-label form-label">Gender</label>
<div class="col-sm-9">
<div class="input-group input-group-md-down-break">
<!-- Radio Check -->
<label class="form-control" for="genderTypeRadio1">
<span class="form-check">
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio1">
<span class="form-check-label">Male</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="genderTypeRadio2">
<span class="form-check">
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio2" checked>
<span class="form-check-label">Female</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="genderTypeRadio3">
<span class="form-check">
<input type="radio" class="form-check-input" name="genderTypeRadio" id="genderTypeRadio3">
<span class="form-check-label">Other</span>
</span>
</label>
<!-- End Radio Check -->
</div>
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label class="col-sm-3 col-form-label form-label">BIO</label>
<div class="col-sm-9">
<!-- Quill -->
<div class="quill-custom">
<div class="js-quill" style="height: 15rem;"
data-hs-quill-options='{
"placeholder": "Type your message...",
"modules": {
"toolbar": [
["bold", "italic", "underline", "strike", "link", "image", "blockquote", "code", {"list": "bullet"}]
]
}
}'>Creative mind at Htmlstream
</div>
</div>
<!-- End Quill -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row align-items-center">
<label for="disableAdCheckbox" class="col-sm-3 col-form-label form-label">Disable ads <span class="badge badge-primary text-uppercase ms-1">PRO</span></label>
<div class="col-sm-9">
<!-- Check -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="disableAdCheckbox">
<label class="form-check-label" for="disableAdCheckbox">With your Pro account, you can disable ads across the site.</label>
</div>
<!-- End Check -->
</div>
</div>
<!-- End Form -->
</form>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer pt-0">
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<a class="btn btn-primary" href="javascript:;">Save changes</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<!-- Card -->
<div id="editAddressCard" class="card">
<div class="card-header border-bottom">
<h4 class="card-header-title">Address</h4>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form -->
<div class="row mb-4">
<label for="locationLabel" class="col-sm-3 col-form-label form-label">Location</label>
<div class="col-sm-9">
<!-- Select -->
<div class="tom-select-custom mb-3">
<select class="js-select form-select" id="locationLabel">
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" /><span class="text-truncate">Afghanistan</span></span>'>Afghanistan</option>
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" /><span class="text-truncate">Aland Islands</span></span>'>Aland Islands</option>
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" /><span class="text-truncate">Albania</span></span>'>Albania</option>
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" /><span class="text-truncate">Algeria</span></span>'>Algeria</option>
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" /><span class="text-truncate">American Samoa</span></span>'>American Samoa</option>
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" /><span class="text-truncate">Andorra</span></span>'>Andorra</option>
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" /><span class="text-truncate">Angola</span></span>'>Angola</option>
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" /><span class="text-truncate">Anguilla</span></span>'>Anguilla</option>
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" /><span class="text-truncate">Antigua and Barbuda</span></span>'>Antigua and Barbuda</option>
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" /><span class="text-truncate">Argentina</span></span>'>Argentina</option>
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" /><span class="text-truncate">Armenia</span></span>'>Armenia</option>
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" /><span class="text-truncate">Aruba</span></span>'>Aruba</option>
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" /><span class="text-truncate">Australia</span></span>'>Australia</option>
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" /><span class="text-truncate">Austria</span></span>'>Austria</option>
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" /><span class="text-truncate">Azerbaijan</span></span>'>Azerbaijan</option>
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" /><span class="text-truncate">Bahamas</span></span>'>Bahamas</option>
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" /><span class="text-truncate">Bahrain</span></span>'>Bahrain</option>
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" /><span class="text-truncate">Bangladesh</span></span>'>Bangladesh</option>
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" /><span class="text-truncate">Barbados</span></span>'>Barbados</option>
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" /><span class="text-truncate">Belarus</span></span>'>Belarus</option>
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" /><span class="text-truncate">Belgium</span></span>'>Belgium</option>
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" /><span class="text-truncate">Belize</span></span>'>Belize</option>
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" /><span class="text-truncate">Benin</span></span>'>Benin</option>
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" /><span class="text-truncate">Bermuda</span></span>'>Bermuda</option>
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" /><span class="text-truncate">Bhutan</span></span>'>Bhutan</option>
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" /><span class="text-truncate">Bolivia (Plurinational State of)</span></span>'>Bolivia (Plurinational State of)</option>
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" /><span class="text-truncate">Bonaire, Sint Eustatius and Saba</span></span>'>Bonaire, Sint Eustatius and Saba</option>
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" /><span class="text-truncate">Bosnia and Herzegovina</span></span>'>Bosnia and Herzegovina</option>
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" /><span class="text-truncate">Botswana</span></span>'>Botswana</option>
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" /><span class="text-truncate">Brazil</span></span>'>Brazil</option>
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" /><span class="text-truncate">British Indian Ocean Territory</span></span>'>British Indian Ocean Territory</option>
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" /><span class="text-truncate">Brunei Darussalam</span></span>'>Brunei Darussalam</option>
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" /><span class="text-truncate">Bulgaria</span></span>'>Bulgaria</option>
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" /><span class="text-truncate">Burkina Faso</span></span>'>Burkina Faso</option>
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" /><span class="text-truncate">Burundi</span></span>'>Burundi</option>
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" /><span class="text-truncate">Cabo Verde</span></span>'>Cabo Verde</option>
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" /><span class="text-truncate">Cambodia</span></span>'>Cambodia</option>
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" /><span class="text-truncate">Cameroon</span></span>'>Cameroon</option>
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" /><span class="text-truncate">Canada</span></span>'>Canada</option>
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" /><span class="text-truncate">Cayman Islands</span></span>'>Cayman Islands</option>
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle shape-3.svg2" src="../node_modules/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" /><span class="text-truncate">Central African Republic</span></span>'>Central African Republic</option>
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" /><span class="text-truncate">Chad</span></span>'>Chad</option>
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" /><span class="text-truncate">Chile</span></span>'>Chile</option>
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" /><span class="text-truncate">China</span></span>'>China</option>
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" /><span class="text-truncate">Christmas Island</span></span>'>Christmas Island</option>
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" /><span class="text-truncate">Cocos (Keeling) Islands</span></span>'>Cocos (Keeling) Islands</option>
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" /><span class="text-truncate">Colombia</span></span>'>Colombia</option>
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" /><span class="text-truncate">Comoros</span></span>'>Comoros</option>
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" /><span class="text-truncate">Cook Islands</span></span>'>Cook Islands</option>
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" /><span class="text-truncate">Costa Rica</span></span>'>Costa Rica</option>
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" /><span class="text-truncate">Croatia</span></span>'>Croatia</option>
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" /><span class="text-truncate">Cuba</span></span>'>Cuba</option>
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" /><span class="text-truncate">Curaçao</span></span>'>Curaçao</option>
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" /><span class="text-truncate">Cyprus</span></span>'>Cyprus</option>
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" /><span class="text-truncate">Czech Republic</span></span>'>Czech Republic</option>
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" /><span class="text-truncate">Côte d'Ivoire</span></span>'>Côte d'Ivoire</option>
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" /><span class="text-truncate">Democratic Republic of the Congo</span></span>'>Democratic Republic of the Congo</option>
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" /><span class="text-truncate">Denmark</span></span>'>Denmark</option>
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" /><span class="text-truncate">Djibouti</span></span>'>Djibouti</option>
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" /><span class="text-truncate">Dominica</span></span>'>Dominica</option>
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" /><span class="text-truncate">Dominican Republic</span></span>'>Dominican Republic</option>
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" /><span class="text-truncate">Ecuador</span></span>'>Ecuador</option>
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" /><span class="text-truncate">Egypt</span></span>'>Egypt</option>
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" /><span class="text-truncate">England</span></span>'>England</option>
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" /><span class="text-truncate">Eritrea</span></span>'>Eritrea</option>
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" /><span class="text-truncate">Estonia</span></span>'>Estonia</option>
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" /><span class="text-truncate">Ethiopia</span></span>'>Ethiopia</option>
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" /><span class="text-truncate">Falkland Islands</span></span>'>Falkland Islands</option>
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" /><span class="text-truncate">Faroe Islands</span></span>'>Faroe Islands</option>
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" /><span class="text-truncate">Federated States of Micronesia</span></span>'>Federated States of Micronesia</option>
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" /><span class="text-truncate">Fiji</span></span>'>Fiji</option>
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" /><span class="text-truncate">Finland</span></span>'>Finland</option>
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" /><span class="text-truncate">France</span></span>'>France</option>
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" /><span class="text-truncate">French Guiana</span></span>'>French Guiana</option>
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" /><span class="text-truncate">French Polynesia</span></span>'>French Polynesia</option>
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" /><span class="text-truncate">French Southern Territories</span></span>'>French Southern Territories</option>
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" /><span class="text-truncate">Gabon</span></span>'>Gabon</option>
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" /><span class="text-truncate">Gambia</span></span>'>Gambia</option>
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" /><span class="text-truncate">Georgia</span></span>'>Georgia</option>
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" /><span class="text-truncate">Germany</span></span>'>Germany</option>
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" /><span class="text-truncate">Ghana</span></span>'>Ghana</option>
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" /><span class="text-truncate">Gibraltar</span></span>'>Gibraltar</option>
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" /><span class="text-truncate">Greece</span></span>'>Greece</option>
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" /><span class="text-truncate">Greenland</span></span>'>Greenland</option>
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" /><span class="text-truncate">Grenada</span></span>'>Grenada</option>
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" /><span class="text-truncate">Guadeloupe</span></span>'>Guadeloupe</option>
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" /><span class="text-truncate">Guam</span></span>'>Guam</option>
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" /><span class="text-truncate">Guatemala</span></span>'>Guatemala</option>
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" /><span class="text-truncate">Guernsey</span></span>'>Guernsey</option>
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" /><span class="text-truncate">Guinea</span></span>'>Guinea</option>
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" /><span class="text-truncate">Guinea-Bissau</span></span>'>Guinea-Bissau</option>
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" /><span class="text-truncate">Guyana</span></span>'>Guyana</option>
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" /><span class="text-truncate">Haiti</span></span>'>Haiti</option>
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" /><span class="text-truncate">Holy See</span></span>'>Holy See</option>
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" /><span class="text-truncate">Honduras</span></span>'>Honduras</option>
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" /><span class="text-truncate">Hong Kong</span></span>'>Hong Kong</option>
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" /><span class="text-truncate">Hungary</span></span>'>Hungary</option>
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" /><span class="text-truncate">Iceland</span></span>'>Iceland</option>
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/in.svg" alt="India Flag" /><span class="text-truncate">India</span></span>'>India</option>
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" /><span class="text-truncate">Indonesia</span></span>'>Indonesia</option>
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" /><span class="text-truncate">Iran (Islamic Republic of)</span></span>'>Iran (Islamic Republic of)</option>
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" /><span class="text-truncate">Iraq</span></span>'>Iraq</option>
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" /><span class="text-truncate">Ireland</span></span>'>Ireland</option>
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" /><span class="text-truncate">Isle of Man</span></span>'>Isle of Man</option>
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" /><span class="text-truncate">Israel</span></span>'>Israel</option>
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" /><span class="text-truncate">Italy</span></span>'>Italy</option>
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" /><span class="text-truncate">Jamaica</span></span>'>Jamaica</option>
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" /><span class="text-truncate">Japan</span></span>'>Japan</option>
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" /><span class="text-truncate">Jersey</span></span>'>Jersey</option>
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" /><span class="text-truncate">Jordan</span></span>'>Jordan</option>
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" /><span class="text-truncate">Kazakhstan</span></span>'>Kazakhstan</option>
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" /><span class="text-truncate">Kenya</span></span>'>Kenya</option>
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" /><span class="text-truncate">Kiribati</span></span>'>Kiribati</option>
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" /><span class="text-truncate">Kuwait</span></span>'>Kuwait</option>
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" /><span class="text-truncate">Kyrgyzstan</span></span>'>Kyrgyzstan</option>
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" /><span class="text-truncate">Laos</span></span>'>Laos</option>
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" /><span class="text-truncate">Latvia</span></span>'>Latvia</option>
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" /><span class="text-truncate">Lebanon</span></span>'>Lebanon</option>
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" /><span class="text-truncate">Lesotho</span></span>'>Lesotho</option>
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" /><span class="text-truncate">Liberia</span></span>'>Liberia</option>
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" /><span class="text-truncate">Libya</span></span>'>Libya</option>
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" /><span class="text-truncate">Liechtenstein</span></span>'>Liechtenstein</option>
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" /><span class="text-truncate">Lithuania</span></span>'>Lithuania</option>
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" /><span class="text-truncate">Luxembourg</span></span>'>Luxembourg</option>
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" /><span class="text-truncate">Macau</span></span>'>Macau</option>
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" /><span class="text-truncate">Madagascar</span></span>'>Madagascar</option>
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" /><span class="text-truncate">Malawi</span></span>'>Malawi</option>
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" /><span class="text-truncate">Malaysia</span></span>'>Malaysia</option>
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" /><span class="text-truncate">Maldives</span></span>'>Maldives</option>
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" /><span class="text-truncate">Mali</span></span>'>Mali</option>
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" /><span class="text-truncate">Malta</span></span>'>Malta</option>
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" /><span class="text-truncate">Marshall Islands</span></span>'>Marshall Islands</option>
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" /><span class="text-truncate">Martinique</span></span>'>Martinique</option>
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" /><span class="text-truncate">Mauritania</span></span>'>Mauritania</option>
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" /><span class="text-truncate">Mauritius</span></span>'>Mauritius</option>
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" /><span class="text-truncate">Mayotte</span></span>'>Mayotte</option>
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" /><span class="text-truncate">Mexico</span></span>'>Mexico</option>
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" /><span class="text-truncate">Moldova</span></span>'>Moldova</option>
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" /><span class="text-truncate">Monaco</span></span>'>Monaco</option>
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" /><span class="text-truncate">Mongolia</span></span>'>Mongolia</option>
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" /><span class="text-truncate">Montenegro</span></span>'>Montenegro</option>
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" /><span class="text-truncate">Montserrat</span></span>'>Montserrat</option>
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" /><span class="text-truncate">Morocco</span></span>'>Morocco</option>
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" /><span class="text-truncate">Mozambique</span></span>'>Mozambique</option>
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" /><span class="text-truncate">Myanmar</span></span>'>Myanmar</option>
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" /><span class="text-truncate">Namibia</span></span>'>Namibia</option>
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" /><span class="text-truncate">Nauru</span></span>'>Nauru</option>
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" /><span class="text-truncate">Nepal</span></span>'>Nepal</option>
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" /><span class="text-truncate">Netherlands</span></span>'>Netherlands</option>
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" /><span class="text-truncate">New Caledonia</span></span>'>New Caledonia</option>
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" /><span class="text-truncate">New Zealand</span></span>'>New Zealand</option>
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" /><span class="text-truncate">Nicaragua</span></span>'>Nicaragua</option>
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" /><span class="text-truncate">Niger</span></span>'>Niger</option>
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" /><span class="text-truncate">Nigeria</span></span>'>Nigeria</option>
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" /><span class="text-truncate">Niue</span></span>'>Niue</option>
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" /><span class="text-truncate">Norfolk Island</span></span>'>Norfolk Island</option>
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" /><span class="text-truncate">North Korea</span></span>'>North Korea</option>
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" /><span class="text-truncate">North Macedonia</span></span>'>North Macedonia</option>
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" /><span class="text-truncate">Northern Ireland</span></span>'>Northern Ireland</option>
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" /><span class="text-truncate">Northern Mariana Islands</span></span>'>Northern Mariana Islands</option>
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" /><span class="text-truncate">Norway</span></span>'>Norway</option>
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" /><span class="text-truncate">Oman</span></span>'>Oman</option>
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" /><span class="text-truncate">Pakistan</span></span>'>Pakistan</option>
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" /><span class="text-truncate">Palau</span></span>'>Palau</option>
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" /><span class="text-truncate">Panama</span></span>'>Panama</option>
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" /><span class="text-truncate">Papua New Guinea</span></span>'>Papua New Guinea</option>
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" /><span class="text-truncate">Paraguay</span></span>'>Paraguay</option>
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" /><span class="text-truncate">Peru</span></span>'>Peru</option>
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" /><span class="text-truncate">Philippines</span></span>'>Philippines</option>
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" /><span class="text-truncate">Pitcairn</span></span>'>Pitcairn</option>
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" /><span class="text-truncate">Poland</span></span>'>Poland</option>
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" /><span class="text-truncate">Portugal</span></span>'>Portugal</option>
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" /><span class="text-truncate">Puerto Rico</span></span>'>Puerto Rico</option>
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" /><span class="text-truncate">Qatar</span></span>'>Qatar</option>
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" /><span class="text-truncate">Republic of the Congo</span></span>'>Republic of the Congo</option>
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" /><span class="text-truncate">Romania</span></span>'>Romania</option>
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" /><span class="text-truncate">Russia</span></span>'>Russia</option>
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" /><span class="text-truncate">Rwanda</span></span>'>Rwanda</option>
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" /><span class="text-truncate">Réunion</span></span>'>Réunion</option>
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" /><span class="text-truncate">Saint Barthélemy</span></span>'>Saint Barthélemy</option>
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" /><span class="text-truncate">Saint Helena, Ascension and Tristan da Cunha</span></span>'>Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" /><span class="text-truncate">Saint Kitts and Nevis</span></span>'>Saint Kitts and Nevis</option>
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" /><span class="text-truncate">Saint Lucia</span></span>'>Saint Lucia</option>
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" /><span class="text-truncate">Saint Martin</span></span>'>Saint Martin</option>
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" /><span class="text-truncate">Saint Pierre and Miquelon</span></span>'>Saint Pierre and Miquelon</option>
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" /><span class="text-truncate">Saint Vincent and the Grenadines</span></span>'>Saint Vincent and the Grenadines</option>
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" /><span class="text-truncate">Samoa</span></span>'>Samoa</option>
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" /><span class="text-truncate">San Marino</span></span>'>San Marino</option>
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" /><span class="text-truncate">Sao Tome and Principe</span></span>'>Sao Tome and Principe</option>
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" /><span class="text-truncate">Saudi Arabia</span></span>'>Saudi Arabia</option>
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" /><span class="text-truncate">Scotland</span></span>'>Scotland</option>
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" /><span class="text-truncate">Senegal</span></span>'>Senegal</option>
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" /><span class="text-truncate">Serbia</span></span>'>Serbia</option>
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" /><span class="text-truncate">Seychelles</span></span>'>Seychelles</option>
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" /><span class="text-truncate">Sierra Leone</span></span>'>Sierra Leone</option>
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" /><span class="text-truncate">Singapore</span></span>'>Singapore</option>
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" /><span class="text-truncate">Sint Maarten</span></span>'>Sint Maarten</option>
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" /><span class="text-truncate">Slovakia</span></span>'>Slovakia</option>
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" /><span class="text-truncate">Slovenia</span></span>'>Slovenia</option>
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" /><span class="text-truncate">Solomon Islands</span></span>'>Solomon Islands</option>
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" /><span class="text-truncate">Somalia</span></span>'>Somalia</option>
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" /><span class="text-truncate">South Africa</span></span>'>South Africa</option>
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" /><span class="text-truncate">South Georgia and the South Sandwich Islands</span></span>'>South Georgia and the South Sandwich Islands</option>
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" /><span class="text-truncate">South Korea</span></span>'>South Korea</option>
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" /><span class="text-truncate">South Sudan</span></span>'>South Sudan</option>
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" /><span class="text-truncate">Spain</span></span>'>Spain</option>
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" /><span class="text-truncate">Sri Lanka</span></span>'>Sri Lanka</option>
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" /><span class="text-truncate">State of Palestine</span></span>'>State of Palestine</option>
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" /><span class="text-truncate">Sudan</span></span>'>Sudan</option>
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" /><span class="text-truncate">Suriname</span></span>'>Suriname</option>
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" /><span class="text-truncate">Svalbard and Jan Mayen</span></span>'>Svalbard and Jan Mayen</option>
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" /><span class="text-truncate">Swaziland</span></span>'>Swaziland</option>
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" /><span class="text-truncate">Sweden</span></span>'>Sweden</option>
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" /><span class="text-truncate">Switzerland</span></span>'>Switzerland</option>
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" /><span class="text-truncate">Syrian Arab Republic</span></span>'>Syrian Arab Republic</option>
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" /><span class="text-truncate">Taiwan</span></span>'>Taiwan</option>
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" /><span class="text-truncate">Tajikistan</span></span>'>Tajikistan</option>
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" /><span class="text-truncate">Tanzania</span></span>'>Tanzania</option>
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" /><span class="text-truncate">Thailand</span></span>'>Thailand</option>
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" /><span class="text-truncate">Timor-Leste</span></span>'>Timor-Leste</option>
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" /><span class="text-truncate">Togo</span></span>'>Togo</option>
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" /><span class="text-truncate">Tokelau</span></span>'>Tokelau</option>
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" /><span class="text-truncate">Tonga</span></span>'>Tonga</option>
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" /><span class="text-truncate">Trinidad and Tobago</span></span>'>Trinidad and Tobago</option>
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" /><span class="text-truncate">Tunisia</span></span>'>Tunisia</option>
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" /><span class="text-truncate">Turkey</span></span>'>Turkey</option>
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" /><span class="text-truncate">Turkmenistan</span></span>'>Turkmenistan</option>
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" /><span class="text-truncate">Turks and Caicos Islands</span></span>'>Turks and Caicos Islands</option>
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" /><span class="text-truncate">Tuvalu</span></span>'>Tuvalu</option>
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" /><span class="text-truncate">Uganda</span></span>'>Uganda</option>
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" /><span class="text-truncate">Ukraine</span></span>'>Ukraine</option>
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" /><span class="text-truncate">United Arab Emirates</span></span>'>United Arab Emirates</option>
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" /><span class="text-truncate">United Kingdom</span></span>'>United Kingdom</option>
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" /><span class="text-truncate">United States Minor Outlying Islands</span></span>'>United States Minor Outlying Islands</option>
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" /><span class="text-truncate">United States of America</span></span>'>United States of America</option>
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" /><span class="text-truncate">Uruguay</span></span>'>Uruguay</option>
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" /><span class="text-truncate">Uzbekistan</span></span>'>Uzbekistan</option>
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" /><span class="text-truncate">Vanuatu</span></span>'>Vanuatu</option>
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" /><span class="text-truncate">Venezuela (Bolivarian Republic of)</span></span>'>Venezuela (Bolivarian Republic of)</option>
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" /><span class="text-truncate">Vietnam</span></span>'>Vietnam</option>
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" /><span class="text-truncate">Virgin Islands (British)</span></span>'>Virgin Islands (British)</option>
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" /><span class="text-truncate">Virgin Islands (U.S.)</span></span>'>Virgin Islands (U.S.)</option>
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" /><span class="text-truncate">Wales</span></span>'>Wales</option>
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" /><span class="text-truncate">Wallis and Futuna</span></span>'>Wallis and Futuna</option>
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" /><span class="text-truncate">Western Sahara</span></span>'>Western Sahara</option>
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" /><span class="text-truncate">Yemen</span></span>'>Yemen</option>
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" /><span class="text-truncate">Zambia</span></span>'>Zambia</option>
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" /><span class="text-truncate">Zimbabwe</span></span>'>Zimbabwe</option>
</select>
</div>
<!-- End Select -->
<div class="mb-3">
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City" value="London">
</div>
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="addressLine1Label" class="col-sm-3 col-form-label form-label">Address line 1</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address" value="45 Roker Terrace, Latheronwheel">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="js-add-field row mb-4"
data-hs-add-field-options='{
"template": "#addAddressFieldTemplate",
"container": "#addAddressFieldContainer",
"defaultCreated": 0
}'>
<label for="addressLine2Label" class="col-sm-3 col-form-label form-label">Address line 2 <span class="form-label-secondary">(Optional)</span></label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine2" id="addressLine2Label" placeholder="Your address" aria-label="Your address">
<!-- Container For Input Field -->
<div id="addAddressFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus-circle me-1"></i> Add address
</a>
</div>
</div>
<!-- End Form -->
<!-- Add Phone Input Field -->
<div id="addAddressFieldTemplate" style="display: none; position: relative;">
<div class="input-group-add-field">
<input type="text" class="form-control" data-name="addressLine" placeholder="Your address" aria-label="Your address">
</div>
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="bi-x-lg"></i>
</a>
</div>
<!-- End Add Phone Input Field -->
<!-- Form -->
<div class="row mb-4">
<label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Zip code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find your code in a postal address."></i></label>
<div class="col-sm-9">
<input type="text" class="js-input-mask form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code" value="KW5 8NW"
data-hs-mask-options='{
"mask": "aa0 0aa"
}'>
</div>
</div>
<!-- End Form -->
</form>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer pt-0">
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<a class="btn btn-primary" href="javascript:;">Save changes</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-header-title">Privacy</h4>
</div>
<!-- Body -->
<div class="card-body">
<form>
<!-- Form -->
<div class="row mb-4">
<div class="col-sm-3">
<span class="d-block small mb-2">Who can see your profile photo? <i class="bi-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Your visibility setting only applies to your profile photo. Your header image is always visible to anyone."></i></span>
</div>
<div class="col-sm-9">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select">
<option value="privacy1" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("../assets/vendor/duotone-icons/hom/hom006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semibold">Anyone</span><span class="tom-select-custom-hide small">Visible to anyone who can view your content. Accessible by installed apps.</span></div></div>'>Anyone</option>
<option value="privacy2" data-option-template='<div class="d-flex align-items-start"><div class="flex-shrink-0"><span class="svg-icon svg-icon-xs text-muted mt-0">@@include("../assets/vendor/duotone-icons/com/com006.svg")</span></div><div class="flex-grow-1 ms-2"><span class="d-block fw-semibold">Only you</span><span class="tom-select-custom-hide small">Only visible to you.</span></div></div>'>Only you</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Form -->
</form>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h4 class="card-header-title">Delete your account</h4>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">When you delete your account, you lose access to Front account services, and we permanently delete your personal data. You can cancel the deletion for 14 days.</p>
<div class="mb-4">
<!-- Check -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="deleteAccountCheckbox">
<label class="form-check-label" for="deleteAccountCheckbox">Confirm that I want to delete my account.</label>
</div>
<!-- End Check -->
</div>
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Content -->
<link rel="stylesheet" href="../node_modules/quill/dist/quill.snow.css">
<link rel="stylesheet" href="../node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
<script src="../assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
<script src="../node_modules/imask/dist/imask.min.js"></script>
<script src="../node_modules/quill/dist/quill.min.js"></script>
<script src="../node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.imask.js"></script>
<script src="../assets/js/hs.quill.js"></script>
<script src="../assets/js/hs.tom-select.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF FILE ATTACH
// =======================================================
new HSFileAttach('.js-file-attach')
// INITIALIZATION OF ADD FIELD
// =======================================================
new HSAddField('.js-add-field', {
addedField: el => {
el.querySelectorAll('.js-select-dynamic').forEach(item => {
HSCore.components.HSTomSelect.init(item)
})
el.querySelectorAll('.js-input-mask-dynamic').forEach(item => {
HSCore.components.HSMask.init(item)
})
}
})
// INITIALIZATION OF INPUT MASK
// =======================================================
HSCore.components.HSMask.init('.js-input-mask')
// INITIALIZATION OF QUILLJS EDITOR
// =======================================================
HSCore.components.HSQuill.init('.js-quill')
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select', {
render: {
'option': function(data, escape) {
return data.optionTemplate || `<div>${data.text}</div>>`
},
'item': function(data, escape) {
return data.optionTemplate || `<div>${data.text}</div>>`
}
}
})
})()
</script>
Component #2
Two-step verification
DisabledStart by entering your password so that we know it's you. Then we'll walk you through two more simple steps.
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<div class="d-flex align-items-center">
<h5 class="card-header-title">Two-step verification</h5>
<span class="badge bg-soft-danger text-danger ms-2">Disabled</span>
</div>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">Start by entering your password so that we know it's you. Then we'll walk you through two more simple steps.</p>
<form>
<!-- Form -->
<div class="row mb-4">
<label for="accountPasswordLabel" class="col-sm-3 col-form-label form-label">Account password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="currentPassword" id="accountPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
<small class="form-text">This is the password you use to log in to your Front account.</small>
</div>
</div>
<!-- End Form -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Set up</button>
</div>
</form>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #3
Password
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-header-title">Password</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="row mb-4">
<label for="currentPasswordLabel" class="col-sm-3 col-form-label form-label">Current password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="currentPassword" id="currentPasswordLabel" placeholder="Enter current password" aria-label="Enter current password">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="newPassword" class="col-sm-3 col-form-label form-label">New password</label>
<div class="col-sm-9">
<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="Enter new password" aria-label="Enter new password">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="confirmNewPasswordLabel" class="col-sm-3 col-form-label form-label">Confirm new password</label>
<div class="col-sm-9">
<div class="mb-3">
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPasswordLabel" placeholder="Confirm your new password" aria-label="Confirm your new password">
</div>
<h5>Password requirements:</h5>
<p class="card-text small">Ensure that these requirements are met:</p>
<ul class="small">
<li>Minimum 8 characters long - the more, the better</li>
<li>At least one lowercase character</li>
<li>At least one uppercase character</li>
<li>At least one number, symbol, or whitespace character</li>
</ul>
</div>
</div>
<!-- End Form -->
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<button type="submit" class="btn btn-primary">Update Password</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #4
Connected accounts
Integrated features from these accounts make it easier to collaborate with people you know on Front.
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-header-title">Connected accounts</h5>
</div>
<!-- Body -->
<div class="card-body">
<p class="card-text">Integrated features from these accounts make it easier to collaborate with people you know on Front.</p>
<!-- Form -->
<form>
<!-- List Group -->
<div class="list-group list-group-flush list-group-no-gutters">
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-4x3" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Google</h6>
<span class="d-block small text-body">Calendar and contacts</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts1">
<label class="form-check-label" for="connectedAccounts1"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-4x3" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Dropbox</h6>
<span class="d-block small text-body">File hosting</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts2">
<label class="form-check-label" for="connectedAccounts2"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-4x3" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Slack</h6>
<span class="d-block small text-body">Communication <a class="link" href="#">Learn more</a></span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts3" checked>
<label class="form-check-label" for="connectedAccounts3"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-4x3" src="../assets/svg/brands/mailchimp-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Mailchimp</h6>
<span class="d-block small text-body">Email marketing service</span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts4" checked>
<label class="form-check-label" for="connectedAccounts4"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-4x3" src="../assets/svg/brands/jira-icon.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row align-items-center">
<div class="col">
<h6 class="mb-1">Jira</h6>
<span class="d-block small text-body">Issue tracking <a class="link" href="#">Learn more</a></span>
</div>
<!-- End Col -->
<div class="col-auto">
<!-- Form Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="connectedAccounts5">
<label class="form-check-label" for="connectedAccounts5"></label>
</div>
<!-- End Form Switch -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End List Group -->
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #5
Social accounts
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-header-title">Social accounts</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- List Group -->
<div class="list-group list-group-flush list-group-no-gutters">
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-twitter list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Twitter</h6>
<a class="link-sm" href="#">www.twitter.com/htmlstream</a>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-facebook list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Facebook</h6>
<a class="link-sm" href="#">www.facebook.com/htmlstream</a>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-github list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">GitHub</h6>
<small class="text-secondary small">Not connected</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-linkedin list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Linkedin</h6>
<a class="link-sm" href="#">www.linkedin.com/htmlstream</a>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Disconnect</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-slack list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Slack</h6>
<small class="text-secondary small">Not connected</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Connect</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End List Group -->
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #6
Device history
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-header-title">Device history</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- List Group -->
<div class="list-group list-group-flush list-group-no-gutters">
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-laptop list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Dell XPS 15 <span class="badge bg-primary ms-1">Current</span></h6>
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item"><span class="fw-semibold">IP address:</span> 213.230.93.79</li>
<li class="list-inline-item"><span class="fw-semibold">Last active:</span> Now</li>
</ul>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-display list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Microsoft Studio 2</h6>
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item"><span class="fw-semibold">IP address:</span> 213.230.93.79</li>
<li class="list-inline-item"><span class="fw-semibold">Last active:</span> 3 days ago</li>
</ul>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<i class="bi-phone list-group-icon"></i>
</div>
<div class="flex-grow-1">
<div class="row align-items-center">
<div class="col-sm mb-1 mb-sm-0">
<h6 class="mb-1">Google Pixel 3a</h6>
<ul class="list-inline list-separator text-body small">
<li class="list-inline-item"><span class="fw-semibold">IP address:</span> 213.230.93.79</li>
<li class="list-inline-item"><span class="fw-semibold">Last active:</span> 22 minutes ago</li>
</ul>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<a class="btn btn-white btn-xs" href="javascript:;">Log out</a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</div>
<!-- End Item -->
</div>
<!-- End List Group -->
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
Component #7
Preferences
<!-- Card -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title">Preferences</h5>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="row mb-4">
<label for="languageLabel" class="col-sm-3 col-form-label form-label">Language</label>
<div class="col-sm-9">
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select" id="languageLabel">
<option value="language2" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cn.svg" alt="Image description" width="16"/><span>中文 (繁體)</span></div></div>'>中文 (繁體)</option>
<option value="language3" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Image description" width="16"/><span>Čeština</span></div></div>'>Čeština</option>
<option value="language4" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Image description" width="16"/><span>Dansk</span></div></div>'>Dansk</option>
<option value="language5" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Image description" width="16"/><span>Nederlands</span></div></div>'>Nederlands</option>
<option value="language6" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/us.svg" alt="Image description" width="16"/><span>English (US)</span></div></div>'>English (US)</option>
<option value="language7" selected data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Image description" width="16"/><span>English (UK)</span></div></div>'>English (UK)</option>
<option value="language8" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Image description" width="16"/><span>Suomi</span></div></div>'>Suomi</option>
<option value="language10" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/fr.svg" alt="Image description" width="16"/><span>Français</span></div></div>'>Français</option>
<option value="language11" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/de.svg" alt="Image description" width="16"/><span>Deutsch</span></div></div>'>Deutsch</option>
<option value="language12" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Image description" width="16"/><span>Magyar</span></div></div>'>Magyar</option>
<option value="language13" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/is.svg" alt="Image description" width="16"/><span>Íslenska</span></div></div>'>Íslenska</option>
<option value="language14" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/it.svg" alt="Image description" width="16"/><span>Italiano</span></div></div>'>Italiano</option>
<option value="language15" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Image description" width="16"/><span>日本語</span></div></div>'>日本語</option>
<option value="language16" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/kr.svg" alt="Image description" width="16"/><span>한국어</span></div></div>'>한국어</option>
<option value="language17" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Image description" width="16"/><span>Eesti</span></div></div>'>Eesti</option>
<option value="language9" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/no.svg" alt="Image description" width="16"/><span>Norsk</span></div></div>'>Norsk</option>
<option value="language18" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Image description" width="16"/><span>Polski</span></div></div>'>Polski</option>
<option value="language19" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/br.svg" alt="Image description" width="16"/><span>Português (Brasil)</span></div></div>'>Português (Brasil)</option>
<option value="language20" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Image description" width="16"/><span>Português (Portugal)</span></div></div>'>Português (Portugal)</option>
<option value="language21" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Image description" width="16"/><span>Română</span></div></div>'>Română</option>
<option value="language22" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Image description" width="16"/><span>Русский</span></div></div>'>Русский</option>
<option value="language23" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Image description" width="16"/><span>Slovenčina</span></div></div>'>Slovenčina</option>
<option value="language24" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/th.svg" alt="Image description" width="16"/><span>ภาษาไทย</span></div></div>'>ภาษาไทย</option>
<option value="language25" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Image description" width="16"/><span>Türkçe</span></div></div>'>Türkçe</option>
<option value="language26" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/es.svg" alt="Image description" width="16"/><span>Español</span></div></div>'>Español</option>
<option value="language27" data-option-template='<div><div><img class="avatar avatar-xss avatar-circle me-2" src="../node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Image description" width="16"/><span>Українська</span></div></div>'>Українська</option>
</select>
</div>
<!-- End Select -->
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="timeZoneLabel" class="col-sm-3 col-form-label form-label">Time zone</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="currentPassword" id="timeZoneLabel" placeholder="Your time zone" aria-label="Your time zone" value="GMT+01:00" readonly>
</div>
</div>
<!-- End Form -->
<div class="d-grid gap-3">
<!-- Form Switch -->
<label class="row toggle-switch" for="accountPreferencesSwitch1">
<span class="col-8 col-sm">
<span class="card-text text-dark mb-0">Early release</span>
<span class="card-text d-block small">Get included on early releases for new Front features.</span>
</span>
<span class="col-4 col-sm-auto">
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch1">
</span>
</span>
</label>
<!-- End Form Switch -->
<!-- Form Switch -->
<label class="row toggle-switch" for="accountPreferencesSwitch2">
<span class="col-8 col-sm">
<span class="card-text text-dark mb-0">See info about people who view my profile</span>
<span class="card-text d-block small"><a class="link" href="#">More about viewer info</a>.</span>
</span>
<span class="col-4 col-sm-auto">
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="accountPreferencesSwitch2">
</span>
</span>
</label>
<!-- End Form Switch -->
</div>
<div class="d-flex justify-content-end gap-3 mt-3">
<a class="btn btn-white" href="javascript:;">Cancel</a>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.tom-select.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select', {
render: {
'option': function(data, escape) {
return data.optionTemplate
},
'item': function(data, escape) {
return data.optionTemplate
}
}
})
})()
</script>
Component #8
3 orders placed in
-
Total $999.00Ship to Natalie CurtisOrder no. 456853648Shipped date: 30 April, 2020
It's delivered!
-
Total $125.00Ship to Natalie CurtisOrder no. 428766351Shipped date: 08 February, 2020
It's delivered!
-
Total $57.00Ship to Natalie CurtisOrder no. 415338178Shipped date: 14 May, 2020
It's delivered!
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header border-bottom">
<form class="input-group input-group-merge">
<div class="input-group-prepend input-group-text">
<i class="bi-search"></i>
</div>
<input type="search" class="form-control" placeholder="Search orders" aria-label="Search orders">
</form>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<!-- Nav Scroller -->
<div class="js-nav-scroller hs-nav-scroller-horizontal">
<span class="hs-nav-scroller-arrow-prev" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-left"></i>
</a>
</span>
<span class="hs-nav-scroller-arrow-next" style="display: none;">
<a class="hs-nav-scroller-arrow-link" href="javascript:;">
<i class="bi-chevron-right"></i>
</a>
</span>
<!-- Nav -->
<ul class="nav nav-segment nav-fill mb-7" id="featuresTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" href="#accountOrdersOne" id="accountOrdersOne-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersOne" role="tab" aria-controls="accountOrdersOne" aria-selected="true">Orders</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#accountOrdersTwo" id="accountOrdersTwo-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersTwo" role="tab" aria-controls="accountOrdersTwo" aria-selected="false">Open Orders</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#accountOrdersThree" id="accountOrdersThree-tab" data-bs-toggle="tab" data-bs-target="#accountOrdersThree" role="tab" aria-controls="accountOrdersThree" aria-selected="false">Canceled Orders</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- End Nav Scroller -->
<!-- Tab Content -->
<div class="tab-content" id="accountOrdersTabContent">
<div class="tab-pane fade show active" id="accountOrdersOne" role="tabpanel" aria-labelledby="accountOrdersOne-tab">
<!-- Select Group -->
<div class="d-sm-flex align-items-sm-center mb-5">
<div class="mb-2 mb-sm-0 me-3">
<span><strong class="text-dark">3 orders</strong> placed in</span>
</div>
<!-- Select -->
<div class="tom-select-custom">
<select class="js-select form-select form-select-sm">
<option value="last 30 days">last 30 days</option>
<option value="past 6 months" selected>past 6 months</option>
<option value="2019">2019</option>
</select>
</div>
<!-- End Select -->
</div>
<!-- End Select Group -->
<ul class="list-unstyled mb-5">
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Total</small>
<small class="text-dark fw-semibold">$999.00</small>
</div>
<!-- End Col -->
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Ship to</small>
<small class="text-dark fw-semibold">Natalie Curtis</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Order no.</small>
<small class="text-dark fw-semibold">456853648</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Shipped date:</small>
<small class="text-dark fw-semibold">30 April, 2020</small>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row gx-2">
<div class="col">
<img class="img-fluid" src="../assets/img/380x360/img6.jpg" alt="Image Description">
</div>
<div class="col">
<img class="img-fluid" src="../assets/img/380x360/img4.jpg" alt="Image Description">
</div>
<div class="col">
<img class="img-fluid" src="../assets/img/380x360/img5.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<div class="d-grid gap-2">
<a class="btn btn-white btn-sm" href="#">
<i class="bi-basket small me-2"></i> View order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-truck small me-2"></i> Track order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
</a>
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
</div>
</div>
</div>
</div>
</li>
<!-- End Card -->
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Total</small>
<small class="text-dark fw-semibold">$125.00</small>
</div>
<!-- End Col -->
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Ship to</small>
<small class="text-dark fw-semibold">Natalie Curtis</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Order no.</small>
<small class="text-dark fw-semibold">428766351</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Shipped date:</small>
<small class="text-dark fw-semibold">08 February, 2020</small>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row gx-2">
<div class="col-4">
<img class="img-fluid" src="../assets/img/380x360/img1.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<div class="d-grid gap-2">
<a class="btn btn-white btn-sm" href="#">
<i class="bi-basket small me-2"></i> View order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-truck small me-2"></i> Track order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
</a>
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
</div>
</div>
</div>
</div>
<!-- End List Item -->
</li>
<!-- End End Card -->
<!-- Card -->
<li class="card card-bordered shadow-none mb-3">
<div class="card-body">
<div class="row">
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Total</small>
<small class="text-dark fw-semibold">$57.00</small>
</div>
<!-- End Col -->
<div class="col-6 col-md mb-3 mb-md-0">
<small class="card-subtitle mb-0">Ship to</small>
<small class="text-dark fw-semibold">Natalie Curtis</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Order no.</small>
<small class="text-dark fw-semibold">415338178</small>
</div>
<!-- End Col -->
<div class="col-6 col-md">
<small class="card-subtitle mb-0">Shipped date:</small>
<small class="text-dark fw-semibold">14 May, 2020</small>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<hr>
<div class="row">
<div class="col-md-8">
<h5>It's delivered!</h5>
<div class="row gx-2">
<div class="col-4">
<img class="img-fluid" src="../assets/img/380x360/img2.jpg" alt="Image Description">
</div>
<div class="col-4">
<img class="img-fluid" src="../assets/img/380x360/img7.jpg" alt="Image Description">
</div>
</div>
<!-- End Row -->
</div>
<div class="col-md-4">
<div class="d-grid gap-2">
<a class="btn btn-white btn-sm" href="#">
<i class="bi-basket small me-2"></i> View order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-truck small me-2"></i> Track order
</a>
<a class="btn btn-white btn-sm" href="#">
<i class="bi-arrow-counterclockwise small me-2"></i> Return item
</a>
<a class="btn btn-primary btn-sm" href="#">Buy it again</a>
</div>
</div>
</div>
</div>
<!-- End List Item -->
</li>
<!-- End End Card -->
</ul>
<!-- Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">Prev</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">Next</a>
</li>
</ul>
</nav>
<!-- End Pagination -->
</div>
<div class="tab-pane fade" id="accountOrdersTwo" role="tabpanel" aria-labelledby="accountOrdersTwo-tab">
<!-- Empty State -->
<div class="text-center content-space-1">
<img class="avatar avatar-xl mb-3" src="../assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
<p class="card-text">No data to show</p>
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
</div>
<!-- End Empty State -->
</div>
<div class="tab-pane fade" id="accountOrdersThree" role="tabpanel" aria-labelledby="accountOrdersThree-tab">
<!-- Empty State -->
<div class="text-center content-space-1">
<img class="avatar avatar-xl mb-3" src="../assets/svg/illustrations/empty-state-no-data.svg" alt="Image Description">
<p class="card-text">No data to show</p>
<a class="btn btn-white btn-sm" href="#">Start shopping</a>
</div>
<!-- End Empty State -->
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<link rel="stylesheet" href="../node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.tom-select.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select', {
render: {
'option': function(data, escape) {
return data.optionTemplate
},
'item': function(data, escape) {
return data.optionTemplate
}
}
})
})()
</script>
Component #9
<!-- Card -->
<div class="card">
<div class="card-header d-sm-flex justify-content-sm-between align-items-sm-center border-bottom">
<h5 class="card-header-title">Recently added</h5>
<span>2 items</span>
</div>
<!-- Body -->
<div class="card-body">
<!-- Form -->
<form>
<!-- List Group -->
<ul class="list-group list-group-flush list-group-no-gutters">
<!-- Item -->
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img2.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm-7 mb-3 mb-sm-0">
<h5><a class="text-dark" href="#">Originals national backpack</a></h5>
<div class="d-block d-sm-none">
<h5 class="mb-1">$29.99</h5>
</div>
<div class="d-grid gap-1">
<div class="text-body">
<span class="small">Gender:</span>
<span class="fw-semibold small">Men</span>
</div>
<div class="text-body">
<span class="small">Color:</span>
<span class="fw-semibold small">Grey</span>
</div>
<div class="text-body">
<span class="small">Size:</span>
<span class="fw-semibold small">One size</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-sm-3">
<div class="row">
<div class="col-auto">
<!-- Select -->
<select class="form-select form-select-sm mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
<!-- End Select -->
</div>
<div class="col-auto">
<div class="d-grid gap-2">
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-trash me-1"></i> Remove
</a>
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-heart me-1"></i> Save for later
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-xl avatar-4x3" src="../assets/img/320x320/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm-7 mb-3 mb-sm-0">
<h5><a class="text-dark" href="#">Vans large image t-shirt</a></h5>
<div class="d-block d-sm-none">
<h5 class="mb-1">$43.99</h5>
</div>
<div class="d-grid gap-1">
<div class="text-body">
<span class="small">Gender:</span>
<span class="fw-semibold small">Women</span>
</div>
<div class="text-body">
<span class="small">Color:</span>
<span class="fw-semibold small">Core Black / Carbon</span>
</div>
<div class="text-body">
<span class="small">Size:</span>
<span class="fw-semibold small">S</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col-sm-3">
<div class="row">
<div class="col-auto">
<!-- Select -->
<select class="form-select form-select-sm mb-3">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
<option value="quantity6">6</option>
<option value="quantity7">7</option>
<option value="quantity8">8</option>
<option value="quantity9">9</option>
<option value="quantity10">10</option>
</select>
<!-- End Select -->
</div>
<div class="col-auto">
<div class="d-grid gap-2">
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-trash me-1"></i> Remove
</a>
<a class="link-sm link-secondary small" href="javascript:;">
<i class="bi-heart me-1"></i> Save for later
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Col -->
<div class="col-4 col-sm-2 d-none d-sm-inline-block text-right">
<span class="h5 d-block mb-1">$29.99</span>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
</form>
<!-- End Form -->
</div>
<!-- End Body -->
<a class="card-footer card-link text-center border-top" href="#">Continue shopping</a>
</div>
<!-- End Card -->
Component #10
Overview
Download .CSV
Your plan (billed yearly):
Starter - April 2020
Total per year
$264 USD
Storage usage
4.27 GB used of 6 GB
Personal usage space
Shared space
Unused space
Payment method
Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.
-
Maria Williams Primary
MasterCard •••• 4242 Checking - Expires 12/22 -
Maria Williams Expired
Visa •••• 9016 Debit - Expires 04/20
Add a new card
Order history
| Reference | Status | Amount | Updated | Invoice | |
|---|---|---|---|---|---|
| #3682303 | Pending | $264 | 22/04/2020 | Quick view | |
| #2333234 | Successful | $264 | 22/04/2019 | Quick view | |
| #9834283 | Successful | $264 | 22/04/2018 | Quick view |
Edit card
Add card
Invoice from Front
Invoice #3682303
Amount paid:
$316.8
Date paid:
April 22, 2020
Payment method:
•••• 4242
•••• 4242
-
Payment to Front $264.00
-
Tax fee $52.8
-
Amount paid $316.8
If you have any questions, please contact us at example@gmail.com or call at +1 898 34-5492
<div class="d-grid gap-3 gap-lg-5">
<!-- Card -->
<div class="card mb-3 mb-lg-5">
<!-- Header -->
<div class="card-header d-sm-flex justify-content-sm-between align-items-sm-center border-bottom">
<h5 class="card-header-title">Overview</h5>
<a class="btn btn-ghost-secondary btn-sm" href="#">
<i class="bi-file-earmark-arrow-down me-1"></i> Download .CSV
</a>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="row">
<div class="col-md mb-4 mb-md-0">
<div class="mb-4">
<span class="card-subtitle">Your plan (billed yearly):</span>
<h5>Starter - April 2020</h5>
</div>
<div>
<span class="card-subtitle">Total per year</span>
<h3 class="text-primary">$264 USD</h3>
</div>
</div>
<!-- End Col -->
<div class="col-md-auto">
<div class="d-grid d-md-flex gap-3">
<a class="btn btn-white btn-sm" href="#">Cancel subscription</a>
<a class="btn btn-primary btn-sm btn-transition" href="../page-pricing.html">Update plan</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Body -->
<hr class="my-3">
<!-- Body -->
<div class="card-body">
<div class="row align-items-center flex-grow-1 mb-2">
<div class="col">
<h4 class="card-header-title">Storage usage</h4>
</div>
<!-- End Col -->
<div class="col-auto">
<span class="text-dark fw-semibold">4.27 GB</span> used of 6 GB
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- Progress -->
<div class="progress rounded-pill mb-3">
<div class="progress-bar" role="progressbar" style="width: 33%;" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar" role="progressbar" style="width: 25%; opacity: .6" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- End Progress -->
<!-- Legend Indicators -->
<div class="list-inline">
<div class="list-inline-item">
<span class="legend-indicator bg-primary"></span>Personal usage space
</div>
<div class="list-inline-item">
<span class="legend-indicator bg-primary opacity"></span>Shared space
</div>
<div class="list-inline-item">
<span class="legend-indicator"></span>Unused space
</div>
</div>
<!-- End Legend Indicators -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Card -->
<div class="card mb-3 mb-lg-5">
<div class="card-header border-bottom">
<h5 class="card-header-title">Payment method</h5>
</div>
<!-- Body -->
<div class="card-body">
<div class="mb-4">
<p>Cards will be charged either at the end of the month or whenever your balance exceeds the usage threshold. All major credit / debit cards accepted.</p>
</div>
<!-- List Group -->
<ul class="list-group mb-5">
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="badge bg-primary ms-1">Primary</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="../assets/svg/brands/mastercard.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block text-dark">MasterCard •••• 4242</span>
<small class="d-block text-muted">Checking - Expires 12/22</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item">
<div class="mb-2">
<h5>Maria Williams <span class="text-danger small ms-1">Expired</span></h5>
</div>
<!-- Media -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-sm" src="../assets/svg/brands/visa.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-3">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block text-dark">Visa •••• 9016</span>
<small class="d-block text-muted">Debit - Expires 04/20</small>
</div>
<!-- End Col -->
<div class="col-sm-auto">
<div class="d-flex gap-3">
<a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountEditCardModal">
<i class="bi-pencil-fill me-1"></i> Edit
</a>
<button type="button" class="btn btn-white btn-xs">
<i class="bi-trash me-1"></i> Delete
</button>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Media -->
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
<!-- Card -->
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddCardModal">
<div class="card-body card-dashed-body py-8">
<img class="avatar avatar-lg avatar-4x3 mb-2" src="../assets/svg/illustrations/oc-add-card.svg" alt="Image Description">
<span class="d-block"><i class="bi-plus"></i> Add a new card</span>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header">
<h5 class="card-header-title">Order history</h5>
</div>
<!-- End Header -->
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless table-thead-bordered table-nowrap table-align-middle">
<thead class="thead-light">
<tr>
<th>Reference</th>
<th>Status</th>
<th>Amount</th>
<th>Updated</th>
<th>Invoice</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">#3682303</a></td>
<td><span class="badge bg-soft-warning text-warning">Pending</span></td>
<td>$264</td>
<td>22/04/2020</td>
<td><a class="btn btn-white btn-xs" href="../page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
</tr>
<tr>
<td><a href="#">#2333234</a></td>
<td><span class="badge bg-soft-success text-success">Successful</span></td>
<td>$264</td>
<td>22/04/2019</td>
<td><a class="btn btn-white btn-xs" href="../page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
</tr>
<tr>
<td><a href="#">#9834283</a></td>
<td><span class="badge bg-soft-success text-success">Successful</span></td>
<td>$264</td>
<td>22/04/2018</td>
<td><a class="btn btn-white btn-xs" href="../page-invoice.html"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a></td>
<td><a class="btn btn-white btn-xs" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountInvoiceReceiptModal"><i class="bi-eye-fill me-1"></i> Quick view</a></td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Card -->
</div>
<!-- Edit Card Modal -->
<div class="modal fade" id="accountEditCardModal" tabindex="-1" aria-labelledby="accountEditCardModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="accountEditCardModalLabel">Edit card</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="mb-4">
<label for="editCardNameLabel" class="form-label">Name on card</label>
<input type="text" class="form-control" id="editCardNameLabel" placeholder="Maria Williams" aria-label="Maria Williams" value="Maria Williams">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label for="editCardNumberLabel" class="form-label">Card number</label>
<input type="text" class="js-input-mask form-control" name="cardNumber" id="editCardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx" value="5200 7084 8243 4242"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="editCardEexpirationDateLabel" class="form-label">Expiration date</label>
<input type="text" class="js-input-mask form-control" name="expirationDate" id="editCardEexpirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx" value="12/2022"
data-hs-mask-options='{
"mask": "00/0000"
}'>
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="editCardSecurityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="password" class="js-input-mask form-control" name="securityCode" id="editCardSecurityCodeLabel" placeholder="xxx" aria-label="xxx" value="789"
data-hs-mask-options='{
"mask": "000"
}'>
</div>
<!-- End Form -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="editCardMakePrimaryCheckbox2" checked>
<label class="form-check-label" for="editCardMakePrimaryCheckbox2">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end gap-3">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- Add Card Modal -->
<div class="modal fade" id="accountAddCardModal" tabindex="-1" aria-labelledby="accountAddCardModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="accountAddCardModalLabel">Add card</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form>
<!-- Radio Button Group -->
<div class="btn-group btn-group-segment d-flex mb-4" role="group" aria-label="Account add card radio button group">
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption1" autocomplete="off" checked>
<label class="btn btn-sm" for="accountAddCardBtnRadioOption1">Credit or Debit card</label>
<input type="radio" class="btn-check" name="accountAddCardBtnRadio" id="accountAddCardBtnRadioOption2" autocomplete="off" disabled>
<label class="btn btn-sm" for="accountAddCardBtnRadioOption2">PayPal <span class="badge bg-soft-primary text-primary">Coming soon</label>
</div>
<!-- End Radio Button Group -->
<!-- Form -->
<div class="mb-4">
<label for="cardNameLabel" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cardNameLabel" placeholder="Payoneer" aria-label="Payoneer">
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-4">
<label for="cardNumberLabel" class="form-label">Card number</label>
<input type="text" class="js-input-mask form-control" name="cardNumber" id="cardNumberLabel" placeholder="xxxx xxxx xxxx xxxx" aria-label="xxxx xxxx xxxx xxxx"
data-hs-mask-options='{
"mask": "0000 0000 0000 0000"
}'>
</div>
<!-- End Form -->
<div class="row">
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="expirationDateLabel" class="form-label">Expiration date</label>
<input type="text" class="js-input-mask form-control" name="expirationDate" id="expirationDateLabel" placeholder="xx/xxxx" aria-label="xx/xxxx"
data-hs-mask-options='{
"mask": "00/0000"
}'>
</div>
<!-- End Form -->
</div>
<div class="col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="securityCodeLabel" class="form-label">CVV Code <i class="bi-question-circle text-body ml-1" data-toggle="tooltip" data-placement="top" title="A 3 - digit number, typically printed on the back of a card."></i></label>
<input type="text" class="js-input-mask form-control" name="securityCode" id="securityCodeLabel" placeholder="xxx" aria-label="xxx"
data-hs-mask-options='{
"mask": "000"
}'>
</div>
<!-- End Form -->
</div>
</div>
<!-- End Row -->
<!-- Custom Checkbox -->
<div class="form-check mb-4">
<input type="checkbox" class="form-check-input" id="makePrimaryCheckbox1">
<label class="form-check-label" for="makePrimaryCheckbox1">Make this primary card</label>
</div>
<!-- End Custom Checkbox -->
<div class="d-flex justify-content-end gap-3">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- Receipt Invoice Modal -->
<div class="modal fade" id="accountInvoiceReceiptModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-top-cover bg-primary text-center">
<figure class="position-absolute end-0 bottom-0 start-0">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"/>
</svg>
</figure>
<div class="modal-close">
<button type="button" class="btn-close btn-close-light" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<!-- End Header -->
<div class="modal-top-cover-avatar">
<img class="avatar avatar-lg avatar-circle avatar-centered border border-3 border-white shadow-sm" src="./assets/svg/brands/front.svg" alt="Logo">
</div>
<!-- Body -->
<div class="modal-body">
<div class="text-center mb-5">
<h3 class="mb-1">Invoice from Front</h3>
<span class="d-block">Invoice #3682303</span>
</div>
<div class="row mb-6">
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Amount paid:</small>
<span class="text-dark">$316.8</span>
</div>
<!-- End Col -->
<div class="col-md-4 mb-3 mb-md-0">
<small class="text-cap text-secondary mb-0">Date paid:</small>
<span class="text-dark">April 22, 2020</span>
</div>
<!-- End Col -->
<div class="col-md-4">
<small class="text-cap text-secondary mb-0">Payment method:</small>
<div class="d-flex align-items-center">
<img class="avatar avatar-xss me-2" src="./assets/svg/brands/mastercard.svg" alt="Image Description">
<span class="text-dark">•••• 4242</span>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<small class="text-cap mb-2">Summary</small>
<ul class="list-group mb-4">
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Payment to Front</span>
<span>$264.00</span>
</div>
</li>
<li class="list-group-item text-dark">
<div class="d-flex justify-content-between align-items-center">
<span>Tax fee</span>
<span>$52.8</span>
</div>
</li>
<li class="list-group-item list-group-item-light text-dark">
<div class="d-flex justify-content-between align-items-center">
<strong>Amount paid</strong>
<strong>$316.8</strong>
</div>
</li>
</ul>
<div class="d-flex justify-content-end gap-3">
<a class="btn btn-white btn-xs" href="#"><i class="bi-file-earmark-arrow-down-fill me-1"></i> PDF</a>
<a class="btn btn-white btn-xs" href="#"><i class="bi-printer-fill me-1"></i> Print Details</a>
</div>
<hr class="my-5">
<p class="modal-footer-text">If you have any questions, please contact us at <a href="mailto:example@gmail.com">example@gmail.com</a> or call at <a class="text-nowrap" href="#">+1 898 34-5492</a></p>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- JS Implementing Plugins -->
<script src="../node_modules/imask/dist/imask.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.imask.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF INPUT MASK
// =======================================================
HSCore.components.HSMask.init('.js-input-mask')
})()
</script>
Component #11
My address
Your text location determines the taxes that are applied to your bill.
How do I correct my tax location?More filters
<!-- Card -->
<div class="card">
<!-- Header -->
<div class="card-header border-bottom">
<h5 class="card-header-title">My address</h5>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="row">
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Radio Check -->
<div class="form-check form-check-inline w-100 h-100">
<input type="radio" id="billingRadio1" name="billingRadio" class="form-check-input" checked>
<label class="form-check-label" for="billingRadio1">
<span class="h5 d-block">Billing address #1</span>
<span class="d-block mb-2">
45 Roker Terrace<br>
Latheronwheel<br>
KW5 8NW, London<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
<a class="btn btn-white btn-xs" href="../account-overview.html#editAddressCard">
<i class="bi-pencil-fill me-1"></i> Edit address
</a>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Radio Check -->
<div class="form-check form-check-inline w-100 h-100">
<input type="radio" id="billingRadio2" name="billingRadio" class="form-check-input">
<label class="form-check-label" for="billingRadio2">
<span class="h5 d-block">Billing address #2</span>
<span class="d-block mb-2">
27 Thornton St<br>
Hundleby<br>
PE23 0ZJ, Manchester<br>
UK <img class="avatar avatar-xss avatar-circle me-1" src="../node_modules/flag-icon-css/flags/1x1/gb.svg" alt="Great Britain Flag">
</span>
<a class="btn btn-white btn-xs" href="../account-overview.html#editAddressCard">
<i class="bi-pencil-fill me-1"></i> Edit address
</a>
</label>
</div>
<!-- End Radio Check -->
</div>
<!-- End Col -->
<div class="col-sm-6 mb-5 mb-sm-7">
<!-- Card -->
<a class="card card-dashed card-centered" href="javascript:;" data-bs-toggle="modal" data-bs-target="#accountAddAddressModal">
<div class="card-body card-dashed-body">
<img class="avatar avatar-lg avatar-4x3 mb-2" src="../assets/svg/illustrations/oc-address.svg" alt="Image Description">
<span class="d-block"><i class="bi-plus"></i> Add a new address</span>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="mb-4">
<h5>Tax location</h5>
<p class="mb-0">UK - 20.00% SST</p>
<a class="link-sm" href="#">More info</a>
</div>
<p class="mb-0">Your text location determines the taxes that are applied to your bill.</p>
<a class="link-sm" href="#">How do I correct my tax location?</a>
</div>
<!-- End Body -->
</div>
<!-- End Card -->
<!-- Add New Address Modal -->
<div class="modal fade" id="accountAddAddressModal" tabindex="-1" aria-labelledby="accountAddAddressModalLabel" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title" id="accountAddAddressModalLabel">More filters</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Form -->
<form>
<!-- Form -->
<div class="row mb-4">
<label for="locationLabel" class="col-sm-3 col-form-label form-label">Location</label>
<div class="col-sm-9">
<!-- Select -->
<div class="tom-select-custom mb-3">
<select class="js-select form-select" id="locationLabel">
<option label="empty"></option>
<option value="AF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/af.svg" alt="Afghanistan Flag" /><span class="text-truncate">Afghanistan</span></span>'>Afghanistan</option>
<option value="AX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ax.svg" alt="Aland Islands Flag" /><span class="text-truncate">Aland Islands</span></span>'>Aland Islands</option>
<option value="AL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/al.svg" alt="Albania Flag" /><span class="text-truncate">Albania</span></span>'>Albania</option>
<option value="DZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dz.svg" alt="Algeria Flag" /><span class="text-truncate">Algeria</span></span>'>Algeria</option>
<option value="AS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/as.svg" alt="American Samoa Flag" /><span class="text-truncate">American Samoa</span></span>'>American Samoa</option>
<option value="AD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ad.svg" alt="Andorra Flag" /><span class="text-truncate">Andorra</span></span>'>Andorra</option>
<option value="AO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ao.svg" alt="Angola Flag" /><span class="text-truncate">Angola</span></span>'>Angola</option>
<option value="AI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ai.svg" alt="Anguilla Flag" /><span class="text-truncate">Anguilla</span></span>'>Anguilla</option>
<option value="AG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ag.svg" alt="Antigua and Barbuda Flag" /><span class="text-truncate">Antigua and Barbuda</span></span>'>Antigua and Barbuda</option>
<option value="AR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ar.svg" alt="Argentina Flag" /><span class="text-truncate">Argentina</span></span>'>Argentina</option>
<option value="AM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/am.svg" alt="Armenia Flag" /><span class="text-truncate">Armenia</span></span>'>Armenia</option>
<option value="AW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/aw.svg" alt="Aruba Flag" /><span class="text-truncate">Aruba</span></span>'>Aruba</option>
<option value="AU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/au.svg" alt="Australia Flag" /><span class="text-truncate">Australia</span></span>'>Australia</option>
<option value="AT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/at.svg" alt="Austria Flag" /><span class="text-truncate">Austria</span></span>'>Austria</option>
<option value="AZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/az.svg" alt="Azerbaijan Flag" /><span class="text-truncate">Azerbaijan</span></span>'>Azerbaijan</option>
<option value="BS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bs.svg" alt="Bahamas Flag" /><span class="text-truncate">Bahamas</span></span>'>Bahamas</option>
<option value="BH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bh.svg" alt="Bahrain Flag" /><span class="text-truncate">Bahrain</span></span>'>Bahrain</option>
<option value="BD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bd.svg" alt="Bangladesh Flag" /><span class="text-truncate">Bangladesh</span></span>'>Bangladesh</option>
<option value="BB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bb.svg" alt="Barbados Flag" /><span class="text-truncate">Barbados</span></span>'>Barbados</option>
<option value="BY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/by.svg" alt="Belarus Flag" /><span class="text-truncate">Belarus</span></span>'>Belarus</option>
<option value="BE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/be.svg" alt="Belgium Flag" /><span class="text-truncate">Belgium</span></span>'>Belgium</option>
<option value="BZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bz.svg" alt="Belize Flag" /><span class="text-truncate">Belize</span></span>'>Belize</option>
<option value="BJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bj.svg" alt="Benin Flag" /><span class="text-truncate">Benin</span></span>'>Benin</option>
<option value="BM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bm.svg" alt="Bermuda Flag" /><span class="text-truncate">Bermuda</span></span>'>Bermuda</option>
<option value="BT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bt.svg" alt="Bhutan Flag" /><span class="text-truncate">Bhutan</span></span>'>Bhutan</option>
<option value="BO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bo.svg" alt="Bolivia (Plurinational State of) Flag" /><span class="text-truncate">Bolivia (Plurinational State of)</span></span>'>Bolivia (Plurinational State of)</option>
<option value="BQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bq.svg" alt="Bonaire, Sint Eustatius and Saba Flag" /><span class="text-truncate">Bonaire, Sint Eustatius and Saba</span></span>'>Bonaire, Sint Eustatius and Saba</option>
<option value="BA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ba.svg" alt="Bosnia and Herzegovina Flag" /><span class="text-truncate">Bosnia and Herzegovina</span></span>'>Bosnia and Herzegovina</option>
<option value="BW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bw.svg" alt="Botswana Flag" /><span class="text-truncate">Botswana</span></span>'>Botswana</option>
<option value="BR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/br.svg" alt="Brazil Flag" /><span class="text-truncate">Brazil</span></span>'>Brazil</option>
<option value="IO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/io.svg" alt="British Indian Ocean Territory Flag" /><span class="text-truncate">British Indian Ocean Territory</span></span>'>British Indian Ocean Territory</option>
<option value="BN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bn.svg" alt="Brunei Darussalam Flag" /><span class="text-truncate">Brunei Darussalam</span></span>'>Brunei Darussalam</option>
<option value="BG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bg.svg" alt="Bulgaria Flag" /><span class="text-truncate">Bulgaria</span></span>'>Bulgaria</option>
<option value="BF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bf.svg" alt="Burkina Faso Flag" /><span class="text-truncate">Burkina Faso</span></span>'>Burkina Faso</option>
<option value="BI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bi.svg" alt="Burundi Flag" /><span class="text-truncate">Burundi</span></span>'>Burundi</option>
<option value="CV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cv.svg" alt="Cabo Verde Flag" /><span class="text-truncate">Cabo Verde</span></span>'>Cabo Verde</option>
<option value="KH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kh.svg" alt="Cambodia Flag" /><span class="text-truncate">Cambodia</span></span>'>Cambodia</option>
<option value="CM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cm.svg" alt="Cameroon Flag" /><span class="text-truncate">Cameroon</span></span>'>Cameroon</option>
<option value="CA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ca.svg" alt="Canada Flag" /><span class="text-truncate">Canada</span></span>'>Canada</option>
<option value="KY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ky.svg" alt="Cayman Islands Flag" /><span class="text-truncate">Cayman Islands</span></span>'>Cayman Islands</option>
<option value="CF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cf.svg" alt="Central African Republic Flag" /><span class="text-truncate">Central African Republic</span></span>'>Central African Republic</option>
<option value="TD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/td.svg" alt="Chad Flag" /><span class="text-truncate">Chad</span></span>'>Chad</option>
<option value="CL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cl.svg" alt="Chile Flag" /><span class="text-truncate">Chile</span></span>'>Chile</option>
<option value="CN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cn.svg" alt="China Flag" /><span class="text-truncate">China</span></span>'>China</option>
<option value="CX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cx.svg" alt="Christmas Island Flag" /><span class="text-truncate">Christmas Island</span></span>'>Christmas Island</option>
<option value="CC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cc.svg" alt="Cocos (Keeling) Islands Flag" /><span class="text-truncate">Cocos (Keeling) Islands</span></span>'>Cocos (Keeling) Islands</option>
<option value="CO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/co.svg" alt="Colombia Flag" /><span class="text-truncate">Colombia</span></span>'>Colombia</option>
<option value="KM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/km.svg" alt="Comoros Flag" /><span class="text-truncate">Comoros</span></span>'>Comoros</option>
<option value="CK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ck.svg" alt="Cook Islands Flag" /><span class="text-truncate">Cook Islands</span></span>'>Cook Islands</option>
<option value="CR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cr.svg" alt="Costa Rica Flag" /><span class="text-truncate">Costa Rica</span></span>'>Costa Rica</option>
<option value="HR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hr.svg" alt="Croatia Flag" /><span class="text-truncate">Croatia</span></span>'>Croatia</option>
<option value="CU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cu.svg" alt="Cuba Flag" /><span class="text-truncate">Cuba</span></span>'>Cuba</option>
<option value="CW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cw.svg" alt="Curaçao Flag" /><span class="text-truncate">Curaçao</span></span>'>Curaçao</option>
<option value="CY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cy.svg" alt="Cyprus Flag" /><span class="text-truncate">Cyprus</span></span>'>Cyprus</option>
<option value="CZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cz.svg" alt="Czech Republic Flag" /><span class="text-truncate">Czech Republic</span></span>'>Czech Republic</option>
<option value="CI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ci.svg" alt=Côte d'Ivoire Flag" /><span class="text-truncate">Côte d'Ivoire</span></span>'>Côte d'Ivoire</option>
<option value="CD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cd.svg" alt="Democratic Republic of the Congo Flag" /><span class="text-truncate">Democratic Republic of the Congo</span></span>'>Democratic Republic of the Congo</option>
<option value="DK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dk.svg" alt="Denmark Flag" /><span class="text-truncate">Denmark</span></span>'>Denmark</option>
<option value="DJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dj.svg" alt="Djibouti Flag" /><span class="text-truncate">Djibouti</span></span>'>Djibouti</option>
<option value="DM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/dm.svg" alt="Dominica Flag" /><span class="text-truncate">Dominica</span></span>'>Dominica</option>
<option value="DO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/do.svg" alt="Dominican Republic Flag" /><span class="text-truncate">Dominican Republic</span></span>'>Dominican Republic</option>
<option value="EC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ec.svg" alt="Ecuador Flag" /><span class="text-truncate">Ecuador</span></span>'>Ecuador</option>
<option value="EG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/eg.svg" alt="Egypt Flag" /><span class="text-truncate">Egypt</span></span>'>Egypt</option>
<option value="SV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sv.svg" alt="El Salvador Flag" /><span class="text-truncate">El Salvador</span></span>'>El Salvador</option>
<option value="GB-ENG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-eng.svg" alt="England Flag" /><span class="text-truncate">England</span></span>'>England</option>
<option value="GQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gq.svg" alt="Equatorial Guinea Flag" /><span class="text-truncate">Equatorial Guinea</span></span>'>Equatorial Guinea</option>
<option value="ER" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/er.svg" alt="Eritrea Flag" /><span class="text-truncate">Eritrea</span></span>'>Eritrea</option>
<option value="EE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ee.svg" alt="Estonia Flag" /><span class="text-truncate">Estonia</span></span>'>Estonia</option>
<option value="ET" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/et.svg" alt="Ethiopia Flag" /><span class="text-truncate">Ethiopia</span></span>'>Ethiopia</option>
<option value="FK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fk.svg" alt="Falkland Islands Flag" /><span class="text-truncate">Falkland Islands</span></span>'>Falkland Islands</option>
<option value="FO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fo.svg" alt="Faroe Islands Flag" /><span class="text-truncate">Faroe Islands</span></span>'>Faroe Islands</option>
<option value="FM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fm.svg" alt="Federated States of Micronesia Flag" /><span class="text-truncate">Federated States of Micronesia</span></span>'>Federated States of Micronesia</option>
<option value="FJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fj.svg" alt="Fiji Flag" /><span class="text-truncate">Fiji</span></span>'>Fiji</option>
<option value="FI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fi.svg" alt="Finland Flag" /><span class="text-truncate">Finland</span></span>'>Finland</option>
<option value="FR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/fr.svg" alt="France Flag" /><span class="text-truncate">France</span></span>'>France</option>
<option value="GF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gf.svg" alt="French Guiana Flag" /><span class="text-truncate">French Guiana</span></span>'>French Guiana</option>
<option value="PF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pf.svg" alt="French Polynesia Flag" /><span class="text-truncate">French Polynesia</span></span>'>French Polynesia</option>
<option value="TF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tf.svg" alt="French Southern Territories Flag" /><span class="text-truncate">French Southern Territories</span></span>'>French Southern Territories</option>
<option value="GA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ga.svg" alt="Gabon Flag" /><span class="text-truncate">Gabon</span></span>'>Gabon</option>
<option value="GM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gm.svg" alt="Gambia Flag" /><span class="text-truncate">Gambia</span></span>'>Gambia</option>
<option value="GE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ge.svg" alt="Georgia Flag" /><span class="text-truncate">Georgia</span></span>'>Georgia</option>
<option value="DE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/de.svg" alt="Germany Flag" /><span class="text-truncate">Germany</span></span>'>Germany</option>
<option value="GH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gh.svg" alt="Ghana Flag" /><span class="text-truncate">Ghana</span></span>'>Ghana</option>
<option value="GI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gi.svg" alt="Gibraltar Flag" /><span class="text-truncate">Gibraltar</span></span>'>Gibraltar</option>
<option value="GR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gr.svg" alt="Greece Flag" /><span class="text-truncate">Greece</span></span>'>Greece</option>
<option value="GL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gl.svg" alt="Greenland Flag" /><span class="text-truncate">Greenland</span></span>'>Greenland</option>
<option value="GD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gd.svg" alt="Grenada Flag" /><span class="text-truncate">Grenada</span></span>'>Grenada</option>
<option value="GP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gp.svg" alt="Guadeloupe Flag" /><span class="text-truncate">Guadeloupe</span></span>'>Guadeloupe</option>
<option value="GU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gu.svg" alt="Guam Flag" /><span class="text-truncate">Guam</span></span>'>Guam</option>
<option value="GT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gt.svg" alt="Guatemala Flag" /><span class="text-truncate">Guatemala</span></span>'>Guatemala</option>
<option value="GG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gg.svg" alt="Guernsey Flag" /><span class="text-truncate">Guernsey</span></span>'>Guernsey</option>
<option value="GN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gn.svg" alt="Guinea Flag" /><span class="text-truncate">Guinea</span></span>'>Guinea</option>
<option value="GW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gw.svg" alt="Guinea-Bissau Flag" /><span class="text-truncate">Guinea-Bissau</span></span>'>Guinea-Bissau</option>
<option value="GY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gy.svg" alt="Guyana Flag" /><span class="text-truncate">Guyana</span></span>'>Guyana</option>
<option value="HT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ht.svg" alt="Haiti Flag" /><span class="text-truncate">Haiti</span></span>'>Haiti</option>
<option value="VA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/va.svg" alt="Holy See Flag" /><span class="text-truncate">Holy See</span></span>'>Holy See</option>
<option value="HN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hn.svg" alt="Honduras Flag" /><span class="text-truncate">Honduras</span></span>'>Honduras</option>
<option value="HK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hk.svg" alt="Hong Kong Flag" /><span class="text-truncate">Hong Kong</span></span>'>Hong Kong</option>
<option value="HU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/hu.svg" alt="Hungary Flag" /><span class="text-truncate">Hungary</span></span>'>Hungary</option>
<option value="IS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/is.svg" alt="Iceland Flag" /><span class="text-truncate">Iceland</span></span>'>Iceland</option>
<option value="IN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/in.svg" alt="India Flag" /><span class="text-truncate">India</span></span>'>India</option>
<option value="ID" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/id.svg" alt="Indonesia Flag" /><span class="text-truncate">Indonesia</span></span>'>Indonesia</option>
<option value="IR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ir.svg" alt="Iran (Islamic Republic of) Flag" /><span class="text-truncate">Iran (Islamic Republic of)</span></span>'>Iran (Islamic Republic of)</option>
<option value="IQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/iq.svg" alt="Iraq Flag" /><span class="text-truncate">Iraq</span></span>'>Iraq</option>
<option value="IE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ie.svg" alt="Ireland Flag" /><span class="text-truncate">Ireland</span></span>'>Ireland</option>
<option value="IM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/im.svg" alt="Isle of Man Flag" /><span class="text-truncate">Isle of Man</span></span>'>Isle of Man</option>
<option value="IL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/il.svg" alt="Israel Flag" /><span class="text-truncate">Israel</span></span>'>Israel</option>
<option value="IT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/it.svg" alt="Italy Flag" /><span class="text-truncate">Italy</span></span>'>Italy</option>
<option value="JM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jm.svg" alt="Jamaica Flag" /><span class="text-truncate">Jamaica</span></span>'>Jamaica</option>
<option value="JP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jp.svg" alt="Japan Flag" /><span class="text-truncate">Japan</span></span>'>Japan</option>
<option value="JE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/je.svg" alt="Jersey Flag" /><span class="text-truncate">Jersey</span></span>'>Jersey</option>
<option value="JO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/jo.svg" alt="Jordan Flag" /><span class="text-truncate">Jordan</span></span>'>Jordan</option>
<option value="KZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kz.svg" alt="Kazakhstan Flag" /><span class="text-truncate">Kazakhstan</span></span>'>Kazakhstan</option>
<option value="KE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ke.svg" alt="Kenya Flag" /><span class="text-truncate">Kenya</span></span>'>Kenya</option>
<option value="KI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ki.svg" alt="Kiribati Flag" /><span class="text-truncate">Kiribati</span></span>'>Kiribati</option>
<option value="KW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kw.svg" alt="Kuwait Flag" /><span class="text-truncate">Kuwait</span></span>'>Kuwait</option>
<option value="KG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kg.svg" alt="Kyrgyzstan Flag" /><span class="text-truncate">Kyrgyzstan</span></span>'>Kyrgyzstan</option>
<option value="LA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/la.svg" alt="Laos Flag" /><span class="text-truncate">Laos</span></span>'>Laos</option>
<option value="LV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lv.svg" alt="Latvia Flag" /><span class="text-truncate">Latvia</span></span>'>Latvia</option>
<option value="LB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lb.svg" alt="Lebanon Flag" /><span class="text-truncate">Lebanon</span></span>'>Lebanon</option>
<option value="LS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ls.svg" alt="Lesotho Flag" /><span class="text-truncate">Lesotho</span></span>'>Lesotho</option>
<option value="LR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lr.svg" alt="Liberia Flag" /><span class="text-truncate">Liberia</span></span>'>Liberia</option>
<option value="LY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ly.svg" alt="Libya Flag" /><span class="text-truncate">Libya</span></span>'>Libya</option>
<option value="LI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/li.svg" alt="Liechtenstein Flag" /><span class="text-truncate">Liechtenstein</span></span>'>Liechtenstein</option>
<option value="LT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lt.svg" alt="Lithuania Flag" /><span class="text-truncate">Lithuania</span></span>'>Lithuania</option>
<option value="LU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lu.svg" alt="Luxembourg Flag" /><span class="text-truncate">Luxembourg</span></span>'>Luxembourg</option>
<option value="MO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mo.svg" alt="Macau Flag" /><span class="text-truncate">Macau</span></span>'>Macau</option>
<option value="MG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mg.svg" alt="Madagascar Flag" /><span class="text-truncate">Madagascar</span></span>'>Madagascar</option>
<option value="MW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mw.svg" alt="Malawi Flag" /><span class="text-truncate">Malawi</span></span>'>Malawi</option>
<option value="MY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/my.svg" alt="Malaysia Flag" /><span class="text-truncate">Malaysia</span></span>'>Malaysia</option>
<option value="MV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mv.svg" alt="Maldives Flag" /><span class="text-truncate">Maldives</span></span>'>Maldives</option>
<option value="ML" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ml.svg" alt="Mali Flag" /><span class="text-truncate">Mali</span></span>'>Mali</option>
<option value="MT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mt.svg" alt="Malta Flag" /><span class="text-truncate">Malta</span></span>'>Malta</option>
<option value="MH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mh.svg" alt="Marshall Islands Flag" /><span class="text-truncate">Marshall Islands</span></span>'>Marshall Islands</option>
<option value="MQ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mq.svg" alt="Martinique Flag" /><span class="text-truncate">Martinique</span></span>'>Martinique</option>
<option value="MR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mr.svg" alt="Mauritania Flag" /><span class="text-truncate">Mauritania</span></span>'>Mauritania</option>
<option value="MU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mu.svg" alt="Mauritius Flag" /><span class="text-truncate">Mauritius</span></span>'>Mauritius</option>
<option value="YT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/yt.svg" alt="Mayotte Flag" /><span class="text-truncate">Mayotte</span></span>'>Mayotte</option>
<option value="MX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mx.svg" alt="Mexico Flag" /><span class="text-truncate">Mexico</span></span>'>Mexico</option>
<option value="MD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/md.svg" alt="Moldova Flag" /><span class="text-truncate">Moldova</span></span>'>Moldova</option>
<option value="MC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mc.svg" alt="Monaco Flag" /><span class="text-truncate">Monaco</span></span>'>Monaco</option>
<option value="MN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mn.svg" alt="Mongolia Flag" /><span class="text-truncate">Mongolia</span></span>'>Mongolia</option>
<option value="ME" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/me.svg" alt="Montenegro Flag" /><span class="text-truncate">Montenegro</span></span>'>Montenegro</option>
<option value="MS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ms.svg" alt="Montserrat Flag" /><span class="text-truncate">Montserrat</span></span>'>Montserrat</option>
<option value="MA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ma.svg" alt="Morocco Flag" /><span class="text-truncate">Morocco</span></span>'>Morocco</option>
<option value="MZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mz.svg" alt="Mozambique Flag" /><span class="text-truncate">Mozambique</span></span>'>Mozambique</option>
<option value="MM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mm.svg" alt="Myanmar Flag" /><span class="text-truncate">Myanmar</span></span>'>Myanmar</option>
<option value="NA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/na.svg" alt="Namibia Flag" /><span class="text-truncate">Namibia</span></span>'>Namibia</option>
<option value="NR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nr.svg" alt="Nauru Flag" /><span class="text-truncate">Nauru</span></span>'>Nauru</option>
<option value="NP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/np.svg" alt="Nepal Flag" /><span class="text-truncate">Nepal</span></span>'>Nepal</option>
<option value="NL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nl.svg" alt="Netherlands Flag" /><span class="text-truncate">Netherlands</span></span>'>Netherlands</option>
<option value="NC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nc.svg" "alt="New Caledonia Flag" /><span class="text-truncate">New Caledonia</span></span>'>New Caledonia</option>
<option value="NZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nz.svg" alt="New Zealand Flag" /><span class="text-truncate">New Zealand</span></span>'>New Zealand</option>
<option value="NI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ni.svg" alt="Nicaragua Flag" /><span class="text-truncate">Nicaragua</span></span>'>Nicaragua</option>
<option value="NE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ne.svg" alt="Niger Flag" /><span class="text-truncate">Niger</span></span>'>Niger</option>
<option value="NG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ng.svg" alt="Nigeria Flag" /><span class="text-truncate">Nigeria</span></span>'>Nigeria</option>
<option value="NU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nu.svg" alt="Niue Flag" /><span class="text-truncate">Niue</span></span>'>Niue</option>
<option value="NF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/nf.svg" alt="Norfolk Island Flag" /><span class="text-truncate">Norfolk Island</span></span>'>Norfolk Island</option>
<option value="KP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kp.svg" alt="North Korea Flag" /><span class="text-truncate">North Korea</span></span>'>North Korea</option>
<option value="MK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mk.svg" alt="North Macedonia Flag" /><span class="text-truncate">North Macedonia</span></span>'>North Macedonia</option>
<option value="GB-NIR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-nir.svg" alt="Northern Ireland Flag" /><span class="text-truncate">Northern Ireland</span></span>'>Northern Ireland</option>
<option value="MP" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mp.svg" alt="Northern Mariana Islands Flag" /><span class="text-truncate">Northern Mariana Islands</span></span>'>Northern Mariana Islands</option>
<option value="NO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/no.svg" alt="Norway Flag" /><span class="text-truncate">Norway</span></span>'>Norway</option>
<option value="OM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/om.svg" alt="Oman Flag" /><span class="text-truncate">Oman</span></span>'>Oman</option>
<option value="PK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pk.svg" alt="Pakistan Flag" /><span class="text-truncate">Pakistan</span></span>'>Pakistan</option>
<option value="PW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pw.svg" alt="Palau Flag" /><span class="text-truncate">Palau</span></span>'>Palau</option>
<option value="PA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pa.svg" alt="Panama Flag" /><span class="text-truncate">Panama</span></span>'>Panama</option>
<option value="PG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pg.svg" alt="Papua New Guinea Flag" /><span class="text-truncate">Papua New Guinea</span></span>'>Papua New Guinea</option>
<option value="PY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/py.svg" alt="Paraguay Flag" /><span class="text-truncate">Paraguay</span></span>'>Paraguay</option>
<option value="PE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pe.svg" alt="Peru Flag" /><span class="text-truncate">Peru</span></span>'>Peru</option>
<option value="PH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ph.svg" alt="Philippines Flag" /><span class="text-truncate">Philippines</span></span>'>Philippines</option>
<option value="PN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pn.svg" alt="Pitcairn Flag" /><span class="text-truncate">Pitcairn</span></span>'>Pitcairn</option>
<option value="PL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pl.svg" alt="Poland Flag" /><span class="text-truncate">Poland</span></span>'>Poland</option>
<option value="PT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pt.svg" alt="Portugal Flag" /><span class="text-truncate">Portugal</span></span>'>Portugal</option>
<option value="PR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pr.svg" alt="Puerto Rico Flag" /><span class="text-truncate">Puerto Rico</span></span>'>Puerto Rico</option>
<option value="QA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/qa.svg" alt="Qatar Flag" /><span class="text-truncate">Qatar</span></span>'>Qatar</option>
<option value="CG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/cg.svg" alt="Republic of the Congo Flag" /><span class="text-truncate">Republic of the Congo</span></span>'>Republic of the Congo</option>
<option value="RO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ro.svg" alt="Romania Flag" /><span class="text-truncate">Romania</span></span>'>Romania</option>
<option value="RU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ru.svg" alt="Russia Flag" /><span class="text-truncate">Russia</span></span>'>Russia</option>
<option value="RW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/rw.svg" alt="Rwanda Flag" /><span class="text-truncate">Rwanda</span></span>'>Rwanda</option>
<option value="RE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/re.svg" alt="Réunion Flag" /><span class="text-truncate">Réunion</span></span>'>Réunion</option>
<option value="BL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/bl.svg" alt="Saint Barthélemy Flag" /><span class="text-truncate">Saint Barthélemy</span></span>'>Saint Barthélemy</option>
<option value="SH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sh.svg" alt="Saint Helena, Ascension and Tristan da Cunha Flag" /><span class="text-truncate">Saint Helena, Ascension and Tristan da Cunha</span></span>'>Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kn.svg" alt="Saint Kitts and Nevis Flag" /><span class="text-truncate">Saint Kitts and Nevis</span></span>'>Saint Kitts and Nevis</option>
<option value="LC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lc.svg" alt="Saint Lucia Flag" /><span class="text-truncate">Saint Lucia</span></span>'>Saint Lucia</option>
<option value="MF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/mf.svg" alt="Saint Martin Flag" /><span class="text-truncate">Saint Martin</span></span>'>Saint Martin</option>
<option value="PM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/pm.svg" alt="Saint Pierre and Miquelon Flag" /><span class="text-truncate">Saint Pierre and Miquelon</span></span>'>Saint Pierre and Miquelon</option>
<option value="VC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vc.svg" alt="Saint Vincent and the Grenadines Flag" /><span class="text-truncate">Saint Vincent and the Grenadines</span></span>'>Saint Vincent and the Grenadines</option>
<option value="WS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ws.svg" alt="Samoa Flag" /><span class="text-truncate">Samoa</span></span>'>Samoa</option>
<option value="SM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sm.svg" "alt="San Marino Flag" /><span class="text-truncate">San Marino</span></span>'>San Marino</option>
<option value="ST" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/st.svg" "alt="Sao Tome and Principe Flag" /><span class="text-truncate">Sao Tome and Principe</span></span>'>Sao Tome and Principe</option>
<option value="SA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sa.svg" alt="Saudi Arabia Flag" /><span class="text-truncate">Saudi Arabia</span></span>'>Saudi Arabia</option>
<option value="GB-SCT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-sct.svg" alt="Scotland Flag" /><span class="text-truncate">Scotland</span></span>'>Scotland</option>
<option value="SN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sn.svg" alt="Senegal Flag" /><span class="text-truncate">Senegal</span></span>'>Senegal</option>
<option value="RS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/rs.svg" alt="Serbia Flag" /><span class="text-truncate">Serbia</span></span>'>Serbia</option>
<option value="SC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sc.svg" alt="Seychelles Flag" /><span class="text-truncate">Seychelles</span></span>'>Seychelles</option>
<option value="SL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sl.svg" alt="Sierra Leone Flag" /><span class="text-truncate">Sierra Leone</span></span>'>Sierra Leone</option>
<option value="SG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sg.svg" alt="Singapore Flag" /><span class="text-truncate">Singapore</span></span>'>Singapore</option>
<option value="SX" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sx.svg" alt="Sint Maarten Flag" /><span class="text-truncate">Sint Maarten</span></span>'>Sint Maarten</option>
<option value="SK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sk.svg" alt="Slovakia Flag" /><span class="text-truncate">Slovakia</span></span>'>Slovakia</option>
<option value="SI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/si.svg" alt="Slovenia Flag" /><span class="text-truncate">Slovenia</span></span>'>Slovenia</option>
<option value="SB" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sb.svg" alt="Solomon Islands Flag" /><span class="text-truncate">Solomon Islands</span></span>'>Solomon Islands</option>
<option value="SO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/so.svg" alt="Somalia Flag" /><span class="text-truncate">Somalia</span></span>'>Somalia</option>
<option value="ZA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/za.svg" alt="South Africa Flag" /><span class="text-truncate">South Africa</span></span>'>South Africa</option>
<option value="GS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gs.svg" alt="South Georgia and the South Sandwich Islands Flag" /><span class="text-truncate">South Georgia and the South Sandwich Islands</span></span>'>South Georgia and the South Sandwich Islands</option>
<option value="KR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/kr.svg" alt="South Korea Flag" /><span class="text-truncate">South Korea</span></span>'>South Korea</option>
<option value="SS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ss.svg" alt="South Sudan Flag" /><span class="text-truncate">South Sudan</span></span>'>South Sudan</option>
<option value="ES" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/es.svg" alt="Spain Flag" /><span class="text-truncate">Spain</span></span>'>Spain</option>
<option value="LK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/lk.svg" "alt="Sri Lanka Flag" /><span class="text-truncate">Sri Lanka</span></span>'>Sri Lanka</option>
<option value="PS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ps.svg" alt="State of Palestine Flag" /><span class="text-truncate">State of Palestine</span></span>'>State of Palestine</option>
<option value="SD" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sd.svg" alt="Sudan Flag" /><span class="text-truncate">Sudan</span></span>'>Sudan</option>
<option value="SR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sr.svg" alt="Suriname Flag" /><span class="text-truncate">Suriname</span></span>'>Suriname</option>
<option value="SJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sj.svg" alt="Svalbard and Jan Mayen Flag" /><span class="text-truncate">Svalbard and Jan Mayen</span></span>'>Svalbard and Jan Mayen</option>
<option value="SZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sz.svg" alt="Swaziland Flag" /><span class="text-truncate">Swaziland</span></span>'>Swaziland</option>
<option value="SE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/se.svg" alt="Sweden Flag" /><span class="text-truncate">Sweden</span></span>'>Sweden</option>
<option value="CH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ch.svg" alt="Switzerland Flag" /><span class="text-truncate">Switzerland</span></span>'>Switzerland</option>
<option value="SY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/sy.svg" alt="Syrian Arab Republic Flag" /><span class="text-truncate">Syrian Arab Republic</span></span>'>Syrian Arab Republic</option>
<option value="TW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tw.svg" alt="Taiwan Flag" /><span class="text-truncate">Taiwan</span></span>'>Taiwan</option>
<option value="TJ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tj.svg" alt="Tajikistan Flag" /><span class="text-truncate">Tajikistan</span></span>'>Tajikistan</option>
<option value="TZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tz.svg" alt="Tanzania Flag" /><span class="text-truncate">Tanzania</span></span>'>Tanzania</option>
<option value="TH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/th.svg" alt="Thailand Flag" /><span class="text-truncate">Thailand</span></span>'>Thailand</option>
<option value="TL" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tl.svg" alt="Timor-Leste Flag" /><span class="text-truncate">Timor-Leste</span></span>'>Timor-Leste</option>
<option value="TG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tg.svg" alt="Togo Flag" /><span class="text-truncate">Togo</span></span>'>Togo</option>
<option value="TK" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tk.svg" alt="Tokelau Flag" /><span class="text-truncate">Tokelau</span></span>'>Tokelau</option>
<option value="TO" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/to.svg" alt="Tonga Flag" /><span class="text-truncate">Tonga</span></span>'>Tonga</option>
<option value="TT" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tt.svg" alt="Trinidad and Tobago Flag" /><span class="text-truncate">Trinidad and Tobago</span></span>'>Trinidad and Tobago</option>
<option value="TN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tn.svg" alt="Tunisia Flag" /><span class="text-truncate">Tunisia</span></span>'>Tunisia</option>
<option value="TR" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tr.svg" alt="Turkey Flag" /><span class="text-truncate">Turkey</span></span>'>Turkey</option>
<option value="TM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tm.svg" alt="Turkmenistan Flag" /><span class="text-truncate">Turkmenistan</span></span>'>Turkmenistan</option>
<option value="TC" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tc.svg" alt="Turks and Caicos Islands Flag" /><span class="text-truncate">Turks and Caicos Islands</span></span>'>Turks and Caicos Islands</option>
<option value="TV" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/tv.svg" alt="Tuvalu Flag" /><span class="text-truncate">Tuvalu</span></span>'>Tuvalu</option>
<option value="UG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ug.svg" alt="Uganda Flag" /><span class="text-truncate">Uganda</span></span>'>Uganda</option>
<option value="UA" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ua.svg" alt="Ukraine Flag" /><span class="text-truncate">Ukraine</span></span>'>Ukraine</option>
<option value="AE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ae.svg" alt="United Arab Emirates Flag" /><span class="text-truncate">United Arab Emirates</span></span>'>United Arab Emirates</option>
<option value="GB" selected data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb.svg" alt="United Kingdom Flag" /><span class="text-truncate">United Kingdom</span></span>'>United Kingdom</option>
<option value="UM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/um.svg" alt="United States Minor Outlying Islands Flag" /><span class="text-truncate">United States Minor Outlying Islands</span></span>'>United States Minor Outlying Islands</option>
<option value="US" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/us.svg" alt="United States of America Flag" /><span class="text-truncate">United States of America</span></span>'>United States of America</option>
<option value="UY" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/uy.svg" alt="Uruguay Flag" /><span class="text-truncate">Uruguay</span></span>'>Uruguay</option>
<option value="UZ" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/uz.svg" alt="Uzbekistan Flag" /><span class="text-truncate">Uzbekistan</span></span>'>Uzbekistan</option>
<option value="VU" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vu.svg" alt="Vanuatu Flag" /><span class="text-truncate">Vanuatu</span></span>'>Vanuatu</option>
<option value="VE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ve.svg" alt="Venezuela (Bolivarian Republic of) Flag" /><span class="text-truncate">Venezuela (Bolivarian Republic of)</span></span>'>Venezuela (Bolivarian Republic of)</option>
<option value="VN" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vn.svg" alt="Vietnam Flag" /><span class="text-truncate">Vietnam</span></span>'>Vietnam</option>
<option value="VG" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vg.svg" alt="Virgin Islands (British) Flag" /><span class="text-truncate">Virgin Islands (British)</span></span>'>Virgin Islands (British)</option>
<option value="VI" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/vi.svg" alt="Virgin Islands (U.S.) Flag" /><span class="text-truncate">Virgin Islands (U.S.)</span></span>'>Virgin Islands (U.S.)</option>
<option value="GB-WLS" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/gb-wls.svg" alt="Wales Flag" /><span class="text-truncate">Wales</span></span>'>Wales</option>
<option value="WF" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/wf.svg" alt="Wallis and Futuna Flag" /><span class="text-truncate">Wallis and Futuna</span></span>'>Wallis and Futuna</option>
<option value="EH" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/eh.svg" alt="Western Sahara Flag" /><span class="text-truncate">Western Sahara</span></span>'>Western Sahara</option>
<option value="YE" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/ye.svg" alt="Yemen Flag" /><span class="text-truncate">Yemen</span></span>'>Yemen</option>
<option value="ZM" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/zm.svg" alt="Zambia Flag" /><span class="text-truncate">Zambia</span></span>'>Zambia</option>
<option value="ZW" data-option-template='<span class="d-flex align-items-center"><img class="avatar avatar-xss avatar-circle me-2" src="./node_modules/flag-icon-css/flags/1x1/zw.svg" alt="Zimbabwe Flag" /><span class="text-truncate">Zimbabwe</span></span>'>Zimbabwe</option>
</select>
</div>
<!-- End Select -->
<div class="mb-3">
<input type="text" class="form-control" name="city" id="cityLabel" placeholder="City" aria-label="City">
</div>
<input type="text" class="form-control" name="state" id="stateLabel" placeholder="State" aria-label="State">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="addressLine1Label" class="col-sm-3 col-form-label form-label">Address line 1</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="addressLine1" id="addressLine1Label" placeholder="Your address" aria-label="Your address">
</div>
</div>
<!-- End Form -->
<!-- Form -->
<div class="row mb-4">
<label for="zipCodeLabel" class="col-sm-3 col-form-label form-label">Zip code <i class="bi-question-circle text-body ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="You can find your code in a postal address."></i></label>
<div class="col-sm-9">
<input type="text" class="js-input-mask form-control" name="zipCode" id="zipCodeLabel" placeholder="Your zip code" aria-label="Your zip code"
data-hs-mask-options='{
"mask": "AA0 0AA"
}'>
</div>
</div>
<!-- End Form -->
<div class="d-flex justify-content-end gap-3">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
<!-- End Form -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<link rel="stylesheet" href="../node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
<!-- JS Implementing Plugins -->
<script src="../node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.tom-select.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF SELECT
// =======================================================
HSCore.components.HSTomSelect.init('.js-select', {
render: {
'option': function(data, escape) {
return data.optionTemplate
},
'item': function(data, escape) {
return data.optionTemplate
}
}
})
})()
</script>