ultimate-jekyll-manager 0.0.47 → 0.0.49

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -0,0 +1,1192 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/cover
+
+### THEME CONFIG ###
+theme:
+  main:
+    align: "start"
+
+### WEB MANAGER CONFIG ###
+web_manager:
+  auth:
+    config:
+      policy: "authenticated"
+
+### ACCOUNT PAGE ###
+sections:
+  - id: "profile"
+    name: "Profile"
+    icon: "user-circle"
+  # - id: "notifications"
+  #   name: "Notifications"
+    icon: "bell"
+  - id: "security"
+    name: "Security"
+    icon: "shield-halved"
+  - id: "connections"
+    name: "Connections"
+    icon: "link"
+  - id: "billing"
+    name: "Billing"
+    icon: "credit-card"
+  - id: "team"
+    name: "Team"
+    icon: "users"
+  - id: "referrals"
+    name: "Referrals"
+    icon: "user-plus"
+  - id: "api-keys"
+    name: "API Keys"
+    icon: "key"
+  - id: "delete"
+    name: "Delete Account"
+    icon: "trash"
+---
+
+<!-- Account Page Wrapper -->
+<div class="account-page">
+
+<!-- Fixed Header -->
+<header class="position-fixed top-0 start-0 w-100 bg-body-tertiary border-bottom" style="z-index: 1030;">
+  <div class="container-fluid px-4">
+    <div class="d-flex align-items-center justify-content-between py-3">
+      <!-- Left: Brand -->
+      <div class="d-flex align-items-center">
+        <img src="{{ site.brand.images.brandmark }}" alt="{{ site.brand.name }}" class="me-3" style="height: 32px;">
+        <h1 class="h5 mb-0 fw-semibold">{{ site.brand.name }} Account</h1>
+      </div>
+
+      <!-- Right: Close button -->
+      <button type="button" class="btn-close" aria-label="Close" onclick="window.location.href='/'"></button>
+    </div>
+  </div>
+</header>
+
+<!-- Mobile Navigation Dropdown -->
+<div class="d-lg-none px-3 py-3 bg-body-tertiary border-bottom" style="margin-top: 65px;">
+  <div class="d-flex gap-2">
+    <select class="form-select flex-grow-1" id="mobile-nav-select" aria-label="Select account section">
+      {% for section in page.resolved.sections %}
+      {% unless section.id == 'delete' %}
+      <option value="{{ section.id }}" {% if forloop.first %}selected{% endif %}>
+        {{ section.name }}
+      </option>
+      {% endunless %}
+      {% endfor %}
+      <!-- Delete option will be added dynamically by JavaScript when needed -->
+    </select>
+    <button class="btn btn-danger auth-signout-btn">
+      {% uj_icon "arrow-right-from-bracket", "fa-sm" %}
+    </button>
+  </div>
+</div>
+
+<!-- Main Content with Sidebar -->
+<div class="container-fluid" style="margin-top: 65px;">
+  <div class="row">
+    <!-- Desktop Sidebar -->
+    <nav class="col-lg-3 d-none d-lg-block px-3 pb-3 pt-0" aria-label="Account navigation">
+      <div class="card border-0 shadow-sm bg-body-tertiary position-sticky" style="top: 80px;">
+        <div class="card-body p-3">
+          <ul class="nav nav-pills flex-column" id="account-nav" role="tablist" aria-label="Account sections">
+            {% for section in page.resolved.sections %}
+            <li class="nav-item {% if section.id == 'delete' %}d-none{% endif %}" id="{{ section.id }}-nav-item">
+              <a class="nav-link d-flex align-items-center {% if forloop.first %}active{% endif %}"
+                 href="#{{ section.id }}"
+                 data-section="{{ section.id }}"
+                 role="tab">
+                <span class="me-2 d-inline-flex align-items-center justify-content-center">{% uj_icon section.icon, "fa-lg" %}</span>
+                <span>{{ section.name }}</span>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+
+          <!-- Sign Out Button -->
+          <div class="mt-3 pt-3 border-top">
+            <button class="btn btn-danger w-100 d-flex align-items-center justify-content-center auth-signout-btn">
+              {% uj_icon "arrow-right-from-bracket", "me-2" %}
+              <span class="button-text">Sign Out</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Content Area -->
+    <div class="col-lg-9 text-start">
+      <div class="px-3 py-4 pt-0">
+
+      <!-- Loading Section (visible initially) -->
+      <section id="loading-section" class="account-section">
+        <div class="d-flex flex-column align-items-center justify-content-center" style="min-height: 400px;">
+          <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+          <h4 class="text-muted">Loading your account...</h4>
+        </div>
+      </section>
+
+      <!-- Profile Section -->
+      <section id="profile-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">My Profile</h2>
+
+        <form id="profile-form" novalidate>
+          <!-- Avatar and Edit Button -->
+          <div class="mb-4">
+            <div class="d-flex align-items-center">
+              <div id="avatar-container" class="me-3 position-relative">
+                <!-- Avatar always available from getUser() -->
+                <div class="rounded-circle overflow-hidden border" style="width: 64px; height: 64px;">
+                  <img src="{{ site.uj.placeholder.src }}" alt="Profile picture" class="w-100 h-100" style="object-fit: cover;" data-wm-bind="@attr src user.photoURL"/>
+                </div>
+                <!-- Active status indicator -->
+                <span class="position-absolute bottom-0 end-0 p-1 bg-success border border-2 border-white rounded-circle" style="width: 16px; height: 16px;">
+                  <span class="visually-hidden">Active status</span>
+                </span>
+              </div>
+              <div>
+                <h5 class="mb-1" data-wm-bind="@text user.displayName">Loading...</h5>
+                <small class="text-muted" id="profile-join-date">Member since Loading...</small>
+              </div>
+            </div>
+
+            <!-- Role Badges -->
+            <div id="role-badges" class="mt-2 d-flex gap-2 flex-wrap">
+              <!-- Member Badge (always visible) -->
+              <span id="badge-member" class="badge bg-primary">
+                {% uj_icon "sailboat", "fa-sm" %}
+                Member
+              </span>
+
+              <!-- Admin Badge -->
+              <span id="badge-admin" class="badge bg-danger d-none">
+                {% uj_icon "hat-wizard", "fa-sm" %}
+                Admin
+              </span>
+
+              <!-- Premium Badge -->
+              <span id="badge-premium" class="badge bg-success d-none">
+                {% uj_icon "crown", "fa-sm" %}
+                Premium
+              </span>
+
+              <!-- Beta Badge -->
+              <span id="badge-beta" class="badge d-none" style="background-color: #6f42c1;">
+                {% uj_icon "bolt", "fa-sm" %}
+                Beta
+              </span>
+
+              <!-- Developer Badge -->
+              <span id="badge-coder" class="badge d-none" style="background-color: #20c997;">
+                {% uj_icon "code", "fa-sm" %}
+                Developer
+              </span>
+
+              <!-- Moderator Badge -->
+              <span id="badge-moderator" class="badge d-none" style="background-color: #fd7e14;">
+                {% uj_icon "shield-halved", "fa-sm" %}
+                Moderator
+              </span>
+
+              <!-- VIP Badge -->
+              <span id="badge-vip" class="badge d-none" style="background-color: #ffc107;">
+                {% uj_icon "award", "fa-sm" %}
+                VIP
+              </span>
+            </div>
+          </div>
+
+          <!-- Account Details Section -->
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title text-body mb-3">Account Details</h5>
+
+              <!-- Email and UID Fields Row -->
+              <div class="row g-3">
+                <!-- Email Field -->
+                <div class="col-lg-6">
+                  <label class="form-label small text-muted">
+                    Email
+                  </label>
+                  <input type="email" class="form-control" id="email-input" name="auth.email" readonly>
+                </div>
+
+                <!-- UID Field -->
+                <div class="col-lg-6">
+                  <label class="form-label small text-muted">
+                    User ID
+                  </label>
+                  <div class="input-group">
+                    <input type="text" class="form-control" id="uid-input" name="auth.uid" readonly style="font-family: monospace;">
+                    <button type="button" class="btn btn-outline-adaptive" id="copy-uid-btn">{% uj_icon "copy", "me-2" %}<span class="button-text d-none d-sm-inline">Copy</span></button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Personal Information Section -->
+          <div class="card mb-3">
+            <div class="card-body">
+              <h5 class="card-title text-body mb-3">Personal Information</h5>
+
+              <!-- Name Fields Row -->
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <label for="first-name-input" class="form-label small text-muted">First Name</label>
+                  <input type="text" class="form-control" id="first-name-input" name="personal.name.first" placeholder="Enter first name">
+                </div>
+                <div class="col-md-6">
+                  <label for="last-name-input" class="form-label small text-muted">Last Name</label>
+                  <input type="text" class="form-control" id="last-name-input" name="personal.name.last" placeholder="Enter last name">
+                </div>
+              </div>
+
+              <!-- Birthday and Gender Row -->
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <label for="birthday-input" class="form-label small text-muted">Birthday</label>
+                  <input type="date" class="form-control" id="birthday-input" name="personal.birthday">
+                </div>
+                <div class="col-md-6">
+                  <label for="gender-select" class="form-label small text-muted">Gender</label>
+                  <select class="form-select" id="gender-select" name="personal.gender">
+                    <option value="">Select gender</option>
+                    <option value="male">Male</option>
+                    <option value="female">Female</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+              </div>
+
+              <!-- Country and Region Row -->
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <label for="country-select" class="form-label small text-muted">Country</label>
+                  <select class="form-select" id="country-select" name="personal.location.country">
+                <option value="">Select country</option>
+                <option value="AF">Afghanistan</option>
+                <option value="AL">Albania</option>
+                <option value="DZ">Algeria</option>
+                <option value="AD">Andorra</option>
+                <option value="AO">Angola</option>
+                <option value="AG">Antigua and Barbuda</option>
+                <option value="AR">Argentina</option>
+                <option value="AM">Armenia</option>
+                <option value="AU">Australia</option>
+                <option value="AT">Austria</option>
+                <option value="AZ">Azerbaijan</option>
+                <option value="BS">Bahamas</option>
+                <option value="BH">Bahrain</option>
+                <option value="BD">Bangladesh</option>
+                <option value="BB">Barbados</option>
+                <option value="BY">Belarus</option>
+                <option value="BE">Belgium</option>
+                <option value="BZ">Belize</option>
+                <option value="BJ">Benin</option>
+                <option value="BT">Bhutan</option>
+                <option value="BO">Bolivia</option>
+                <option value="BA">Bosnia and Herzegovina</option>
+                <option value="BW">Botswana</option>
+                <option value="BR">Brazil</option>
+                <option value="BN">Brunei</option>
+                <option value="BG">Bulgaria</option>
+                <option value="BF">Burkina Faso</option>
+                <option value="BI">Burundi</option>
+                <option value="KH">Cambodia</option>
+                <option value="CM">Cameroon</option>
+                <option value="CA">Canada</option>
+                <option value="CV">Cape Verde</option>
+                <option value="CF">Central African Republic</option>
+                <option value="TD">Chad</option>
+                <option value="CL">Chile</option>
+                <option value="CN">China</option>
+                <option value="CO">Colombia</option>
+                <option value="KM">Comoros</option>
+                <option value="CG">Congo</option>
+                <option value="CR">Costa Rica</option>
+                <option value="HR">Croatia</option>
+                <option value="CU">Cuba</option>
+                <option value="CY">Cyprus</option>
+                <option value="CZ">Czech Republic</option>
+                <option value="DK">Denmark</option>
+                <option value="DJ">Djibouti</option>
+                <option value="DM">Dominica</option>
+                <option value="DO">Dominican Republic</option>
+                <option value="EC">Ecuador</option>
+                <option value="EG">Egypt</option>
+                <option value="SV">El Salvador</option>
+                <option value="GQ">Equatorial Guinea</option>
+                <option value="ER">Eritrea</option>
+                <option value="EE">Estonia</option>
+                <option value="ET">Ethiopia</option>
+                <option value="FJ">Fiji</option>
+                <option value="FI">Finland</option>
+                <option value="FR">France</option>
+                <option value="GA">Gabon</option>
+                <option value="GM">Gambia</option>
+                <option value="GE">Georgia</option>
+                <option value="DE">Germany</option>
+                <option value="GH">Ghana</option>
+                <option value="GR">Greece</option>
+                <option value="GD">Grenada</option>
+                <option value="GT">Guatemala</option>
+                <option value="GN">Guinea</option>
+                <option value="GW">Guinea-Bissau</option>
+                <option value="GY">Guyana</option>
+                <option value="HT">Haiti</option>
+                <option value="HN">Honduras</option>
+                <option value="HU">Hungary</option>
+                <option value="IS">Iceland</option>
+                <option value="IN">India</option>
+                <option value="ID">Indonesia</option>
+                <option value="IR">Iran</option>
+                <option value="IQ">Iraq</option>
+                <option value="IE">Ireland</option>
+                <option value="IL">Israel</option>
+                <option value="IT">Italy</option>
+                <option value="JM">Jamaica</option>
+                <option value="JP">Japan</option>
+                <option value="JO">Jordan</option>
+                <option value="KZ">Kazakhstan</option>
+                <option value="KE">Kenya</option>
+                <option value="KI">Kiribati</option>
+                <option value="KP">North Korea</option>
+                <option value="KR">South Korea</option>
+                <option value="KW">Kuwait</option>
+                <option value="KG">Kyrgyzstan</option>
+                <option value="LA">Laos</option>
+                <option value="LV">Latvia</option>
+                <option value="LB">Lebanon</option>
+                <option value="LS">Lesotho</option>
+                <option value="LR">Liberia</option>
+                <option value="LY">Libya</option>
+                <option value="LI">Liechtenstein</option>
+                <option value="LT">Lithuania</option>
+                <option value="LU">Luxembourg</option>
+                <option value="MK">Macedonia</option>
+                <option value="MG">Madagascar</option>
+                <option value="MW">Malawi</option>
+                <option value="MY">Malaysia</option>
+                <option value="MV">Maldives</option>
+                <option value="ML">Mali</option>
+                <option value="MT">Malta</option>
+                <option value="MH">Marshall Islands</option>
+                <option value="MR">Mauritania</option>
+                <option value="MU">Mauritius</option>
+                <option value="MX">Mexico</option>
+                <option value="FM">Micronesia</option>
+                <option value="MD">Moldova</option>
+                <option value="MC">Monaco</option>
+                <option value="MN">Mongolia</option>
+                <option value="ME">Montenegro</option>
+                <option value="MA">Morocco</option>
+                <option value="MZ">Mozambique</option>
+                <option value="MM">Myanmar</option>
+                <option value="NA">Namibia</option>
+                <option value="NR">Nauru</option>
+                <option value="NP">Nepal</option>
+                <option value="NL">Netherlands</option>
+                <option value="NZ">New Zealand</option>
+                <option value="NI">Nicaragua</option>
+                <option value="NE">Niger</option>
+                <option value="NG">Nigeria</option>
+                <option value="NO">Norway</option>
+                <option value="OM">Oman</option>
+                <option value="PK">Pakistan</option>
+                <option value="PW">Palau</option>
+                <option value="PA">Panama</option>
+                <option value="PG">Papua New Guinea</option>
+                <option value="PY">Paraguay</option>
+                <option value="PE">Peru</option>
+                <option value="PH">Philippines</option>
+                <option value="PL">Poland</option>
+                <option value="PT">Portugal</option>
+                <option value="QA">Qatar</option>
+                <option value="RO">Romania</option>
+                <option value="RU">Russia</option>
+                <option value="RW">Rwanda</option>
+                <option value="KN">Saint Kitts and Nevis</option>
+                <option value="LC">Saint Lucia</option>
+                <option value="VC">Saint Vincent and the Grenadines</option>
+                <option value="WS">Samoa</option>
+                <option value="SM">San Marino</option>
+                <option value="ST">Sao Tome and Principe</option>
+                <option value="SA">Saudi Arabia</option>
+                <option value="SN">Senegal</option>
+                <option value="RS">Serbia</option>
+                <option value="SC">Seychelles</option>
+                <option value="SL">Sierra Leone</option>
+                <option value="SG">Singapore</option>
+                <option value="SK">Slovakia</option>
+                <option value="SI">Slovenia</option>
+                <option value="SB">Solomon Islands</option>
+                <option value="SO">Somalia</option>
+                <option value="ZA">South Africa</option>
+                <option value="ES">Spain</option>
+                <option value="LK">Sri Lanka</option>
+                <option value="SD">Sudan</option>
+                <option value="SR">Suriname</option>
+                <option value="SZ">Swaziland</option>
+                <option value="SE">Sweden</option>
+                <option value="CH">Switzerland</option>
+                <option value="SY">Syria</option>
+                <option value="TW">Taiwan</option>
+                <option value="TJ">Tajikistan</option>
+                <option value="TZ">Tanzania</option>
+                <option value="TH">Thailand</option>
+                <option value="TL">Timor-Leste</option>
+                <option value="TG">Togo</option>
+                <option value="TO">Tonga</option>
+                <option value="TT">Trinidad and Tobago</option>
+                <option value="TN">Tunisia</option>
+                <option value="TR">Turkey</option>
+                <option value="TM">Turkmenistan</option>
+                <option value="TV">Tuvalu</option>
+                <option value="UG">Uganda</option>
+                <option value="UA">Ukraine</option>
+                <option value="AE">United Arab Emirates</option>
+                <option value="GB">United Kingdom</option>
+                <option value="US">United States</option>
+                <option value="UY">Uruguay</option>
+                <option value="UZ">Uzbekistan</option>
+                <option value="VU">Vanuatu</option>
+                <option value="VA">Vatican City</option>
+                <option value="VE">Venezuela</option>
+                <option value="VN">Vietnam</option>
+                <option value="YE">Yemen</option>
+                <option value="ZM">Zambia</option>
+                <option value="ZW">Zimbabwe</option>
+                  </select>
+                </div>
+                <div class="col-md-6">
+                  <label for="region-input" class="form-label small text-muted">Region</label>
+                  <input type="text" class="form-control" id="region-input" name="personal.location.region" placeholder="State, Province, or Region">
+                </div>
+              </div>
+
+              <!-- City and Phone Row -->
+              <div class="row g-3 mb-3">
+                <div class="col-md-6">
+                  <label for="city-input" class="form-label small text-muted">City</label>
+                  <input type="text" class="form-control" id="city-input" name="personal.location.city" placeholder="City">
+                </div>
+                <div class="col-md-6">
+                  <label for="phone-input" class="form-label small text-muted">Phone</label>
+                  <div class="input-group">
+                <select class="form-select" id="phone-country-code" name="personal.telephone.countryCode" style="max-width: 140px;">
+                  <option value="+1">USA/CAN (+1)</option>
+                  <option value="+7">RUS/KAZ (+7)</option>
+                  <option value="+20">EGY (+20)</option>
+                  <option value="+27">ZAF (+27)</option>
+                  <option value="+30">GRC (+30)</option>
+                  <option value="+31">NLD (+31)</option>
+                  <option value="+32">BEL (+32)</option>
+                  <option value="+33">FRA (+33)</option>
+                  <option value="+34">ESP (+34)</option>
+                  <option value="+36">HUN (+36)</option>
+                  <option value="+39">ITA (+39)</option>
+                  <option value="+40">ROU (+40)</option>
+                  <option value="+41">CHE (+41)</option>
+                  <option value="+43">AUT (+43)</option>
+                  <option value="+44">GBR (+44)</option>
+                  <option value="+45">DNK (+45)</option>
+                  <option value="+46">SWE (+46)</option>
+                  <option value="+47">NOR (+47)</option>
+                  <option value="+48">POL (+48)</option>
+                  <option value="+49">DEU (+49)</option>
+                  <option value="+51">PER (+51)</option>
+                  <option value="+52">MEX (+52)</option>
+                  <option value="+53">CUB (+53)</option>
+                  <option value="+54">ARG (+54)</option>
+                  <option value="+55">BRA (+55)</option>
+                  <option value="+56">CHL (+56)</option>
+                  <option value="+57">COL (+57)</option>
+                  <option value="+58">VEN (+58)</option>
+                  <option value="+60">MYS (+60)</option>
+                  <option value="+61">AUS (+61)</option>
+                  <option value="+62">IDN (+62)</option>
+                  <option value="+63">PHL (+63)</option>
+                  <option value="+64">NZL (+64)</option>
+                  <option value="+65">SGP (+65)</option>
+                  <option value="+66">THA (+66)</option>
+                  <option value="+81">JPN (+81)</option>
+                  <option value="+82">KOR (+82)</option>
+                  <option value="+84">VNM (+84)</option>
+                  <option value="+86">CHN (+86)</option>
+                  <option value="+90">TUR (+90)</option>
+                  <option value="+91">IND (+91)</option>
+                  <option value="+92">PAK (+92)</option>
+                  <option value="+93">AFG (+93)</option>
+                  <option value="+94">LKA (+94)</option>
+                  <option value="+95">MMR (+95)</option>
+                  <option value="+98">IRN (+98)</option>
+                  <option value="+212">MAR (+212)</option>
+                  <option value="+213">DZA (+213)</option>
+                  <option value="+216">TUN (+216)</option>
+                  <option value="+218">LBY (+218)</option>
+                  <option value="+220">GMB (+220)</option>
+                  <option value="+221">SEN (+221)</option>
+                  <option value="+222">MRT (+222)</option>
+                  <option value="+223">MLI (+223)</option>
+                  <option value="+224">GIN (+224)</option>
+                  <option value="+225">CIV (+225)</option>
+                  <option value="+226">BFA (+226)</option>
+                  <option value="+227">NER (+227)</option>
+                  <option value="+228">TGO (+228)</option>
+                  <option value="+229">BEN (+229)</option>
+                  <option value="+230">MUS (+230)</option>
+                  <option value="+231">LBR (+231)</option>
+                  <option value="+232">SLE (+232)</option>
+                  <option value="+233">GHA (+233)</option>
+                  <option value="+234">NGA (+234)</option>
+                  <option value="+235">TCD (+235)</option>
+                  <option value="+236">CAF (+236)</option>
+                  <option value="+237">CMR (+237)</option>
+                  <option value="+238">CPV (+238)</option>
+                  <option value="+239">STP (+239)</option>
+                  <option value="+240">GNQ (+240)</option>
+                  <option value="+241">GAB (+241)</option>
+                  <option value="+242">COG (+242)</option>
+                  <option value="+243">COD (+243)</option>
+                  <option value="+244">AGO (+244)</option>
+                  <option value="+245">GNB (+245)</option>
+                  <option value="+246">IOT (+246)</option>
+                  <option value="+248">SYC (+248)</option>
+                  <option value="+249">SDN (+249)</option>
+                  <option value="+250">RWA (+250)</option>
+                  <option value="+251">ETH (+251)</option>
+                  <option value="+252">SOM (+252)</option>
+                  <option value="+253">DJI (+253)</option>
+                  <option value="+254">KEN (+254)</option>
+                  <option value="+255">TZA (+255)</option>
+                  <option value="+256">UGA (+256)</option>
+                  <option value="+257">BDI (+257)</option>
+                  <option value="+258">MOZ (+258)</option>
+                  <option value="+260">ZMB (+260)</option>
+                  <option value="+261">MDG (+261)</option>
+                  <option value="+262">REU (+262)</option>
+                  <option value="+263">ZWE (+263)</option>
+                  <option value="+264">NAM (+264)</option>
+                  <option value="+265">MWI (+265)</option>
+                  <option value="+266">LSO (+266)</option>
+                  <option value="+267">BWA (+267)</option>
+                  <option value="+268">SWZ (+268)</option>
+                  <option value="+269">COM (+269)</option>
+                  <option value="+290">SHN (+290)</option>
+                  <option value="+291">ERI (+291)</option>
+                  <option value="+297">ABW (+297)</option>
+                  <option value="+298">FRO (+298)</option>
+                  <option value="+299">GRL (+299)</option>
+                  <option value="+350">GIB (+350)</option>
+                  <option value="+351">PRT (+351)</option>
+                  <option value="+352">LUX (+352)</option>
+                  <option value="+353">IRL (+353)</option>
+                  <option value="+354">ISL (+354)</option>
+                  <option value="+355">ALB (+355)</option>
+                  <option value="+356">MLT (+356)</option>
+                  <option value="+357">CYP (+357)</option>
+                  <option value="+358">FIN (+358)</option>
+                  <option value="+359">BGR (+359)</option>
+                  <option value="+370">LTU (+370)</option>
+                  <option value="+371">LVA (+371)</option>
+                  <option value="+372">EST (+372)</option>
+                  <option value="+373">MDA (+373)</option>
+                  <option value="+374">ARM (+374)</option>
+                  <option value="+375">BLR (+375)</option>
+                  <option value="+376">AND (+376)</option>
+                  <option value="+377">MCO (+377)</option>
+                  <option value="+378">SMR (+378)</option>
+                  <option value="+380">UKR (+380)</option>
+                  <option value="+381">SRB (+381)</option>
+                  <option value="+382">MNE (+382)</option>
+                  <option value="+385">HRV (+385)</option>
+                  <option value="+386">SVN (+386)</option>
+                  <option value="+387">BIH (+387)</option>
+                  <option value="+389">MKD (+389)</option>
+                  <option value="+420">CZE (+420)</option>
+                  <option value="+421">SVK (+421)</option>
+                  <option value="+423">LIE (+423)</option>
+                  <option value="+500">FLK (+500)</option>
+                  <option value="+501">BLZ (+501)</option>
+                  <option value="+502">GTM (+502)</option>
+                  <option value="+503">SLV (+503)</option>
+                  <option value="+504">HND (+504)</option>
+                  <option value="+505">NIC (+505)</option>
+                  <option value="+506">CRI (+506)</option>
+                  <option value="+507">PAN (+507)</option>
+                  <option value="+509">HTI (+509)</option>
+                  <option value="+590">GLP/BLF/MAF (+590)</option>
+                  <option value="+591">BOL (+591)</option>
+                  <option value="+592">GUY (+592)</option>
+                  <option value="+593">ECU (+593)</option>
+                  <option value="+594">GUF (+594)</option>
+                  <option value="+595">PRY (+595)</option>
+                  <option value="+596">MTQ (+596)</option>
+                  <option value="+597">SUR (+597)</option>
+                  <option value="+598">URY (+598)</option>
+                  <option value="+599">CUW/BES (+599)</option>
+                  <option value="+670">TLS (+670)</option>
+                  <option value="+673">BRN (+673)</option>
+                  <option value="+674">NRU (+674)</option>
+                  <option value="+675">PNG (+675)</option>
+                  <option value="+676">TON (+676)</option>
+                  <option value="+677">SLB (+677)</option>
+                  <option value="+678">VUT (+678)</option>
+                  <option value="+679">FJI (+679)</option>
+                  <option value="+680">PLW (+680)</option>
+                  <option value="+681">WLF (+681)</option>
+                  <option value="+682">COK (+682)</option>
+                  <option value="+683">NIU (+683)</option>
+                  <option value="+685">WSM (+685)</option>
+                  <option value="+686">KIR (+686)</option>
+                  <option value="+687">NCL (+687)</option>
+                  <option value="+688">TUV (+688)</option>
+                  <option value="+689">PYF (+689)</option>
+                  <option value="+690">TKL (+690)</option>
+                  <option value="+691">FSM (+691)</option>
+                  <option value="+692">MHL (+692)</option>
+                  <option value="+850">PRK (+850)</option>
+                  <option value="+852">HKG (+852)</option>
+                  <option value="+853">MAC (+853)</option>
+                  <option value="+855">KHM (+855)</option>
+                  <option value="+856">LAO (+856)</option>
+                  <option value="+880">BGD (+880)</option>
+                  <option value="+886">TWN (+886)</option>
+                  <option value="+960">MDV (+960)</option>
+                  <option value="+961">LBN (+961)</option>
+                  <option value="+962">JOR (+962)</option>
+                  <option value="+963">SYR (+963)</option>
+                  <option value="+964">IRQ (+964)</option>
+                  <option value="+965">KWT (+965)</option>
+                  <option value="+966">SAU (+966)</option>
+                  <option value="+967">YEM (+967)</option>
+                  <option value="+968">OMN (+968)</option>
+                  <option value="+970">PSE (+970)</option>
+                  <option value="+971">ARE (+971)</option>
+                  <option value="+972">ISR (+972)</option>
+                  <option value="+973">BHR (+973)</option>
+                  <option value="+974">QAT (+974)</option>
+                  <option value="+975">BTN (+975)</option>
+                  <option value="+976">MNG (+976)</option>
+                  <option value="+977">NPL (+977)</option>
+                  <option value="+992">TJK (+992)</option>
+                  <option value="+993">TKM (+993)</option>
+                  <option value="+994">AZE (+994)</option>
+                  <option value="+995">GEO (+995)</option>
+                  <option value="+996">KGZ (+996)</option>
+                  <option value="+998">UZB (+998)</option>
+                    </select>
+                    <input type="tel" class="form-control" id="phone-input" name="personal.telephone.national" placeholder="Phone number">
+                  </div>
+                </div>
+              </div>
+
+              <!-- Save Button -->
+              <div class="mt-3">
+                <button type="submit" class="btn btn-primary">{% uj_icon "floppy-disk", "me-2" %}<span class="button-text">Save Changes</span></button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </section>
+
+      <!-- Notifications Section -->
+      <section id="notifications-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Notifications</h2>
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Email Notifications</h5>
+
+            <div class="form-check form-switch mb-3">
+              <input class="form-check-input" type="checkbox" id="marketing-emails" checked>
+              <label class="form-check-label" for="marketing-emails">
+                Marketing emails
+                <small class="d-block text-muted">Receive emails about new features and updates</small>
+              </label>
+            </div>
+
+            <div class="form-check form-switch mb-3">
+              <input class="form-check-input" type="checkbox" id="security-emails" checked>
+              <label class="form-check-label" for="security-emails">
+                Security alerts
+                <small class="d-block text-muted">Get notified about important security updates</small>
+              </label>
+            </div>
+
+            <div class="form-check form-switch">
+              <input class="form-check-input" type="checkbox" id="product-emails">
+              <label class="form-check-label" for="product-emails">
+                Product updates
+                <small class="d-block text-muted">Receive updates about your products and services</small>
+              </label>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Security Section -->
+      <section id="security-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Security and Data</h2>
+
+        <!-- Sign-in Methods Section -->
+        <div class="card mb-3">
+          <div class="card-body">
+            <h5 class="card-title mb-3">Sign-in Methods</h5>
+
+            <div id="signin-methods-list">
+              <!-- Password Method -->
+              <div class="d-flex justify-content-between align-items-center mb-3 pb-3 border-bottom">
+                <div class="d-flex align-items-center">
+                  <div class="d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 2rem; height: 2rem;">
+                    {% uj_icon "key", "fa-3xl text-muted" %}
+                  </div>
+                  <div>
+                    <strong>Password</strong>
+                    <div class="text-muted small" id="password-email"></div>
+                  </div>
+                </div>
+                <form id="signin-method-password-form" class="d-inline" novalidate>
+                  <input type="hidden" name="method" value="password">
+                  <input type="hidden" name="action" value="change">
+                  <button type="submit" class="btn btn-primary btn-sm">
+                    {% uj_icon "key", "me-1" %}
+                    <span class="button-text">Change Password</span>
+                  </button>
+                </form>
+              </div>
+
+              <!-- Google Method -->
+              <div class="d-flex justify-content-between align-items-center">
+                <div class="d-flex align-items-center">
+                  <div class="d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 2rem; height: 2rem;">
+                    <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/google.svg" alt="Google" class="w-100 h-100">
+                  </div>
+                  <div>
+                    <strong>Google</strong>
+                    <div class="text-muted small" id="google-email"></div>
+                  </div>
+                </div>
+                <form id="signin-method-google-form" class="d-inline" novalidate>
+                  <input type="hidden" name="method" value="google">
+                  <input type="hidden" name="action" value="connect">
+                  <button type="submit" class="btn btn-primary btn-sm">
+                    {% uj_icon "link", "me-1" %}
+                    <span class="button-text">Connect</span>
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="card mb-3">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+              <h5 class="card-title mb-0">Two-Factor Authentication</h5>
+              <span id="2fa-status"></span>
+            </div>
+            <p class="card-text">Add an extra layer of security to your account.</p>
+            <button id="2fa-btn" class="btn btn-primary">Enable 2FA</button>
+          </div>
+        </div> -->
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Active Sessions</h5>
+            <p class="card-text text-muted">Manage your active sessions across devices. Review and revoke access from unrecognized devices.</p>
+            <div id="active-sessions-list" class="list-group list-group-flush mb-3">
+              <!-- Sessions will be loaded here -->
+              <div class="text-center py-3">
+                <div class="spinner-border spinner-border-sm text-primary" role="status">
+                  <span class="visually-hidden">Loading sessions...</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Sign out of all sessions -->
+            <form id="signout-all-sessions-form" novalidate>
+              <input type="hidden" name="action" value="signout-all">
+              <button type="submit" class="btn btn-outline-danger">
+                {% uj_icon "right-from-bracket", "me-1" %}
+                <span class="button-text">Sign out of all sessions</span>
+              </button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <!-- Connections Section -->
+      <section id="connections-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Connected Accounts</h2>
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Manage Connections</h5>
+            <p class="text-muted">Connect your external accounts to access additional features.</p>
+
+            <div id="connections-list" class="list-group list-group-flush">
+              <!-- Loading state -->
+              <div id="connections-loading" class="text-center py-3">
+                <div class="spinner-border spinner-border-sm text-primary" role="status">
+                  <span class="visually-hidden">Loading connections...</span>
+                </div>
+              </div>
+
+              <!-- No connections message (hidden by default) -->
+              <div id="connections-empty" class="text-center py-4 text-muted d-none">
+                <p>No connections are available right now.</p>
+              </div>
+
+              <!-- Google connection -->
+              <div id="connection-google" class="list-group-item px-0 py-3 d-none bg-body-tertiary">
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="d-flex align-items-center">
+                    <div class="me-3" style="width: 40px; height: 40px;">
+                      <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/google.svg" alt="Google" class="w-100 h-100" style="object-fit: contain;">
+                    </div>
+                    <div>
+                      <h6 class="mb-0">Google</h6>
+                      <small class="text-muted d-block" id="google-connection-description"></small>
+                    </div>
+                  </div>
+                  <div class="text-end">
+                    <form id="connection-form-google" class="d-inline" novalidate>
+                      <input type="hidden" name="provider" value="google">
+                      <input type="hidden" name="action" value="connect">
+                      <button type="submit" class="btn btn-sm btn-primary" data-connect-text="Connect" data-disconnect-text="Disconnect">
+                        {% uj_icon "link", "fa-sm" %}
+                        <span class="button-text">Connect</span>
+                      </button>
+                    </form>
+                    <small class="text-muted d-block mt-1" id="google-connection-status"></small>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Discord connection -->
+              <div id="connection-discord" class="list-group-item px-0 py-3 d-none bg-body-tertiary">
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="d-flex align-items-center">
+                    <div class="me-3" style="width: 40px; height: 40px;">
+                      <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/discord.svg" alt="Discord" class="w-100 h-100" style="object-fit: contain;">
+                    </div>
+                    <div>
+                      <h6 class="mb-0">Discord</h6>
+                      <small class="text-muted d-block" id="discord-connection-description"></small>
+                    </div>
+                  </div>
+                  <div class="text-end">
+                    <form id="connection-form-discord" class="d-inline" novalidate>
+                      <input type="hidden" name="provider" value="discord">
+                      <input type="hidden" name="action" value="connect">
+                      <button type="submit" class="btn btn-sm btn-primary" data-connect-text="Connect" data-disconnect-text="Disconnect">
+                        {% uj_icon "link", "fa-sm" %}
+                        <span class="button-text">Connect</span>
+                      </button>
+                    </form>
+                    <small class="text-muted d-block mt-1" id="discord-connection-status"></small>
+                  </div>
+                </div>
+              </div>
+
+              <!-- GitHub connection -->
+              <div id="connection-github" class="list-group-item px-0 py-3 d-none bg-body-tertiary">
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="d-flex align-items-center">
+                    <div class="me-3" style="width: 40px; height: 40px;">
+                      <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/github.svg" alt="GitHub" class="w-100 h-100" style="object-fit: contain;">
+                    </div>
+                    <div>
+                      <h6 class="mb-0">GitHub</h6>
+                      <small class="text-muted d-block" id="github-connection-description"></small>
+                    </div>
+                  </div>
+                  <div class="text-end">
+                    <form id="connection-form-github" class="d-inline" novalidate>
+                      <input type="hidden" name="provider" value="github">
+                      <input type="hidden" name="action" value="connect">
+                      <button type="submit" class="btn btn-sm btn-primary" data-connect-text="Connect" data-disconnect-text="Disconnect">
+                        {% uj_icon "link", "fa-sm" %}
+                        <span class="button-text">Connect</span>
+                      </button>
+                    </form>
+                    <small class="text-muted d-block mt-1" id="github-connection-status"></small>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Twitter connection -->
+              <div id="connection-twitter" class="list-group-item px-0 py-3 d-none bg-body-tertiary">
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="d-flex align-items-center">
+                    <div class="me-3" style="width: 40px; height: 40px;">
+                      <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/twitter.svg" alt="Twitter" class="w-100 h-100" style="object-fit: contain;">
+                    </div>
+                    <div>
+                      <h6 class="mb-0">Twitter</h6>
+                      <small class="text-muted d-block" id="twitter-connection-description"></small>
+                    </div>
+                  </div>
+                  <div class="text-end">
+                    <form id="connection-form-twitter" class="d-inline" novalidate>
+                      <input type="hidden" name="provider" value="twitter">
+                      <input type="hidden" name="action" value="connect">
+                      <button type="submit" class="btn btn-sm btn-primary" data-connect-text="Connect" data-disconnect-text="Disconnect">
+                        {% uj_icon "link", "fa-sm" %}
+                        <span class="button-text">Connect</span>
+                      </button>
+                    </form>
+                    <small class="text-muted d-block mt-1" id="twitter-connection-status"></small>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Facebook connection -->
+              <div id="connection-facebook" class="list-group-item px-0 py-3 d-none bg-body-tertiary">
+                <div class="d-flex align-items-center justify-content-between">
+                  <div class="d-flex align-items-center">
+                    <div class="me-3" style="width: 40px; height: 40px;">
+                      <img src="https://cdn.itwcreativeworks.com/assets/general/images/brands/color/facebook.svg" alt="Facebook" class="w-100 h-100" style="object-fit: contain;">
+                    </div>
+                    <div>
+                      <h6 class="mb-0">Facebook</h6>
+                      <small class="text-muted d-block" id="facebook-connection-description"></small>
+                    </div>
+                  </div>
+                  <div class="text-end">
+                    <form id="connection-form-facebook" class="d-inline" novalidate>
+                      <input type="hidden" name="provider" value="facebook">
+                      <input type="hidden" name="action" value="connect">
+                      <button type="submit" class="btn btn-sm btn-primary" data-connect-text="Connect" data-disconnect-text="Disconnect">
+                        {% uj_icon "link", "fa-sm" %}
+                        <span class="button-text">Connect</span>
+                      </button>
+                    </form>
+                    <small class="text-muted d-block mt-1" id="facebook-connection-status"></small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Billing Section -->
+      <section id="billing-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Billing and Usage</h2>
+
+        <div class="card mb-3">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <div>
+                <h5 class="card-title mb-1">Current Plan</h5>
+                <p class="card-text mb-0">
+                  You are currently on the <strong id="current-plan-name">Basic</strong> plan.
+                  <span id="plan-status" class="ms-2"></span>
+                </p>
+              </div>
+            </div>
+
+            <div id="billing-details" class="mb-3"></div>
+
+            <button id="upgrade-plan-btn" class="btn btn-success">
+              {% uj_icon "crown", "me-2" %}
+              <span class="button-text">Upgrade Plan</span>
+            </button>
+          </div>
+        </div>
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Usage</h5>
+            <div id="usage-metrics-container">
+              <!-- Usage metrics will be dynamically inserted here -->
+              <div class="text-muted">Loading usage data...</div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Team Section -->
+      <section id="team-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Team</h2>
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h5 class="card-title mb-0">Team Members</h5>
+              <button class="btn btn-primary btn-sm" id="invite-team-member-btn">{% uj_icon "user-plus", "me-2" %}<span class="button-text">Invite Team Member</span></button>
+            </div>
+
+            <div class="list-group" id="team-list">
+              <div class="list-group-item">
+                <div class="d-flex justify-content-between align-items-center">
+                  <div>
+                    <strong>You</strong>
+                    <small class="text-muted d-block">Owner</small>
+                  </div>
+                  <span class="badge bg-primary">Owner</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Referrals Section -->
+      <section id="referrals-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">Referrals</h2>
+
+        <!-- Referral Code Card -->
+        <div class="card mb-3">
+          <div class="card-body">
+            <h5 class="card-title">Your Referral Code</h5>
+            <p class="card-text text-muted">Share your referral code with friends to earn rewards.</p>
+
+            <div class="mb-3">
+              <div class="input-group">
+                <input type="text" class="form-control form-control-lg font-monospace text-center" id="referral-code-input" readonly value="Loading...">
+                <button type="button" class="btn btn-outline-adaptive" id="copy-referral-code-btn">{% uj_icon "copy", "me-2" %}<span class="button-text">Copy Link</span></button>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- Referrals Stats Card -->
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Referral Statistics</h5>
+
+            <!-- Stats Summary -->
+            <div class="row text-center mb-4">
+              <div class="col">
+                <div class="h3 mb-0" id="total-referrals">0</div>
+                <div class="text-muted small">Total Referrals</div>
+              </div>
+              <div class="col">
+                <div class="h3 mb-0" id="recent-referrals">0</div>
+                <div class="text-muted small">This Month</div>
+              </div>
+            </div>
+
+            <!-- Referrals List Accordion -->
+            <div class="accordion" id="referrals-accordion">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="referrals-list-heading">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#referrals-list-collapse" aria-expanded="false" aria-controls="referrals-list-collapse">
+                    <span class="me-2">{% uj_icon "users", "fa-sm" %}</span>
+                    View Referral Details
+                    <span class="badge bg-primary ms-2" id="referrals-badge">0</span>
+                  </button>
+                </h2>
+                <div id="referrals-list-collapse" class="accordion-collapse collapse" aria-labelledby="referrals-list-heading" data-bs-parent="#referrals-accordion">
+                  <div class="accordion-body">
+                    <div id="referrals-list" class="list-group list-group-flush">
+                      <!-- Referrals will be loaded here -->
+                      <div class="text-center text-muted py-3">
+                        No referrals yet. Share your code to get started!
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- API Keys Section -->
+      <section id="api-keys-section" class="account-section d-none">
+        <h2 class="h3 mb-4" data-lazy="@class animation-fade-in">API Keys</h2>
+
+        <div class="card" data-lazy="@class animation-slide-up">
+          <div class="card-body">
+            <h5 class="card-title">Your API Key</h5>
+            <p class="card-text text-muted">Use this private key to authenticate API requests. Keep it secure and never share it publicly.</p>
+
+            <!-- API Key Display -->
+            <div class="mb-3">
+              <label class="form-label small text-muted">Private API Key</label>
+              <div class="input-group">
+                <input type="text" class="form-control font-monospace" id="api-key-input" readonly value="Loading...">
+                <button type="button" class="btn btn-outline-adaptive" id="copy-api-key-btn">{% uj_icon "copy", "me-2" %}<span class="button-text">Copy</span></button>
+              </div>
+            </div>
+
+            <!-- Reset API Key -->
+            <div class="alert alert-warning d-flex align-items-start" role="alert">
+              <div class="me-3">
+                {% uj_icon "triangle-exclamation", "fa-lg" %}
+              </div>
+              <div class="flex-grow-1">
+                <strong>Warning:</strong> Resetting your API key will invalidate the current key. Any applications using the old key will stop working.
+              </div>
+            </div>
+
+            <form id="reset-api-key-form" novalidate>
+              <button type="submit" class="btn btn-danger" id="reset-api-key-btn">{% uj_icon "rotate", "me-2" %}<span class="button-text">Reset API Key</span></button>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      <!-- Delete Account Section (Hidden by default) -->
+      <section id="delete-section" class="account-section d-none">
+        <h2 class="h3 mb-4 text-danger" data-lazy="@class animation-fade-in">Delete Account</h2>
+
+        <div class="alert alert-danger">
+          <h5 class="alert-heading">
+            {% uj_icon "triangle-exclamation", "fa-lg" %}
+            Warning: This action cannot be undone
+          </h5>
+          <p>Deleting your account will permanently remove:</p>
+          <ul class="mb-2">
+            <li>All your personal information</li>
+            <li>Your subscription and billing history</li>
+            <li>Access to all services and data</li>
+            <li>Any stored content or settings</li>
+          </ul>
+          <p class="mb-0"><strong>This action is immediate and irreversible.</strong></p>
+        </div>
+
+        <div class="card border-danger">
+          <div class="card-body">
+            <h5 class="card-title text-danger">Confirm Account Deletion</h5>
+
+            <form id="delete-account-form" novalidate>
+              <div class="mb-3">
+                <div class="form-check">
+                  <input class="form-check-input" type="checkbox" id="delete-confirm-checkbox" required>
+                  <label class="form-check-label" for="delete-confirm-checkbox">
+                    I understand that deleting my account is permanent and cannot be reversed. All my data will be lost forever.
+                  </label>
+                </div>
+              </div>
+
+              <div class="mb-3">
+                <label for="delete-reason" class="form-label">Reason for leaving (optional)</label>
+                <textarea class="form-control" id="delete-reason" rows="3" placeholder="Help us improve by sharing why you're leaving..."></textarea>
+              </div>
+
+              <div class="d-grid gap-2">
+                <button type="submit" class="btn btn-danger" id="delete-account-btn" disabled>{% uj_icon "trash", "fa-sm" %}<span class="button-text">Delete My Account Permanently</span></button>
+                <button type="button" class="btn btn-outline-secondary" id="cancel-delete-btn">
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+</div> <!-- End account-page wrapper -->