<app-page-header
title="Profile Settings"
title1="Profile Settings"
activeitem="Pages"
></app-page-header>
<!-- Start::row-1 -->
<div class="grid grid-cols-12 gap-x-6">
<div class="col-span-12 xl:col-span-3">
<div class="box">
<div class="box-body relative">
<div
class="flex relative before:bg-black/50 before:absolute before:w-full before:h-full before:rounded-sm"
>
<img [src]="url2 ? url2 : './assets/img/png-images/2.png'"
alt=""
class="h-[200px] w-full rounded-sm"
id="profile-img2"
/>
<span
class="absolute top-5 ltr:right-5 rtl:left-5 flex p-2 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none"
>
<i class="ri ri-pencil-line"></i>
<input (change)="onSelectFile2($event)"
type="file"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
id="profile-change2"
/>
</span>
</div>
<div class="absolute top-[4.5rem] inset-x-0 text-center space-y-3">
<div class="flex justify-center w-full">
<div class="relative">
<img
[src]="url1 ? url1 : './assets/img/users/1.jpg'"
class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto"
id="profile-img"
alt="pofile-img"
/>
<span
class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none"
>
<i class="ri ri-pencil-line"></i>
<input (change)="onSelectFile1($event)"
type="file"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
id="profile-change"
/>
</span>
</div>
</div>
</div>
</div>
<div class="box-body pt-0">
<nav
class="flex flex-col space-y-2"
aria-label="Tabs"
role="tablist"
data-hs-tabs-vertical="true"
>
<button
type="button"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 active"
id="profile-settings-item-1"
data-hs-tab="#profile-settings-1"
aria-controls="profile-settings-1"
role="tab"
>
<i class="ri ri-shield-user-line"></i> Personal Settings
</button>
<button
type="button"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border 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="profile-settings-item-2"
data-hs-tab="#profile-settings-2"
aria-controls="profile-settings-2"
role="tab"
>
<i class="ri ri-global-line"></i> General Settings
</button>
<button
type="button"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border 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="profile-settings-item-3"
data-hs-tab="#profile-settings-3"
aria-controls="profile-settings-3"
role="tab"
>
<i class="ri ri-lock-line"></i> Password Settings
</button>
<button
type="button"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border 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="profile-settings-item-4"
data-hs-tab="#profile-settings-4"
aria-controls="profile-settings-4"
role="tab"
>
<i class="ri ri-account-circle-line"></i> Account Settings
</button>
<button
type="button"
class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border 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="profile-settings-item-5"
data-hs-tab="#profile-settings-5"
aria-controls="profile-settings-5"
role="tab"
>
<i class="ri ri-notification-4-line"></i> Notifications Settings
</button>
</nav>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-9">
<div class="box">
<div class="box-body p-0">
<div
id="profile-settings-1"
role="tabpanel"
aria-labelledby="profile-settings-item-1"
>
<div class="box border-0 shadow-none mb-0">
<div class="box-header">
<h5 class="box-title leading-none flex">
<i class="ri ri-shield-user-line ltr:mr-2 rtl:ml-2"></i>
Personal Settings
</h5>
</div>
<div class="box-body">
<div>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">First Name</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Firstname"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Last Name</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Lastname"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Phone Number</label>
<input
type="number"
class="my-auto ti-form-input"
placeholder="+91 123-456-789"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Email Address</label>
<input
type="email"
class="my-auto ti-form-input"
placeholder="your@site.com"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Date Of Birth</label>
<mat-form-field>
<mat-label>DD/MM/YYYY</mat-label>
<input matInput [matDatepicker]="picker" />
<mat-datepicker-toggle
matSuffix
[for]="picker"
></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<br />
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Gender</label>
<ul class="flex flex-col sm:flex-row">
<li
class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="hs-horizontal-list-group-item-radio-1"
name="hs-horizontal-list-group-item-radio"
type="radio"
class="ti-form-radio"
checked
/>
</div>
<label
for="hs-horizontal-list-group-item-radio-1"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Female
</label>
</div>
</li>
<li
class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="hs-horizontal-list-group-item-radio-2"
name="hs-horizontal-list-group-item-radio"
type="radio"
class="ti-form-radio"
/>
</div>
<label
for="hs-horizontal-list-group-item-radio-2"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Male
</label>
</div>
</li>
<li
class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input
id="hs-horizontal-list-group-item-radio-3"
name="hs-horizontal-list-group-item-radio"
type="radio"
class="ti-form-radio"
/>
</div>
<label
for="hs-horizontal-list-group-item-radio-3"
class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70"
>
Others
</label>
</div>
</li>
</ul>
</div>
</div>
<div class="my-5">
<div class="space-y-2">
<label class="ti-form-label mb-0">Address</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Address"
/>
</div>
</div>
<div class="grid lg:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">City</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="city"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Country</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="state"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">State</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="state"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Pincode</label>
<input
type="number"
class="my-auto ti-form-input"
placeholder="pincode"
/>
</div>
</div>
<div class="mt-5">
<div class="space-y-2">
<label class="ti-form-label mb-0">Bio</label>
<textarea
class="ti-form-input"
rows="3"
placeholder="Add Your Bio"
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div
id="profile-settings-2"
class="hidden"
role="tabpanel"
aria-labelledby="profile-settings-item-2"
>
<div class="box border-0 shadow-none mb-0">
<div class="box-header">
<h5 class="box-title leading-none flex">
<i class="ri ri-global-line ltr:mr-2 rtl:ml-2"></i> General
Settings
</h5>
</div>
<div class="box-body">
<h5 class="text-base font-semibold">User Details</h5>
<div class="my-4">
<div class="grid lg:grid-cols-2 gap-6 mb-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">User Id</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="User Id"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Joining Date</label>
<dp-date-picker
class="ti-form-input joining-date flatpickr-input date active"
placeholder="Choose date"
[config]="datePickerConfig"
required="true"
>
</dp-date-picker>
<!-- <input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly> -->
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Language</label>
<ng-select class="ti-form-select" data-trigger placeholder="Language">
<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 class="space-y-2">
<label class="ti-form-label mb-0">Time Zone</label>
<ng-select class="ti-form-select" data-trigger placeholder="Time">
<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 & Canada)</ng-option
>
<ng-option value="America/Denver"
>(GMT-07:00) Mountain Time (US & 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 & Canada)</ng-option
>
<ng-option value="America/New_York"
>(GMT-05:00) Eastern Time (US & 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="space-y-2" id="skills">
<label class="ti-form-label">Skills</label>
<ng-select [multiple]="true" [(ngModel)]="selectedItems">
<ng-option *ngFor="let category of dropdownList" [value]="category.id" >{{category.itemName}}</ng-option>
<ng-option [value]="'custom'">Custom</ng-option>
</ng-select>
</div>
</div>
<h5 class="text-base font-semibold">Education Details</h5>
<div class="my-4">
<div class="grid lg:grid-cols-3 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">Schooling</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Schooling"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Joining Date</label>
<mat-form-field place>
<mat-label>Choose Date</mat-label>
<input matInput [matDatepicker]="picker2" />
<mat-datepicker-toggle
matSuffix
[for]="picker2"
></mat-datepicker-toggle>
<mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Completed Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker3"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker3"
></mat-datepicker-toggle>
<mat-datepicker #picker3></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Graduation</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Graduation"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Joining Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker4"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker4"
></mat-datepicker-toggle>
<mat-datepicker #picker4></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Completed Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker5"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker5"
></mat-datepicker-toggle>
<mat-datepicker #picker5></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
<h5 class="text-base font-semibold">Work Experience</h5>
<div class="my-4">
<div class="grid lg:grid-cols-3 gap-6">
<div class="space-y-2">
<label class="ti-form-label mb-0">Work 1 :</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="company Name"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Designation</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Designation"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Joining Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker6"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker6"
></mat-datepicker-toggle>
<mat-datepicker #picker6></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Completed Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker7"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker7"
></mat-datepicker-toggle>
<mat-datepicker #picker7></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Work 2 :</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="company Name"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Designation</label>
<input
type="text"
class="my-auto ti-form-input"
placeholder="Designation"
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Joining Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker8"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker8"
></mat-datepicker-toggle>
<mat-datepicker #picker8></mat-datepicker>
</mat-form-field>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0">Completed Date</label>
<mat-form-field>
<mat-label>Choose Date</mat-label>
<input
matInput
[matDatepicker]="picker9"
class="ti-form-input ltr:rounded-l-none rtl:rounded-r-none focus:z-10 flatpickr-input p-0"
/>
<mat-datepicker-toggle
matSuffix
[for]="picker9"
></mat-datepicker-toggle>
<mat-datepicker #picker9></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</div>
<div
id="profile-settings-3"
class="hidden"
role="tabpanel"
aria-labelledby="profile-settings-item-3"
>
<div class="box border-0 shadow-none mb-0">
<div class="box-header">
<h5 class="box-title leading-none flex">
<i class="ri ri-lock-line ltr:mr-2 rtl:ml-2"></i> Password
Settings
</h5>
</div>
<div class="box-body p-0">
<div class="grid grid-cols-12">
<div
class="col-span-12 xl:col-span-6 xl:ltr:border-r xl:rtl:border-l xl:border-b-0 border-b p-6 border-gray-200 dark:border-white/10"
>
<div class="space-y-4">
<div class="space-y-2">
<label class="ti-form-label mb-0"
>Email Id<sup class="text-danger">*</sup></label
>
<input
type="email"
class="my-auto ti-form-input"
placeholder="Email Id"
required
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0"
>Current Password<sup class="text-danger">*</sup></label
>
<input
type="password"
class="my-auto ti-form-input"
autocomplete="off"
placeholder="Current Password"
required
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0"
>New Password<sup class="text-danger">*</sup></label
>
<input
type="password"
class="my-auto ti-form-input"
autocomplete="off"
placeholder="New Password"
required
/>
</div>
<div class="space-y-2">
<label class="ti-form-label mb-0"
>Confirm Password<sup class="text-danger">*</sup></label
>
<input
type="password"
class="my-auto ti-form-input"
autocomplete="off"
placeholder="Confirm Password"
required
/>
</div>
<p class="text-xs text-gray-500 dark:text-white/70">
Password should be min of
<b class="text-success">10 characters <sup>*</sup> </b>
(and up to 100 characters),<b class="text-success"
>One Upper Case Character<sup>*</sup></b
>
and
<b class="text-success"
>One Special Character<sup>*</sup></b
>
e.g., ! @ # ? included.
</p>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="box border-0 shadow-none">
<div class="box-header">
<div class="sm:flex space-y-4">
<h5 class="box-title my-auto">Web Linked Devices</h5>
<button
type="button"
class="py-1 px-3 ti-btn ti-btn-primary text-sm m-0"
>
Log out From All Devices
</button>
</div>
</div>
<div class="box-body">
<ul class="flex flex-col">
<li
class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="sm:flex w-full space-y-2">
<div class="flex space-x-3 rtl:space-x-reverse">
<div
class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5"
>
<i
class="ri ri-smartphone-line text-xl leading-none text-gray-500 dark:text-white/70"
></i>
</div>
<div class="">
<p class="mb-0 text-sm">Mobile-Poco-M2-Pro</p>
<p
class="mb-0 text-gray-500 dark:text-white/70 text-xs"
>
Manchester, UK-Nov 30, 04:45PM
</p>
</div>
</div>
<div class="ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="px-2 py-1 me-1 ti-btn me-0 ti-btn-soft-info text-xs"
>
ReWoke
</button>
<button
type="button"
class="px-2 py-1 me-1 ti-btn m-0 ti-btn-soft-danger text-xs"
>
Logout
</button>
</div>
</div>
</li>
<li
class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="sm:flex w-full space-y-2">
<div class="flex space-x-3 rtl:space-x-reverse">
<div
class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5"
>
<i
class="ri ri-tablet-line text-xl leading-none text-gray-500 dark:text-white/70"
></i>
</div>
<div class="">
<p class="mb-0 text-sm">Apple Tablet</p>
<p
class="mb-0 text-gray-500 dark:text-white/70 text-xs"
>
Manchester, UK-Nov 30, 02:45PM
</p>
</div>
</div>
<div class="ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="px-2 py-1 me-1 ti-btn me-0 ti-btn-soft-info text-xs"
>
ReWoke
</button>
<button
type="button"
class="px-2 py-1 me-1 ti-btn me-0 ti-btn-soft-danger text-xs"
>
Logout
</button>
</div>
</div>
</li>
<li
class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="sm:flex w-full space-y-2">
<div class="flex space-x-3 rtl:space-x-reverse">
<div
class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5"
>
<i
class="ri ri-airplay-line text-xl leading-none text-gray-500 dark:text-white/70"
></i>
</div>
<div class="">
<p class="mb-0 text-sm">Dell Desktop</p>
<p
class="mb-0 text-gray-500 dark:text-white/70 text-xs"
>
Manchester, UK-Nov 30, 02:45PM
</p>
</div>
</div>
<div class="ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="px-2 py-1 me-1 ti-btn me-0 ti-btn-soft-info text-xs"
>
ReWoke
</button>
<button
type="button"
class="px-2 py-1 me-1 ti-btn m-0 ti-btn-soft-danger text-xs"
>
Logout
</button>
</div>
</div>
</li>
<li
class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white"
>
<div class="sm:flex w-full space-y-2">
<div class="flex space-x-3 rtl:space-x-reverse">
<div
class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5"
>
<i
class="ri ri-macbook-line text-xl leading-none text-gray-500 dark:text-white/70"
></i>
</div>
<div class="">
<p class="mb-0 text-sm">Lenovo Laptop</p>
<p
class="mb-0 text-gray-500 dark:text-white/70 text-xs"
>
Manchester, UK-Nov 30, 02:45PM
</p>
</div>
</div>
<div class="ltr:ml-auto rtl:mr-auto my-auto">
<button
type="button"
class="px-2 py-1 me-1 ti-btn me-0 ti-btn-soft-info text-xs"
>
ReWoke
</button>
<button
type="button"
class="px-2 py-1 me-1 ti-btn m-0 ti-btn-soft-danger text-xs"
>
Logout
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="my-5 px-6">
<div
class="sm:space-x-6 rtl:space-x-reverse sm:flex space-y-4"
>
<label class="ti-form-label my-auto">Account :</label>
<button type="button" class="ti-btn ti-btn-danger">
Deactivate Account
</button>
<button
type="button"
class="ti-btn-disabled ti-btn ti-btn-success"
>
Activate Account
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
id="profile-settings-4"
class="hidden"
role="tabpanel"
aria-labelledby="profile-settings-item-4"
>
<div class="box border-0 shadow-none mb-0">
<div class="box-header">
<h5 class="box-title leading-none flex">
<i class="ri ri-account-circle-line ltr:mr-2 rtl:ml-2"></i>
Account Settings
</h5>
</div>
<div class="box-body">
<div class="sm:grid grid-cols-12 gap-6 space-y-6">
<div class="col-span-2 my-auto">
<label class="ti-form-label mb-0"
>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-10">
<div class="flex items-center">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5 m-0"
/>
</div>
</div>
</div>
<div class="my-5">
<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 dark:hs-tab-active:bg-primary dark: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 dark:hs-tab-active:bg-primary dark: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>
<h5 class="text-base font-semibold">Social Accounts</h5>
<div class="space-y-3 mt-5">
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Facebook</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="https://www.facebook.com/spruko"
/>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Twitter</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="twitter.com/spruko.me"
/>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Google+</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="spruko.com"
/>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Linked in</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="linkedin.com/in/spruko"
/>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Github</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="github.com/spruko"
/>
</div>
</div>
<div class="sm:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-2 my-auto">
<label class="ti-form-label">Website</label>
</div>
<div class="col-span-10">
<input
type="email"
class="ti-form-input"
value="www.andersonitumay.com"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
id="profile-settings-5"
class="hidden"
role="tabpanel"
aria-labelledby="profile-settings-item-5"
>
<div class="box border-0 shadow-none mb-0">
<div class="box-header">
<h5 class="box-title leading-none flex">
<i class="ri ri-notification-4-line ltr:mr-2 rtl:ml-2"></i>
Notifications Settings
</h5>
</div>
<div class="box-body">
<div class="space-y-4">
<div
class="p-4 border border-gray-200 dark:border-white/10 rounded-sm"
>
<div class="md:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 md:col-span-6 my-auto">
<p class="text-base mb-1 font-semibold">Comments</p>
<p class="text-xs mb-0 text-gray-500 dark:text-white/70">
The Comment Notifications are the notifications you get
for your posts and replies for your comments.
</p>
</div>
<div class="col-span-12 md:col-span-6">
<div class="space-y-2">
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me If Mentioned</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify For My Posts</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>All Comments</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="p-4 border border-gray-200 dark:border-white/10 rounded-sm"
>
<div class="md:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 md:col-span-6 my-auto">
<p class="text-base mb-1 font-semibold">Tags</p>
<p class="text-xs mb-0 text-gray-500 dark:text-white/70">
The Tag Notifications are the notifications you get when
you are tagged for others posts.
</p>
</div>
<div class="col-span-12 md:col-span-6">
<div class="space-y-2">
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="p-4 border border-gray-200 dark:border-white/10 rounded-sm"
>
<div class="md:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 md:col-span-6 my-auto">
<p class="text-base mb-1 font-semibold">Reminders</p>
<p class="text-xs mb-0 text-gray-500 dark:text-white/70">
The Reminder Notifications are the notifications you get
when you missed any update .
</p>
</div>
<div class="col-span-12 md:col-span-6">
<div class="space-y-2">
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Remind Me</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Remind Me only Important Updates</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Remind Me All updates</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="p-4 border border-gray-200 dark:border-white/10 rounded-sm"
>
<div class="md:grid grid-cols-12 gap-6 space-y-4">
<div class="col-span-12 md:col-span-6 my-auto">
<p class="text-base mb-1 font-semibold">More Activity</p>
<p class="text-xs mb-0 text-gray-500 dark:text-white/70">
The Notifications is for likes ,comments,reactions for
your profile .
</p>
</div>
<div class="col-span-12 md:col-span-6">
<div class="space-y-2">
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me only Important</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
/>
</div>
</div>
<div
class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end"
>
<div class="col-span-9 my-auto">
<label
class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70"
>Notify Me All</label
>
</div>
<div class="col-span-3 my-auto">
<input
type="checkbox"
class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5"
checked
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-footer text-end space-x-3 rtl:space-x-reverse">
<a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-primary"
><i class="ri ri-refresh-line"></i> Update</a
>
<a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-secondary"
><i class="ri ri-close-circle-line"></i> Cancel</a
>
</div>
</div>
</div>
</div>
<!-- End::row-1 -->