{% extends "dashboard/layout.html" %}

{% block title %}Mycelium Dashboard - Settings{% endblock %}

{% block dashboard_content %}
<div class="my-4">
    <h1>Account Settings</h1>
    <p class="lead">Manage your Mycelium account preferences and security settings</p>

    <div class="row mt-5">
        <div class="col-md-3">
            <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="true">Profile Information</button>
                <button class="nav-link" id="v-pills-password-tab" data-bs-toggle="pill" data-bs-target="#v-pills-password" type="button" role="tab" aria-controls="v-pills-password" aria-selected="false">Password</button>
                <button class="nav-link" id="v-pills-ssh-keys-tab" data-bs-toggle="pill" data-bs-target="#v-pills-ssh-keys" type="button" role="tab" aria-controls="v-pills-ssh-keys" aria-selected="false">SSH Keys</button>
                <button class="nav-link" id="v-pills-currency-tab" data-bs-toggle="pill" data-bs-target="#v-pills-currency" type="button" role="tab" aria-controls="v-pills-currency" aria-selected="false">Currency Preferences</button>
                <button class="nav-link" id="v-pills-delete-tab" data-bs-toggle="pill" data-bs-target="#v-pills-delete" type="button" role="tab" aria-controls="v-pills-delete" aria-selected="false">Delete Account</button>
            </div>
        </div>
        <div class="col-md-9">
            <div class="tab-content" id="v-pills-tabContent">
                <!-- Profile Information -->
                <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    <div class="card">
                        <div class="card-header">
                            <h5>Profile Information</h5>
                        </div>
                        <div class="card-body">
                            <form id="profileForm">
                                <div class="row mb-3">
                                    <label for="name" class="col-sm-3 col-form-label">Name</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="name" name="name" value="{{ user.name | default(value='') }}" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="email" class="col-sm-3 col-form-label">Email</label>
                                    <div class="col-sm-9">
                                        <input type="email" class="form-control" id="email" value="{{ user.email }}" readonly>
                                        <small class="text-muted">Email address cannot be changed</small>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="country" class="col-sm-3 col-form-label">Country</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" id="country" name="country">
                                            <option value="">Choose country...</option>
                                            <option value="Afghanistan" {% if user.country == "Afghanistan" %}selected{% endif %}>Afghanistan</option>
                                            <option value="Albania" {% if user.country == "Albania" %}selected{% endif %}>Albania</option>
                                            <option value="Algeria" {% if user.country == "Algeria" %}selected{% endif %}>Algeria</option>
                                            <option value="Andorra" {% if user.country == "Andorra" %}selected{% endif %}>Andorra</option>
                                            <option value="Angola" {% if user.country == "Angola" %}selected{% endif %}>Angola</option>
                                            <option value="Antigua and Barbuda" {% if user.country == "Antigua and Barbuda" %}selected{% endif %}>Antigua and Barbuda</option>
                                            <option value="Argentina" {% if user.country == "Argentina" %}selected{% endif %}>Argentina</option>
                                            <option value="Armenia" {% if user.country == "Armenia" %}selected{% endif %}>Armenia</option>
                                            <option value="Australia" {% if user.country == "Australia" %}selected{% endif %}>Australia</option>
                                            <option value="Austria" {% if user.country == "Austria" %}selected{% endif %}>Austria</option>
                                            <option value="Azerbaijan" {% if user.country == "Azerbaijan" %}selected{% endif %}>Azerbaijan</option>
                                            <option value="Bahamas" {% if user.country == "Bahamas" %}selected{% endif %}>Bahamas</option>
                                            <option value="Bahrain" {% if user.country == "Bahrain" %}selected{% endif %}>Bahrain</option>
                                            <option value="Bangladesh" {% if user.country == "Bangladesh" %}selected{% endif %}>Bangladesh</option>
                                            <option value="Barbados" {% if user.country == "Barbados" %}selected{% endif %}>Barbados</option>
                                            <option value="Belarus" {% if user.country == "Belarus" %}selected{% endif %}>Belarus</option>
                                            <option value="Belgium" {% if user.country == "Belgium" %}selected{% endif %}>Belgium</option>
                                            <option value="Belize" {% if user.country == "Belize" %}selected{% endif %}>Belize</option>
                                            <option value="Benin" {% if user.country == "Benin" %}selected{% endif %}>Benin</option>
                                            <option value="Bhutan" {% if user.country == "Bhutan" %}selected{% endif %}>Bhutan</option>
                                            <option value="Bolivia" {% if user.country == "Bolivia" %}selected{% endif %}>Bolivia</option>
                                            <option value="Bosnia and Herzegovina" {% if user.country == "Bosnia and Herzegovina" %}selected{% endif %}>Bosnia and Herzegovina</option>
                                            <option value="Botswana" {% if user.country == "Botswana" %}selected{% endif %}>Botswana</option>
                                            <option value="Brazil" {% if user.country == "Brazil" %}selected{% endif %}>Brazil</option>
                                            <option value="Brunei" {% if user.country == "Brunei" %}selected{% endif %}>Brunei</option>
                                            <option value="Bulgaria" {% if user.country == "Bulgaria" %}selected{% endif %}>Bulgaria</option>
                                            <option value="Burkina Faso" {% if user.country == "Burkina Faso" %}selected{% endif %}>Burkina Faso</option>
                                            <option value="Burundi" {% if user.country == "Burundi" %}selected{% endif %}>Burundi</option>
                                            <option value="Cabo Verde" {% if user.country == "Cabo Verde" %}selected{% endif %}>Cabo Verde</option>
                                            <option value="Cambodia" {% if user.country == "Cambodia" %}selected{% endif %}>Cambodia</option>
                                            <option value="Cameroon" {% if user.country == "Cameroon" %}selected{% endif %}>Cameroon</option>
                                            <option value="Canada" {% if user.country == "Canada" %}selected{% endif %}>Canada</option>
                                            <option value="Central African Republic" {% if user.country == "Central African Republic" %}selected{% endif %}>Central African Republic</option>
                                            <option value="Chad" {% if user.country == "Chad" %}selected{% endif %}>Chad</option>
                                            <option value="Chile" {% if user.country == "Chile" %}selected{% endif %}>Chile</option>
                                            <option value="China" {% if user.country == "China" %}selected{% endif %}>China</option>
                                            <option value="Colombia" {% if user.country == "Colombia" %}selected{% endif %}>Colombia</option>
                                            <option value="Comoros" {% if user.country == "Comoros" %}selected{% endif %}>Comoros</option>
                                            <option value="Congo" {% if user.country == "Congo" %}selected{% endif %}>Congo</option>
                                            <option value="Costa Rica" {% if user.country == "Costa Rica" %}selected{% endif %}>Costa Rica</option>
                                            <option value="Croatia" {% if user.country == "Croatia" %}selected{% endif %}>Croatia</option>
                                            <option value="Cuba" {% if user.country == "Cuba" %}selected{% endif %}>Cuba</option>
                                            <option value="Cyprus" {% if user.country == "Cyprus" %}selected{% endif %}>Cyprus</option>
                                            <option value="Czech Republic" {% if user.country == "Czech Republic" %}selected{% endif %}>Czech Republic</option>
                                            <option value="Democratic Republic of the Congo" {% if user.country == "Democratic Republic of the Congo" %}selected{% endif %}>Democratic Republic of the Congo</option>
                                            <option value="Denmark" {% if user.country == "Denmark" %}selected{% endif %}>Denmark</option>
                                            <option value="Djibouti" {% if user.country == "Djibouti" %}selected{% endif %}>Djibouti</option>
                                            <option value="Dominica" {% if user.country == "Dominica" %}selected{% endif %}>Dominica</option>
                                            <option value="Dominican Republic" {% if user.country == "Dominican Republic" %}selected{% endif %}>Dominican Republic</option>
                                            <option value="Ecuador" {% if user.country == "Ecuador" %}selected{% endif %}>Ecuador</option>
                                            <option value="Egypt" {% if user.country == "Egypt" %}selected{% endif %}>Egypt</option>
                                            <option value="El Salvador" {% if user.country == "El Salvador" %}selected{% endif %}>El Salvador</option>
                                            <option value="Equatorial Guinea" {% if user.country == "Equatorial Guinea" %}selected{% endif %}>Equatorial Guinea</option>
                                            <option value="Eritrea" {% if user.country == "Eritrea" %}selected{% endif %}>Eritrea</option>
                                            <option value="Estonia" {% if user.country == "Estonia" %}selected{% endif %}>Estonia</option>
                                            <option value="Eswatini" {% if user.country == "Eswatini" %}selected{% endif %}>Eswatini</option>
                                            <option value="Ethiopia" {% if user.country == "Ethiopia" %}selected{% endif %}>Ethiopia</option>
                                            <option value="Fiji" {% if user.country == "Fiji" %}selected{% endif %}>Fiji</option>
                                            <option value="Finland" {% if user.country == "Finland" %}selected{% endif %}>Finland</option>
                                            <option value="France" {% if user.country == "France" %}selected{% endif %}>France</option>
                                            <option value="Gabon" {% if user.country == "Gabon" %}selected{% endif %}>Gabon</option>
                                            <option value="Gambia" {% if user.country == "Gambia" %}selected{% endif %}>Gambia</option>
                                            <option value="Georgia" {% if user.country == "Georgia" %}selected{% endif %}>Georgia</option>
                                            <option value="Germany" {% if user.country == "Germany" %}selected{% endif %}>Germany</option>
                                            <option value="Ghana" {% if user.country == "Ghana" %}selected{% endif %}>Ghana</option>
                                            <option value="Greece" {% if user.country == "Greece" %}selected{% endif %}>Greece</option>
                                            <option value="Grenada" {% if user.country == "Grenada" %}selected{% endif %}>Grenada</option>
                                            <option value="Guatemala" {% if user.country == "Guatemala" %}selected{% endif %}>Guatemala</option>
                                            <option value="Guinea" {% if user.country == "Guinea" %}selected{% endif %}>Guinea</option>
                                            <option value="Guinea-Bissau" {% if user.country == "Guinea-Bissau" %}selected{% endif %}>Guinea-Bissau</option>
                                            <option value="Guyana" {% if user.country == "Guyana" %}selected{% endif %}>Guyana</option>
                                            <option value="Haiti" {% if user.country == "Haiti" %}selected{% endif %}>Haiti</option>
                                            <option value="Honduras" {% if user.country == "Honduras" %}selected{% endif %}>Honduras</option>
                                            <option value="Hungary" {% if user.country == "Hungary" %}selected{% endif %}>Hungary</option>
                                            <option value="Iceland" {% if user.country == "Iceland" %}selected{% endif %}>Iceland</option>
                                            <option value="India" {% if user.country == "India" %}selected{% endif %}>India</option>
                                            <option value="Indonesia" {% if user.country == "Indonesia" %}selected{% endif %}>Indonesia</option>
                                            <option value="Iran" {% if user.country == "Iran" %}selected{% endif %}>Iran</option>
                                            <option value="Iraq" {% if user.country == "Iraq" %}selected{% endif %}>Iraq</option>
                                            <option value="Ireland" {% if user.country == "Ireland" %}selected{% endif %}>Ireland</option>
                                            <option value="Israel" {% if user.country == "Israel" %}selected{% endif %}>Israel</option>
                                            <option value="Italy" {% if user.country == "Italy" %}selected{% endif %}>Italy</option>
                                            <option value="Ivory Coast" {% if user.country == "Ivory Coast" %}selected{% endif %}>Ivory Coast</option>
                                            <option value="Jamaica" {% if user.country == "Jamaica" %}selected{% endif %}>Jamaica</option>
                                            <option value="Japan" {% if user.country == "Japan" %}selected{% endif %}>Japan</option>
                                            <option value="Jordan" {% if user.country == "Jordan" %}selected{% endif %}>Jordan</option>
                                            <option value="Kazakhstan" {% if user.country == "Kazakhstan" %}selected{% endif %}>Kazakhstan</option>
                                            <option value="Kenya" {% if user.country == "Kenya" %}selected{% endif %}>Kenya</option>
                                            <option value="Kiribati" {% if user.country == "Kiribati" %}selected{% endif %}>Kiribati</option>
                                            <option value="Kuwait" {% if user.country == "Kuwait" %}selected{% endif %}>Kuwait</option>
                                            <option value="Kyrgyzstan" {% if user.country == "Kyrgyzstan" %}selected{% endif %}>Kyrgyzstan</option>
                                            <option value="Laos" {% if user.country == "Laos" %}selected{% endif %}>Laos</option>
                                            <option value="Latvia" {% if user.country == "Latvia" %}selected{% endif %}>Latvia</option>
                                            <option value="Lebanon" {% if user.country == "Lebanon" %}selected{% endif %}>Lebanon</option>
                                            <option value="Lesotho" {% if user.country == "Lesotho" %}selected{% endif %}>Lesotho</option>
                                            <option value="Liberia" {% if user.country == "Liberia" %}selected{% endif %}>Liberia</option>
                                            <option value="Libya" {% if user.country == "Libya" %}selected{% endif %}>Libya</option>
                                            <option value="Liechtenstein" {% if user.country == "Liechtenstein" %}selected{% endif %}>Liechtenstein</option>
                                            <option value="Lithuania" {% if user.country == "Lithuania" %}selected{% endif %}>Lithuania</option>
                                            <option value="Luxembourg" {% if user.country == "Luxembourg" %}selected{% endif %}>Luxembourg</option>
                                            <option value="Madagascar" {% if user.country == "Madagascar" %}selected{% endif %}>Madagascar</option>
                                            <option value="Malawi" {% if user.country == "Malawi" %}selected{% endif %}>Malawi</option>
                                            <option value="Malaysia" {% if user.country == "Malaysia" %}selected{% endif %}>Malaysia</option>
                                            <option value="Maldives" {% if user.country == "Maldives" %}selected{% endif %}>Maldives</option>
                                            <option value="Mali" {% if user.country == "Mali" %}selected{% endif %}>Mali</option>
                                            <option value="Malta" {% if user.country == "Malta" %}selected{% endif %}>Malta</option>
                                            <option value="Marshall Islands" {% if user.country == "Marshall Islands" %}selected{% endif %}>Marshall Islands</option>
                                            <option value="Mauritania" {% if user.country == "Mauritania" %}selected{% endif %}>Mauritania</option>
                                            <option value="Mauritius" {% if user.country == "Mauritius" %}selected{% endif %}>Mauritius</option>
                                            <option value="Mexico" {% if user.country == "Mexico" %}selected{% endif %}>Mexico</option>
                                            <option value="Micronesia" {% if user.country == "Micronesia" %}selected{% endif %}>Micronesia</option>
                                            <option value="Moldova" {% if user.country == "Moldova" %}selected{% endif %}>Moldova</option>
                                            <option value="Monaco" {% if user.country == "Monaco" %}selected{% endif %}>Monaco</option>
                                            <option value="Mongolia" {% if user.country == "Mongolia" %}selected{% endif %}>Mongolia</option>
                                            <option value="Montenegro" {% if user.country == "Montenegro" %}selected{% endif %}>Montenegro</option>
                                            <option value="Morocco" {% if user.country == "Morocco" %}selected{% endif %}>Morocco</option>
                                            <option value="Mozambique" {% if user.country == "Mozambique" %}selected{% endif %}>Mozambique</option>
                                            <option value="Myanmar" {% if user.country == "Myanmar" %}selected{% endif %}>Myanmar</option>
                                            <option value="Namibia" {% if user.country == "Namibia" %}selected{% endif %}>Namibia</option>
                                            <option value="Nauru" {% if user.country == "Nauru" %}selected{% endif %}>Nauru</option>
                                            <option value="Nepal" {% if user.country == "Nepal" %}selected{% endif %}>Nepal</option>
                                            <option value="Netherlands" {% if user.country == "Netherlands" %}selected{% endif %}>Netherlands</option>
                                            <option value="New Zealand" {% if user.country == "New Zealand" %}selected{% endif %}>New Zealand</option>
                                            <option value="Nicaragua" {% if user.country == "Nicaragua" %}selected{% endif %}>Nicaragua</option>
                                            <option value="Niger" {% if user.country == "Niger" %}selected{% endif %}>Niger</option>
                                            <option value="Nigeria" {% if user.country == "Nigeria" %}selected{% endif %}>Nigeria</option>
                                            <option value="North Korea" {% if user.country == "North Korea" %}selected{% endif %}>North Korea</option>
                                            <option value="North Macedonia" {% if user.country == "North Macedonia" %}selected{% endif %}>North Macedonia</option>
                                            <option value="Norway" {% if user.country == "Norway" %}selected{% endif %}>Norway</option>
                                            <option value="Oman" {% if user.country == "Oman" %}selected{% endif %}>Oman</option>
                                            <option value="Pakistan" {% if user.country == "Pakistan" %}selected{% endif %}>Pakistan</option>
                                            <option value="Palau" {% if user.country == "Palau" %}selected{% endif %}>Palau</option>
                                            <option value="Palestine" {% if user.country == "Palestine" %}selected{% endif %}>Palestine</option>
                                            <option value="Panama" {% if user.country == "Panama" %}selected{% endif %}>Panama</option>
                                            <option value="Papua New Guinea" {% if user.country == "Papua New Guinea" %}selected{% endif %}>Papua New Guinea</option>
                                            <option value="Paraguay" {% if user.country == "Paraguay" %}selected{% endif %}>Paraguay</option>
                                            <option value="Peru" {% if user.country == "Peru" %}selected{% endif %}>Peru</option>
                                            <option value="Philippines" {% if user.country == "Philippines" %}selected{% endif %}>Philippines</option>
                                            <option value="Poland" {% if user.country == "Poland" %}selected{% endif %}>Poland</option>
                                            <option value="Portugal" {% if user.country == "Portugal" %}selected{% endif %}>Portugal</option>
                                            <option value="Qatar" {% if user.country == "Qatar" %}selected{% endif %}>Qatar</option>
                                            <option value="Romania" {% if user.country == "Romania" %}selected{% endif %}>Romania</option>
                                            <option value="Russia" {% if user.country == "Russia" %}selected{% endif %}>Russia</option>
                                            <option value="Rwanda" {% if user.country == "Rwanda" %}selected{% endif %}>Rwanda</option>
                                            <option value="Saint Kitts and Nevis" {% if user.country == "Saint Kitts and Nevis" %}selected{% endif %}>Saint Kitts and Nevis</option>
                                            <option value="Saint Lucia" {% if user.country == "Saint Lucia" %}selected{% endif %}>Saint Lucia</option>
                                            <option value="Saint Vincent and the Grenadines" {% if user.country == "Saint Vincent and the Grenadines" %}selected{% endif %}>Saint Vincent and the Grenadines</option>
                                            <option value="Samoa" {% if user.country == "Samoa" %}selected{% endif %}>Samoa</option>
                                            <option value="San Marino" {% if user.country == "San Marino" %}selected{% endif %}>San Marino</option>
                                            <option value="Sao Tome and Principe" {% if user.country == "Sao Tome and Principe" %}selected{% endif %}>Sao Tome and Principe</option>
                                            <option value="Saudi Arabia" {% if user.country == "Saudi Arabia" %}selected{% endif %}>Saudi Arabia</option>
                                            <option value="Senegal" {% if user.country == "Senegal" %}selected{% endif %}>Senegal</option>
                                            <option value="Serbia" {% if user.country == "Serbia" %}selected{% endif %}>Serbia</option>
                                            <option value="Seychelles" {% if user.country == "Seychelles" %}selected{% endif %}>Seychelles</option>
                                            <option value="Sierra Leone" {% if user.country == "Sierra Leone" %}selected{% endif %}>Sierra Leone</option>
                                            <option value="Singapore" {% if user.country == "Singapore" %}selected{% endif %}>Singapore</option>
                                            <option value="Slovakia" {% if user.country == "Slovakia" %}selected{% endif %}>Slovakia</option>
                                            <option value="Slovenia" {% if user.country == "Slovenia" %}selected{% endif %}>Slovenia</option>
                                            <option value="Solomon Islands" {% if user.country == "Solomon Islands" %}selected{% endif %}>Solomon Islands</option>
                                            <option value="Somalia" {% if user.country == "Somalia" %}selected{% endif %}>Somalia</option>
                                            <option value="South Africa" {% if user.country == "South Africa" %}selected{% endif %}>South Africa</option>
                                            <option value="South Korea" {% if user.country == "South Korea" %}selected{% endif %}>South Korea</option>
                                            <option value="South Sudan" {% if user.country == "South Sudan" %}selected{% endif %}>South Sudan</option>
                                            <option value="Spain" {% if user.country == "Spain" %}selected{% endif %}>Spain</option>
                                            <option value="Sri Lanka" {% if user.country == "Sri Lanka" %}selected{% endif %}>Sri Lanka</option>
                                            <option value="Sudan" {% if user.country == "Sudan" %}selected{% endif %}>Sudan</option>
                                            <option value="Suriname" {% if user.country == "Suriname" %}selected{% endif %}>Suriname</option>
                                            <option value="Sweden" {% if user.country == "Sweden" %}selected{% endif %}>Sweden</option>
                                            <option value="Switzerland" {% if user.country == "Switzerland" %}selected{% endif %}>Switzerland</option>
                                            <option value="Syria" {% if user.country == "Syria" %}selected{% endif %}>Syria</option>
                                            <option value="Taiwan" {% if user.country == "Taiwan" %}selected{% endif %}>Taiwan</option>
                                            <option value="Tajikistan" {% if user.country == "Tajikistan" %}selected{% endif %}>Tajikistan</option>
                                            <option value="Tanzania" {% if user.country == "Tanzania" %}selected{% endif %}>Tanzania</option>
                                            <option value="Thailand" {% if user.country == "Thailand" %}selected{% endif %}>Thailand</option>
                                            <option value="Timor-Leste" {% if user.country == "Timor-Leste" %}selected{% endif %}>Timor-Leste</option>
                                            <option value="Togo" {% if user.country == "Togo" %}selected{% endif %}>Togo</option>
                                            <option value="Tonga" {% if user.country == "Tonga" %}selected{% endif %}>Tonga</option>
                                            <option value="Trinidad and Tobago" {% if user.country == "Trinidad and Tobago" %}selected{% endif %}>Trinidad and Tobago</option>
                                            <option value="Tunisia" {% if user.country == "Tunisia" %}selected{% endif %}>Tunisia</option>
                                            <option value="Turkey" {% if user.country == "Turkey" %}selected{% endif %}>Turkey</option>
                                            <option value="Turkmenistan" {% if user.country == "Turkmenistan" %}selected{% endif %}>Turkmenistan</option>
                                            <option value="Tuvalu" {% if user.country == "Tuvalu" %}selected{% endif %}>Tuvalu</option>
                                            <option value="Uganda" {% if user.country == "Uganda" %}selected{% endif %}>Uganda</option>
                                            <option value="Ukraine" {% if user.country == "Ukraine" %}selected{% endif %}>Ukraine</option>
                                            <option value="United Arab Emirates" {% if user.country == "United Arab Emirates" %}selected{% endif %}>United Arab Emirates</option>
                                            <option value="United Kingdom" {% if user.country == "United Kingdom" %}selected{% endif %}>United Kingdom</option>
                                            <option value="United States" {% if user.country == "United States" %}selected{% endif %}>United States</option>
                                            <option value="Uruguay" {% if user.country == "Uruguay" %}selected{% endif %}>Uruguay</option>
                                            <option value="Uzbekistan" {% if user.country == "Uzbekistan" %}selected{% endif %}>Uzbekistan</option>
                                            <option value="Vanuatu" {% if user.country == "Vanuatu" %}selected{% endif %}>Vanuatu</option>
                                            <option value="Vatican City" {% if user.country == "Vatican City" %}selected{% endif %}>Vatican City</option>
                                            <option value="Venezuela" {% if user.country == "Venezuela" %}selected{% endif %}>Venezuela</option>
                                            <option value="Vietnam" {% if user.country == "Vietnam" %}selected{% endif %}>Vietnam</option>
                                            <option value="Yemen" {% if user.country == "Yemen" %}selected{% endif %}>Yemen</option>
                                            <option value="Zambia" {% if user.country == "Zambia" %}selected{% endif %}>Zambia</option>
                                            <option value="Zimbabwe" {% if user.country == "Zimbabwe" %}selected{% endif %}>Zimbabwe</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="timezone" class="col-sm-3 col-form-label">Time Zone</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" id="timezone" name="timezone">
                                            <option value="">Choose timezone...</option>
                                            <option value="UTC-12:00" {% if user.timezone == "UTC-12:00" %}selected{% endif %}>UTC-12:00 (Baker Island)</option>
                                            <option value="UTC-11:00" {% if user.timezone == "UTC-11:00" %}selected{% endif %}>UTC-11:00 (American Samoa, Niue)</option>
                                            <option value="UTC-10:00" {% if user.timezone == "UTC-10:00" %}selected{% endif %}>UTC-10:00 (Hawaii-Aleutian Standard Time)</option>
                                            <option value="UTC-09:30" {% if user.timezone == "UTC-09:30" %}selected{% endif %}>UTC-09:30 (Marquesas Islands)</option>
                                            <option value="UTC-09:00" {% if user.timezone == "UTC-09:00" %}selected{% endif %}>UTC-09:00 (Alaska Standard Time)</option>
                                            <option value="UTC-08:00" {% if user.timezone == "UTC-08:00" %}selected{% endif %}>UTC-08:00 (Pacific Standard Time - Los Angeles, Vancouver)</option>
                                            <option value="UTC-07:00" {% if user.timezone == "UTC-07:00" %}selected{% endif %}>UTC-07:00 (Mountain Standard Time - Denver, Calgary)</option>
                                            <option value="UTC-06:00" {% if user.timezone == "UTC-06:00" %}selected{% endif %}>UTC-06:00 (Central Standard Time - Chicago, Mexico City)</option>
                                            <option value="UTC-05:00" {% if user.timezone == "UTC-05:00" %}selected{% endif %}>UTC-05:00 (Eastern Standard Time - New York, Toronto)</option>
                                            <option value="UTC-04:00" {% if user.timezone == "UTC-04:00" %}selected{% endif %}>UTC-04:00 (Atlantic Standard Time - Halifax, Caracas)</option>
                                            <option value="UTC-03:30" {% if user.timezone == "UTC-03:30" %}selected{% endif %}>UTC-03:30 (Newfoundland Standard Time)</option>
                                            <option value="UTC-03:00" {% if user.timezone == "UTC-03:00" %}selected{% endif %}>UTC-03:00 (Argentina, Brazil, Uruguay)</option>
                                            <option value="UTC-02:00" {% if user.timezone == "UTC-02:00" %}selected{% endif %}>UTC-02:00 (South Georgia and the South Sandwich Islands)</option>
                                            <option value="UTC-01:00" {% if user.timezone == "UTC-01:00" %}selected{% endif %}>UTC-01:00 (Azores, Cape Verde)</option>
                                            <option value="UTC+00:00" {% if user.timezone == "UTC+00:00" %}selected{% endif %}>UTC+00:00 (Greenwich Mean Time - London, Dublin, Lisbon)</option>
                                            <option value="UTC+01:00" {% if user.timezone == "UTC+01:00" %}selected{% endif %}>UTC+01:00 (Central European Time - Berlin, Paris, Rome)</option>
                                            <option value="UTC+02:00" {% if user.timezone == "UTC+02:00" %}selected{% endif %}>UTC+02:00 (Eastern European Time - Athens, Cairo, Helsinki)</option>
                                            <option value="UTC+03:00" {% if user.timezone == "UTC+03:00" %}selected{% endif %}>UTC+03:00 (Moscow Standard Time - Moscow, Istanbul, Nairobi)</option>
                                            <option value="UTC+03:30" {% if user.timezone == "UTC+03:30" %}selected{% endif %}>UTC+03:30 (Iran Standard Time - Tehran)</option>
                                            <option value="UTC+04:00" {% if user.timezone == "UTC+04:00" %}selected{% endif %}>UTC+04:00 (Gulf Standard Time - Dubai, Baku)</option>
                                            <option value="UTC+04:30" {% if user.timezone == "UTC+04:30" %}selected{% endif %}>UTC+04:30 (Afghanistan Time - Kabul)</option>
                                            <option value="UTC+05:00" {% if user.timezone == "UTC+05:00" %}selected{% endif %}>UTC+05:00 (Pakistan Standard Time - Karachi, Tashkent)</option>
                                            <option value="UTC+05:30" {% if user.timezone == "UTC+05:30" %}selected{% endif %}>UTC+05:30 (India Standard Time - Mumbai, Delhi, Colombo)</option>
                                            <option value="UTC+05:45" {% if user.timezone == "UTC+05:45" %}selected{% endif %}>UTC+05:45 (Nepal Time - Kathmandu)</option>
                                            <option value="UTC+06:00" {% if user.timezone == "UTC+06:00" %}selected{% endif %}>UTC+06:00 (Bangladesh Standard Time - Dhaka, Almaty)</option>
                                            <option value="UTC+06:30" {% if user.timezone == "UTC+06:30" %}selected{% endif %}>UTC+06:30 (Myanmar Time - Yangon, Cocos Islands)</option>
                                            <option value="UTC+07:00" {% if user.timezone == "UTC+07:00" %}selected{% endif %}>UTC+07:00 (Indochina Time - Bangkok, Jakarta, Ho Chi Minh City)</option>
                                            <option value="UTC+08:00" {% if user.timezone == "UTC+08:00" %}selected{% endif %}>UTC+08:00 (China Standard Time - Beijing, Singapore, Manila)</option>
                                            <option value="UTC+08:45" {% if user.timezone == "UTC+08:45" %}selected{% endif %}>UTC+08:45 (Australian Central Western Standard Time)</option>
                                            <option value="UTC+09:00" {% if user.timezone == "UTC+09:00" %}selected{% endif %}>UTC+09:00 (Japan Standard Time - Tokyo, Seoul, Pyongyang)</option>
                                            <option value="UTC+09:30" {% if user.timezone == "UTC+09:30" %}selected{% endif %}>UTC+09:30 (Australian Central Standard Time - Adelaide, Darwin)</option>
                                            <option value="UTC+10:00" {% if user.timezone == "UTC+10:00" %}selected{% endif %}>UTC+10:00 (Australian Eastern Standard Time - Sydney, Melbourne)</option>
                                            <option value="UTC+10:30" {% if user.timezone == "UTC+10:30" %}selected{% endif %}>UTC+10:30 (Lord Howe Standard Time)</option>
                                            <option value="UTC+11:00" {% if user.timezone == "UTC+11:00" %}selected{% endif %}>UTC+11:00 (Solomon Islands, New Caledonia)</option>
                                            <option value="UTC+12:00" {% if user.timezone == "UTC+12:00" %}selected{% endif %}>UTC+12:00 (New Zealand Standard Time - Auckland, Fiji)</option>
                                            <option value="UTC+12:45" {% if user.timezone == "UTC+12:45" %}selected{% endif %}>UTC+12:45 (Chatham Standard Time)</option>
                                            <option value="UTC+13:00" {% if user.timezone == "UTC+13:00" %}selected{% endif %}>UTC+13:00 (Tonga, Samoa)</option>
                                            <option value="UTC+14:00" {% if user.timezone == "UTC+14:00" %}selected{% endif %}>UTC+14:00 (Line Islands, Kiribati)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">Save Changes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Password -->
                <div class="tab-pane fade" id="v-pills-password" role="tabpanel" aria-labelledby="v-pills-password-tab">
                    <div class="card">
                        <div class="card-header">
                            <h5>Change Password</h5>
                        </div>
                        <div class="card-body">
                            <form id="passwordForm">
                                <div class="row mb-3">
                                    <label for="current-password" class="col-sm-3 col-form-label">Current Password</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="current-password" name="current_password" required>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="new-password" class="col-sm-3 col-form-label">New Password</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="new-password" name="new_password" minlength="12" required>
                                        <small class="text-muted">Password must be at least 12 characters long with a mix of letters, numbers, and special characters</small>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="confirm-password" class="col-sm-3 col-form-label">Confirm Password</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="confirm-password" name="confirm_password" required>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">Update Password</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- SSH Keys -->
                <div class="tab-pane fade" id="v-pills-ssh-keys" role="tabpanel" aria-labelledby="v-pills-ssh-keys-tab">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5>SSH Keys</h5>
                            <button type="button" class="btn btn-primary btn-sm" id="addSSHKeyBtn">
                                <i class="bi bi-plus-circle me-1"></i>Add SSH Key
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i>
                                <strong>SSH Keys for Self-Managed Resources:</strong> Upload your SSH public keys to access self-managed VMs and Kubernetes clusters. Your keys are stored securely and can be used across multiple deployments.
                            </div>

                            <!-- SSH Keys List -->
                            <div id="sshKeysList">
                                <div class="text-center p-4" id="noSSHKeysMessage">
                                    <i class="bi bi-key display-4 text-muted"></i>
                                    <p class="mt-2 text-muted">No SSH keys found. Add your first SSH key to get started.</p>
                                </div>
                            </div>

                            <!-- SSH Key Template (hidden, used for JS cloning) -->
                            <div class="d-none" id="sshKeyTemplate">
                                <div class="card mb-3 ssh-key-item" data-key-id="">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-md-8">
                                                <div class="d-flex align-items-center">
                                                    <i class="bi bi-key me-2 text-primary"></i>
                                                    <div>
                                                        <h6 class="mb-1 ssh-key-name">Key Name</h6>
                                                        <small class="text-muted ssh-key-type">Key Type</small>
                                                        <span class="badge bg-success ms-2 ssh-key-default d-none">Default</span>
                                                    </div>
                                                </div>
                                                <div class="mt-2">
                                                    <small class="text-muted">
                                                        <strong>Fingerprint:</strong> <code class="ssh-key-fingerprint">SHA256:...</code>
                                                    </small>
                                                </div>
                                                <div class="mt-1">
                                                    <small class="text-muted ssh-key-created">Added: Never</small>
                                                    <small class="text-muted ssh-key-last-used ms-3">Last used: Never</small>
                                                </div>
                                            </div>
                                            <div class="col-md-4 text-end">
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-outline-primary btn-sm set-default-btn">
                                                        Set Default
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary btn-sm edit-ssh-key-btn">
                                                        <i class="bi bi-pencil"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-danger btn-sm delete-ssh-key-btn">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Currency Preferences -->
                <div class="tab-pane fade" id="v-pills-currency" role="tabpanel" aria-labelledby="v-pills-currency-tab">
                    <div class="card">
                        <div class="card-header">
                            <h5>Currency Preferences</h5>
                        </div>
                        <div class="card-body">
                            <form id="currencyForm">
                                <div class="row mb-4">
                                    <label for="displayCurrency" class="col-sm-3 col-form-label">Display Currency</label>
                                    <div class="col-sm-9">
                                        <select class="form-select" id="displayCurrency" name="display_currency">
                                            <option value="USD" {% if user_display_currency == "USD" %}selected{% endif %}>USD - US Dollar</option>
                                            <option value="MC" {% if user_display_currency == "MC" %}selected{% endif %}>MC - Mycelium Credit</option>
                                            <option value="EUR" {% if user_display_currency == "EUR" %}selected{% endif %}>EUR - Euro</option>
                                            <option value="CAD" {% if user_display_currency == "CAD" %}selected{% endif %}>CAD - Canadian Dollar</option>
                                            <option value="AED" {% if user_display_currency == "AED" %}selected{% endif %}>AED - UAE Dirham</option>
                                        </select>
                                        <small class="text-muted">Choose your preferred currency for displaying prices in the marketplace</small>
                                    </div>
                                </div>

                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle me-2"></i>
                                    <strong>Note:</strong> All transactions are processed in MC Credits. Display currency is used for convenience only and prices are converted in real-time.
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">Save Currency Preferences</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Delete Account -->
                <div class="tab-pane fade" id="v-pills-delete" role="tabpanel" aria-labelledby="v-pills-delete-tab">
                    <div class="card border-danger">
                        <div class="card-header bg-danger text-white">
                            <h5>Delete Account</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-warning">
                                <h5><i class="bi bi-exclamation-triangle me-2"></i>Warning: This action is irreversible</h5>
                                <p>Deleting your account will permanently remove all your data, including:</p>
                                <ul>
                                    <li>Your profile information</li>
                                    <li>Your deployment configurations</li>
                                    <li>Your billing history</li>
                                </ul>
                                <p class="mb-0"><strong>Note:</strong> Any active deployments must be manually terminated before account deletion.</p>
                            </div>
                            <form id="deleteAccountForm" class="mt-4">
                                <div class="mb-3">
                                    <label for="deleteConfirmation" class="form-label">Type "DELETE" to confirm</label>
                                    <input type="text" class="form-control" id="deleteConfirmation" name="confirmation" placeholder="Type DELETE in all caps" required>
                                </div>
                                <div class="mb-3">
                                    <label for="deletePassword" class="form-label">Your current password</label>
                                    <input type="password" class="form-control" id="deletePassword" name="password" required>
                                    <div id="deletePasswordFeedback" class="invalid-feedback">Incorrect password.</div>
                                </div>
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="deleteCheck" required>
                                    <label class="form-check-label" for="deleteCheck">I understand this action cannot be undone</label>
                                </div>
                                <button type="submit" class="btn btn-danger">Delete My Account</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmationModal" tabindex="-1" aria-labelledby="deleteConfirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-danger">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteConfirmationModalLabel">
                    <i class="bi bi-exclamation-triangle me-2"></i>Final Confirmation Required
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <h6><strong>This is your final warning!</strong></h6>
                    <p class="mb-0">You are about to permanently delete your account. This action will:</p>
                </div>
                <ul class="mb-3">
                    <li>Mark your account as deleted (data preserved for recovery)</li>
                    <li>Prevent you from logging in</li>
                    <li>Hide your services and apps from the marketplace</li>
                    <li>Require administrator assistance to recover</li>
                </ul>
                <div class="mb-3">
                    <label class="form-label"><strong>Type "I UNDERSTAND" to proceed:</strong></label>
                    <input type="text" class="form-control" id="finalConfirmationInput" placeholder="Type I UNDERSTAND">
                </div>
                <div class="text-center">
                    <p class="text-muted mb-0">Deletion will proceed in <span id="countdownTimer" class="fw-bold text-danger">10</span> seconds after confirmation</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="finalDeleteButton" disabled>
                    <span id="deleteButtonText">Confirm Deletion</span>
                    <span id="deleteButtonSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- SSH Key Management Modals -->

