mail-settings.component.html

<app-page-header
  title="Mail Settings"
  title1="Mail Settings"
  activeitem="Pages"
></app-page-header>

<!-- Start::row-1 -->
<div class="md:grid grid-cols-12 md:gap-6">
  <div class="col-span-12 lg:col-span-12">
    <div class="box">
      <div class="box-header bg-transparent">
        <nav
          class="-mb-0.5 md:flex md:space-x-6 rtl:space-x-reverse md:space-y-0 space-y-4"
          aria-label="Tabs"
          role="tablist"
        >
          <button
            type="button"
            class="hs-tab-active:bg-white me-2 hs-tab-active:rounded-b-none border-b-[3px] border-transparent hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:bg-bgdark dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-transparent dark:text-white/70 active"
            id="mail-item-1"
            data-hs-tab="#mail-1"
            aria-controls="mail-1"
            role="tab"  
          >
            <i class="ri ri-global-line"></i>General &amp; personal
          </button>
          <button
            type="button"
            class="hs-tab-active:bg-white me-2 hs-tab-active:rounded-b-none border-b-[3px] border-transparent hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:bg-bgdark dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-transparent dark:text-white/70 dark:hover:text-gray-300"
            id="mail-item-2"
            data-hs-tab="#mail-2"
            aria-controls="mail-2"
            role="tab"
          >
            <i class="ri ri-lock-password-line"></i> Notifications
          </button>
          <button
            type="button"
            class="hs-tab-active:bg-white me-2 hs-tab-active:rounded-b-none border-b-[3px] border-transparent hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:bg-bgdark dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-transparent dark:text-white/70 dark:hover:text-gray-300"
            id="mail-item-3"
            data-hs-tab="#mail-3"
            aria-controls="mail-3"
            role="tab"
          >
            <i class="ri ri-lock-password-line"></i> Security
          </button>
          <button
            type="button"
            class="hs-tab-active:bg-white me-2 hs-tab-active:rounded-b-none border-b-[3px] border-transparent hs-tab-active:border-primary hs-tab-active:text-primary dark:hs-tab-active:bg-bgdark dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-transparent dark:text-white/70 dark:hover:text-gray-300"
            id="mail-item-4"
            data-hs-tab="#mail-4"
            aria-controls="mail-4"
            role="tab"
          >
            <i class="ri ri-mail-open-line"></i> Mail-View
          </button>
        </nav>
      </div>
      <div class="box-body">
        <div id="mail-1" role="tabpanel" aria-labelledby="mail-item-1">
          <h5 class="font-semibold text-lg mb-2">
            General and Basic Info Settings
          </h5>
          <p class="text-gray-500 dark:text-white/70 mb-6 text-sm">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
          <div class="space-y-6">
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label for="profile-change" class="ti-form-label"
                  >Change Profile</label
                >
              </div>
              <div class="col-span-12 md:col-span-10">
                <div class="relative inline-block md:mt-8">
                  <img
                     [src]="url1 ? url1 : './assets/img/users/1.jpg'"
                    class="w-24 h-24 rounded-full ring-4 ring-gray-200 dark:ring-white/10 mx-auto"
                    id="profile-img"
                    alt="profile-img"
                  />
                  <span
                    class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-gray-200 dark:ring-white/10 text-gray-500 bg-gray-100 dark:bg-bgdark leading-none"
                  >
                    <input
                      type="file"
                      name="photo"
                      class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                      id="profile-change" (change)="onSelectFile1($event)"/>
                    <i class="ri ri-pencil-line"></i
                  ></span>
                </div>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label for="input-label1" class="ti-form-label"
                  >User Name</label
                >
              </div>
              <div class="col-span-12 md:col-span-10">
                <input
                  type="text"
                  id="input-label1"
                  class="ti-form-input"
                  placeholder="name"
                  value="Jason Taylor"
                />
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label for="input-label2" class="ti-form-label"
                  >User Email Id</label
                >
              </div>
              <div class="col-span-12 md:col-span-10">
                <input
                  type="email"
                  id="input-label2"
                  class="ti-form-input"
                  placeholder="youremail@gmail.com"
                  value="jasontaylor152@gmail.com"
                />
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label class="ti-form-label">Language</label>
              </div>
              <div class="col-span-12 md:col-span-10">
                <ng-select placeholder=" US English" class="ti-form-select" data-trigger>
                  <ng-option value="1" selected>US English</ng-option>
                  <ng-option value="2">Arabic</ng-option>
                  <ng-option value="3">Korean</ng-option>
                  <ng-option value="4">Russia</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label class="ti-form-label">Time Zone</label>
              </div>
              <div class="col-span-12 md:col-span-10">
                <ng-select placeholder="(GMT-11:00) Midway Island, Samoa" class="ti-form-select" data-trigger>
                  <ng-option value="Pacific/Midway"
                    >(GMT-11:00) Midway Island, Samoa</ng-option
                  >
                  <ng-option value="America/Adak"
                    >(GMT-10:00) Hawaii-Aleutian</ng-option
                  >
                  <ng-option value="Etc/GMT+10">(GMT-10:00) Hawaii</ng-option>
                  <ng-option value="Pacific/Marquesas"
                    >(GMT-09:30) Marquesas Islands</ng-option
                  >
                  <ng-option value="Pacific/Gambier"
                    >(GMT-09:00) Gambier Islands</ng-option
                  >
                  <ng-option value="America/Anchorage"
                    >(GMT-09:00) Alaska</ng-option
                  >
                  <ng-option value="America/Ensenada"
                    >(GMT-08:00) Tijuana, Baja California</ng-option
                  >
                  <ng-option value="Etc/GMT+8"
                    >(GMT-08:00) Pitcairn Islands</ng-option
                  >
                  <ng-option value="America/Los_Angeles"
                    >(GMT-08:00) Pacific Time (US &amp; Canada)</ng-option
                  >
                  <ng-option value="America/Denver"
                    >(GMT-07:00) Mountain Time (US &amp; Canada)</ng-option
                  >
                  <ng-option value="America/Chihuahua"
                    >(GMT-07:00) Chihuahua, La Paz, Mazatlan</ng-option
                  >
                  <ng-option value="America/Dawson_Creek"
                    >(GMT-07:00) Arizona</ng-option
                  >
                  <ng-option value="America/Belize"
                    >(GMT-06:00) Saskatchewan, Central America</ng-option
                  >
                  <ng-option value="America/Cancun"
                    >(GMT-06:00) Guadalajara, Mexico City, Monterrey</ng-option
                  >
                  <ng-option value="Chile/EasterIsland"
                    >(GMT-06:00) Easter Island</ng-option
                  >
                  <ng-option value="America/Chicago"
                    >(GMT-06:00) Central Time (US &amp; Canada)</ng-option
                  >
                  <ng-option value="America/New_York"
                    >(GMT-05:00) Eastern Time (US &amp; Canada)</ng-option
                  >
                  <ng-option value="America/Havana">(GMT-05:00) Cuba</ng-option>
                  <ng-option value="America/Bogota"
                    >(GMT-05:00) Bogota, Lima, Quito, Rio Branco</ng-option
                  >
                  <ng-option value="America/Caracas"
                    >(GMT-04:30) Caracas</ng-option
                  >
                  <ng-option value="America/Santiago"
                    >(GMT-04:00) Santiago</ng-option
                  >
                  <ng-option value="America/La_Paz"
                    >(GMT-04:00) La Paz</ng-option
                  >
                  <ng-option value="Atlantic/Stanley"
                    >(GMT-04:00) Faukland Islands</ng-option
                  >
                  <ng-option value="America/Campo_Grande"
                    >(GMT-04:00) Brazil</ng-option
                  >
                  <ng-option value="America/Goose_Bay"
                    >(GMT-04:00) Atlantic Time (Goose Bay)</ng-option
                  >
                  <ng-option value="America/Glace_Bay"
                    >(GMT-04:00) Atlantic Time (Canada)</ng-option
                  >
                  <ng-option value="America/St_Johns"
                    >(GMT-03:30) Newfoundland</ng-option
                  >
                  <ng-option value="America/Araguaina"
                    >(GMT-03:00) UTC-3</ng-option
                  >
                  <ng-option value="America/Montevideo"
                    >(GMT-03:00) Montevideo</ng-option
                  >
                  <ng-option value="America/Miquelon"
                    >(GMT-03:00) Miquelon, St. Pierre</ng-option
                  >
                  <ng-option value="America/Godthab"
                    >(GMT-03:00) Greenland</ng-option
                  >
                  <ng-option value="America/Argentina/Buenos_Aires"
                    >(GMT-03:00) Buenos Aires</ng-option
                  >
                  <ng-option value="America/Sao_Paulo"
                    >(GMT-03:00) Brasilia</ng-option
                  >
                  <ng-option value="America/Noronha"
                    >(GMT-02:00) Mid-Atlantic</ng-option
                  >
                  <ng-option value="Atlantic/Cape_Verde"
                    >(GMT-01:00) Cape Verde Is.</ng-option
                  >
                  <ng-option value="Atlantic/Azores"
                    >(GMT-01:00) Azores</ng-option
                  >
                  <ng-option value="Europe/Belfast"
                    >(GMT) Greenwich Mean Time : Belfast</ng-option
                  >
                  <ng-option value="Europe/Dublin"
                    >(GMT) Greenwich Mean Time : Dublin</ng-option
                  >
                  <ng-option value="Europe/Lisbon"
                    >(GMT) Greenwich Mean Time : Lisbon</ng-option
                  >
                  <ng-option value="Europe/London"
                    >(GMT) Greenwich Mean Time : London</ng-option
                  >
                  <ng-option value="Africa/Abidjan"
                    >(GMT) Monrovia, Reykjavik</ng-option
                  >
                  <ng-option value="Europe/Amsterdam"
                    >(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm,
                    Vienna</ng-option
                  >
                  <ng-option value="Europe/Belgrade"
                    >(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana,
                    Prague</ng-option
                  >
                  <ng-option value="Europe/Brussels"
                    >(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</ng-option
                  >
                  <ng-option value="Africa/Algiers"
                    >(GMT+01:00) West Central Africa</ng-option
                  >
                  <ng-option value="Africa/Windhoek"
                    >(GMT+01:00) Windhoek</ng-option
                  >
                  <ng-option value="Asia/Beirut">(GMT+02:00) Beirut</ng-option>
                  <ng-option value="Africa/Cairo">(GMT+02:00) Cairo</ng-option>
                  <ng-option value="Asia/Gaza">(GMT+02:00) Gaza</ng-option>
                  <ng-option value="Africa/Blantyre"
                    >(GMT+02:00) Harare, Pretoria</ng-option
                  >
                  <ng-option value="Asia/Jerusalem"
                    >(GMT+02:00) Jerusalem</ng-option
                  >
                  <ng-option value="Europe/Minsk">(GMT+02:00) Minsk</ng-option>
                  <ng-option value="Asia/Damascus">(GMT+02:00) Syria</ng-option>
                  <ng-option value="Europe/Moscow"
                    >(GMT+03:00) Moscow, St. Petersburg, Volgograd</ng-option
                  >
                  <ng-option value="Africa/Addis_Ababa"
                    >(GMT+03:00) Nairobi</ng-option
                  >
                  <ng-option value="Asia/Tehran">(GMT+03:30) Tehran</ng-option>
                  <ng-option value="Asia/Dubai"
                    >(GMT+04:00) Abu Dhabi, Muscat</ng-option
                  >
                  <ng-option value="Asia/Yerevan"
                    >(GMT+04:00) Yerevan</ng-option
                  >
                  <ng-option value="Asia/Kabul">(GMT+04:30) Kabul</ng-option>
                  <ng-option value="Asia/Yekaterinburg"
                    >(GMT+05:00) Ekaterinburg</ng-option
                  >
                  <ng-option value="Asia/Tashkent"
                    >(GMT+05:00) Tashkent</ng-option
                  >
                  <ng-option value="Asia/Kolkata"
                    >(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</ng-option
                  >
                  <ng-option value="Asia/Katmandu"
                    >(GMT+05:45) Kathmandu</ng-option
                  >
                  <ng-option value="Asia/Dhaka"
                    >(GMT+06:00) Astana, Dhaka</ng-option
                  >
                  <ng-option value="Asia/Novosibirsk"
                    >(GMT+06:00) Novosibirsk</ng-option
                  >
                  <ng-option value="Asia/Rangoon"
                    >(GMT+06:30) Yangon (Rangoon)</ng-option
                  >
                  <ng-option value="Asia/Bangkok"
                    >(GMT+07:00) Bangkok, Hanoi, Jakarta</ng-option
                  >
                  <ng-option value="Asia/Krasnoyarsk"
                    >(GMT+07:00) Krasnoyarsk</ng-option
                  >
                  <ng-option value="Asia/Hong_Kong"
                    >(GMT+08:00) Beijing, Chongqing, Hong Kong,
                    Urumqi</ng-option
                  >
                  <ng-option value="Asia/Irkutsk"
                    >(GMT+08:00) Irkutsk, Ulaan Bataar</ng-option
                  >
                  <ng-option value="Australia/Perth"
                    >(GMT+08:00) Perth</ng-option
                  >
                  <ng-option value="Australia/Eucla"
                    >(GMT+08:45) Eucla</ng-option
                  >
                  <ng-option value="Asia/Tokyo"
                    >(GMT+09:00) Osaka, Sapporo, Tokyo</ng-option
                  >
                  <ng-option value="Asia/Seoul">(GMT+09:00) Seoul</ng-option>
                  <ng-option value="Asia/Yakutsk"
                    >(GMT+09:00) Yakutsk</ng-option
                  >
                  <ng-option value="Australia/Adelaide"
                    >(GMT+09:30) Adelaide</ng-option
                  >
                  <ng-option value="Australia/Darwin"
                    >(GMT+09:30) Darwin</ng-option
                  >
                  <ng-option value="Australia/Brisbane"
                    >(GMT+10:00) Brisbane</ng-option
                  >
                  <ng-option value="Australia/Hobart"
                    >(GMT+10:00) Hobart</ng-option
                  >
                  <ng-option value="Asia/Vladivostok"
                    >(GMT+10:00) Vladivostok</ng-option
                  >
                  <ng-option value="Australia/Lord_Howe"
                    >(GMT+10:30) Lord Howe Island</ng-option
                  >
                  <ng-option value="Etc/GMT-11"
                    >(GMT+11:00) Solomon Is., New Caledonia</ng-option
                  >
                  <ng-option value="Asia/Magadan"
                    >(GMT+11:00) Magadan</ng-option
                  >
                  <ng-option value="Pacific/Norfolk"
                    >(GMT+11:30) Norfolk Island</ng-option
                  >
                  <ng-option value="Asia/Anadyr"
                    >(GMT+12:00) Anadyr, Kamchatka</ng-option
                  >
                  <ng-option value="Pacific/Auckland"
                    >(GMT+12:00) Auckland, Wellington</ng-option
                  >
                  <ng-option value="Etc/GMT-12"
                    >(GMT+12:00) Fiji, Kamchatka, Marshall Is.</ng-option
                  >
                  <ng-option value="Pacific/Chatham"
                    >(GMT+12:45) Chatham Islands</ng-option
                  >
                  <ng-option value="Pacific/Tongatapu"
                    >(GMT+13:00) Nuku'alofa</ng-option
                  >
                  <ng-option value="Pacific/Kiritimati"
                    >(GMT+14:00) Kiritimati</ng-option
                  >
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label class="ti-form-label">Time Format</label>
              </div>
              <div class="col-span-12 md:col-span-10">
                <ng-select placeholder="12 Hrs" class="ti-form-select" data-trigger>
                  <ng-option value="1">12 Hrs</ng-option>
                  <ng-option value="2">24 Hrs</ng-option>
                  <ng-option value="3">None</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label class="ti-form-label">Date Format</label>
              </div>
              <div class="col-span-12 md:col-span-10">
                <ng-select placeholder="Y-M-D" class="ti-form-select" data-trigger>
                  <ng-option value="1">Y-M-D</ng-option>
                  <ng-option value="2">M-D-Y</ng-option>
                  <ng-option value="3">D-M-Y</ng-option>
                  <ng-option value="4">Y/M/D</ng-option>
                  <ng-option value="5">M/D/Y</ng-option>
                  <ng-option value="6">D/M/Y</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-12 md:col-span-2 my-auto">
                <label class="ti-form-label">Verfication</label>
              </div>
              <div class="col-span-12 md:col-span-10">
                <nav
                  class=" flex space-x-2 rtl:space-x-reverse mb-4"
                  aria-label="Tabs"
                  role="tablist"
                >
                  <button
                    type="button"
                    class="hs-tab-active:bg-primary hs-tab-active:text-white py-2 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 active"
                    id="adhar-tab"
                    data-hs-tab="#adhar"
                    aria-controls="adhar"
                    role="tab"
                  >
                    Adhar Number
                  </button>
                  <button
                    type="button"
                    class="hs-tab-active:bg-primary hs-tab-active:text-white py-2 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
                    id="mobile-tab"
                    data-hs-tab="#mobile"
                    aria-controls="mobile"
                    role="tab"
                  >
                    mobile Number
                  </button>
                </nav>
                <div>
                  <div id="adhar" role="tabpanel" aria-labelledby="adhar-tab">
                    <input
                      type="text"
                      class="ti-form-input"
                      placeholder="name"
                      value="5353 2525 2525"
                    />
                  </div>
                  <div
                    id="mobile"
                    class="hidden"
                    role="tabpanel"
                    aria-labelledby="mobile-tab"
                  >
                    <input
                      type="number"
                      class="ti-form-input"
                      placeholder="name"
                      value="9699696996"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          id="mail-2"
          class="hidden"
          role="tabpanel"
          aria-labelledby="mail-item-2"
        >
          <h5 class="font-semibold text-lg mb-2">Notification Settings</h5>
          <p class="text-gray-500 dark:text-white/70 mb-5 text-sm">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
          <div class="space-y-5">
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
                checked
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Enable Personal Setting For Admin Panel</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Personal Setting For Customer Panel</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Default Login</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Disable Register</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Enable Contact Us</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
                checked
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Notifications From Unknown Mails</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
                checked
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Notifications From Spam Mails</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Notifications From Blocked Contacts</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Allow All Mails</label
              >
            </div>
            <div class="flex items-center">
              <input
                type="checkbox"
                class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
              />
              <label
                class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
                >Block Mails</label
              >
            </div>
          </div>
        </div>
        <div
          id="mail-3"
          class="hidden"
          role="tabpanel"
          aria-labelledby="mail-item-3"
        >
          <h5 class="font-semibold text-lg mb-2">Security Settings</h5>
          <p class="text-gray-500 dark:text-white/70 mb-5 text-sm">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
          <div class="space-y-6">
            <div class="sm:grid grid-cols-12 sm:gap-6">
              <div class="col-span-12 sm:col-span-2 my-auto">
                <label class="ti-form-label"
                  >Verfication Step - 2
                  <a
                    aria-label="anchor"
                    class="ltr:ml-2 rtl:mr-2"
                    href="javascript:void(0);"
                  >
                    <i class="ri ri-question-line"></i>
                  </a>
                </label>
              </div>
              <div class="col-span-12 sm:col-span-10">
                <div class="flex items-center">
                  <input
                    type="checkbox"
                    class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
                  />
                </div>
              </div>
            </div>
            <h5 class="font-semibold text-sm mb-2">Change Password</h5>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label for="input-label4" class="ti-form-label"
                  >Old Password
                </label>
              </div>
              <div class="col-span-10">
                <input
                  type="password"
                  id="input-label4"
                  class="ti-form-input"
                  placeholder="Password"
                />
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label for="input-label5" class="ti-form-label"
                  >New Password
                </label>
              </div>
              <div class="col-span-10">
                <input
                  type="password"
                  id="input-label5"
                  class="ti-form-input"
                  placeholder="Password"
                />
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label for="input-label6" class="ti-form-label"
                  >Confirm Password
                </label>
              </div>
              <div class="col-span-10">
                <input
                  type="password"
                  id="input-label6"
                  class="ti-form-input"
                  placeholder="Password"
                />
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Account </label>
              </div>
              <div class="col-span-10">
                <button
                  type="button"
                  class="py-2 px-3 ti-btn bg-danger text-white hover:bg-danger/80 focus:ring-danger dark:focus:ring-offset-white/10"
                >
                  De-Activate Account
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          id="mail-4"
          class="hidden"
          role="tabpanel"
          aria-labelledby="mail-item-4"
        >
          <h5 class="font-semibold text-lg mb-2">Mail Settings</h5>
          <p class="text-gray-500 dark:text-white/70 mb-6 text-sm">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
          <div class="space-y-6">
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Rows per page</label>
              </div>
              <div class="col-span-10">
                <ng-select placeholder="10" class="ti-form-select" data-trigger>
                  <ng-option value="0">10</ng-option>
                  <ng-option value="1">30</ng-option>
                  <ng-option value="2">50</ng-option>
                  <ng-option value="3">80</ng-option>
                  <ng-option value="4">100</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Inbox Type</label>
              </div>
              <div class="col-span-10">
                <ng-select placeholder="10" class="ti-form-select" data-trigger>
                  <ng-option value="0">10</ng-option>
                  <ng-option value="1">30</ng-option>
                  <ng-option value="2">50</ng-option>
                  <ng-option value="3">80</ng-option>
                  <ng-option value="4">100</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Mark As Read</label>
              </div>
              <div class="col-span-10">
                <ng-select placeholder="After 10 minute" class="ti-form-select" data-trigger>
                  <ng-option value="en">Never</ng-option>
                  <ng-option value="en">Immediately</ng-option>
                  <ng-option value="dn">After 1 mintue</ng-option>
                  <ng-option value="es">After 5 mintue</ng-option>
                  <ng-option value="et" selected>After 10 mintue</ng-option>
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Request For Return Recepit</label>
              </div>
              <div class="col-span-10">
                <ng-select placeholder="Ask me" class="ti-form-select" data-trigger>
                  <ng-option value="0">Ask me</ng-option>
                  <ng-option value="1">Send Recepit</ng-option>
                  <ng-option value="2">Send Recepit To My Contacts</ng-option>
                  <ng-option value="3"
                    >Send Recepit To Trusted Senders</ng-option
                  >
                </ng-select>
              </div>
            </div>
            <div class="md:grid grid-cols-12 md:gap-6">
              <div class="col-span-2 my-auto">
                <label class="ti-form-label">Refresh</label>
              </div>
              <div class="col-span-10">
                <ng-select placeholder="Every 1 minute" class="ti-form-select" data-trigger>
                  <ng-option value="0">every 1 mintue</ng-option>
                  <ng-option value="1">every 3 mintue</ng-option>
                  <ng-option value="2">every 5 mintue</ng-option>
                  <ng-option value="3">every 10 mintue</ng-option>
                  <ng-option value="4">every 15 mintue</ng-option>
                  <ng-option value="5">every 30 mintue</ng-option>
                </ng-select>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-footer bg-transparent">
        <button
          type="submit"
          class="py-2 px-3 ti-btn ti-btn-primary ltr:float-right rtl:float-left"
        >
          Restore Default
        </button>
        <button
          type="button"
          class="py-2 px-3 ti-btn ti-btn-danger ltr:float-right rtl:float-left"
        >
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>
<!-- End::row-1 -->