<!-- Add SSH Key Modal -->
<div class="modal fade" id="addSSHKeyModal" tabindex="-1" aria-labelledby="addSSHKeyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSSHKeyModalLabel">
                    <i class="bi bi-key me-2"></i>Add SSH Key
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addSSHKeyForm">
                    <div class="mb-3">
                        <label for="sshKeyName" class="form-label">Key Name</label>
                        <input type="text" class="form-control" id="sshKeyName" name="name" placeholder="e.g., MacBook Pro, Work Laptop" required>
                        <div class="form-text">Choose a descriptive name to identify this key</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="sshPublicKey" class="form-label">SSH Public Key</label>
                        <textarea class="form-control" id="sshPublicKey" name="public_key" rows="4" placeholder="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5... user@example.com" required></textarea>
                        <div class="form-text">
                            Paste your SSH public key here. Supported formats: Ed25519, ECDSA, RSA (2048+ bits)
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="setAsDefault" name="is_default">
                            <label class="form-check-label" for="setAsDefault">
                                Set as default key for new deployments
                            </label>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="bi bi-info-circle me-2"></i>
                        <strong>How to find your SSH public key:</strong>
                        <ul class="mb-0 mt-2">
                            <li><strong>Linux/macOS:</strong> <code>cat ~/.ssh/id_ed25519.pub</code> or <code>cat ~/.ssh/id_rsa.pub</code></li>
                            <li><strong>Windows:</strong> <code>type %USERPROFILE%\.ssh\id_ed25519.pub</code></li>
                            <li><strong>Generate new key:</strong> <code>ssh-keygen -t ed25519 -C "your_email@example.com"</code></li>
                        </ul>
                    </div>

                    <!-- Key validation feedback -->
                    <div id="keyValidationFeedback" class="d-none">
                        <div class="alert alert-success" id="keyValidationSuccess">
                            <i class="bi bi-check-circle me-2"></i>
                            <span id="keyValidationSuccessText">Valid SSH key detected!</span>
                        </div>
                        <div class="alert alert-danger" id="keyValidationError">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <span id="keyValidationErrorText">Invalid SSH key format</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="addSSHKeyForm" class="btn btn-primary" id="addSSHKeySubmit">
                    <span id="addSSHKeyText">Add SSH Key</span>
                    <span id="addSSHKeySpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit SSH Key Modal -->
<div class="modal fade" id="editSSHKeyModal" tabindex="-1" aria-labelledby="editSSHKeyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editSSHKeyModalLabel">
                    <i class="bi bi-pencil me-2"></i>Edit SSH Key
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editSSHKeyForm">
                    <input type="hidden" id="editSSHKeyId" name="keyId">
                    <div class="mb-3">
                        <label for="editSSHKeyName" class="form-label">Key Name</label>
                        <input type="text" class="form-control" id="editSSHKeyName" name="name" required>
                        <div class="form-text">Choose a descriptive name to identify this key</div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="editSetAsDefault" name="is_default">
                            <label class="form-check-label" for="editSetAsDefault">
                                Set as default key for new deployments
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="editSSHKeyForm" class="btn btn-primary" id="editSSHKeySubmit">
                    <span id="editSSHKeyText">Update SSH Key</span>
                    <span id="editSSHKeySpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete SSH Key Modal -->
<div class="modal fade" id="deleteSSHKeyModal" tabindex="-1" aria-labelledby="deleteSSHKeyModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteSSHKeyModalLabel">
                    <i class="bi bi-trash me-2"></i>Delete SSH Key
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="deleteSSHKeyForm">
                    <input type="hidden" id="deleteSSHKeyId" name="keyId">
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <strong>Are you sure?</strong>
                    </div>
                    <p>You are about to delete the SSH key:</p>
                    <p><strong id="deleteSSHKeyName">Key Name</strong></p>
                    <p class="text-muted">This action cannot be undone. If this key is currently used for deployments, you may lose access to those resources.</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" form="deleteSSHKeyForm" class="btn btn-danger" id="deleteSSHKeySubmit">
                    <span id="deleteSSHKeyText">Delete SSH Key</span>
                    <span id="deleteSSHKeySpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- SSH Keys Data Hydration -->
<script type="application/json" id="ssh-keys-data">{{ ssh_keys_json | default(value="[]") | safe }}</script>

<script src="/static/js/dashboard-settings.js"></script>

<!-- SSH Key Management Script -->
<script src="/static/js/dashboard-ssh-keys.js"></script>
{% endblock %}