<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Account Settings')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Pages', 'title' => 'Account Settings')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Pages', 'title' => 'Account Settings')) ?>

                    <div class="container-fluid">
<div class="mb-5">
<div class="relative h-62.5 overflow-hidden rounded bg-[url(/../images/profile-bg.jpg)] bg-cover bg-center" style="min-height: 300px">
<div class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-linear-to-t from-[#313A46] via-[#313a46cc] to-[#313a4680] p-7.5 text-center">
<h3 class="text-2xl text-white italic">
                                        "Designing the future, one template at a time"
                                        <a class="text-primary inline-block" href="#!">
<i class="iconify tabler--edit text-primary"></i>
</a>
</h3>
<button class="btn bg-danger text-white hover:bg-danger-hover" type="button">Change Background</button>
</div>
</div>
</div>
<div class="container">
<div class="card -mt-12">
<div class="card-body">
<h5 class="bg-light/15 border-default-300 mb-5 flex items-center justify-center gap-1.5 rounded border border-dashed p-1.25 text-sm uppercase">
<i class="iconify tabler--user-circle text-base"></i>
                                        Personal Info
                                    </h5>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-base gap-y-5 mb-base">
<div>
<label class="form-label" for="firstname">First Name</label>
<input class="form-input" id="firstname" placeholder="Enter first name" type="text"/>
</div>
<div>
<label class="form-label" for="lastname">Last Name</label>
<input class="form-input" id="lastname" placeholder="Enter last name" type="text"/>
</div>
<div>
<label class="form-label" for="jobtitle">Job Title</label>
<input class="form-input" id="jobtitle" placeholder="e.g. UI Developer, Designer" type="text"/>
</div>
<div>
<label class="form-label" for="phone">Phone Number</label>
<input class="form-input" id="phone" placeholder="+1 234 567 8901" type="text"/>
</div>
<div class="col-span-1 lg:col-span-2">
<label class="form-label" for="userbio">Bio</label>
<textarea class="form-textarea" id="userbio" placeholder="Write something about yourself..." rows="4"></textarea>
</div>
<div>
<label class="form-label" for="useremail">Email Address</label>
<input class="form-input" id="useremail" placeholder="Enter email" type="email"/>
<span class="text-default-400 text-xs italic">
<a class="hover:text-primary" href="#">Click here to change your email</a>
</span>
</div>
<div>
<label class="form-label" for="userpassword">Password</label>
<input class="form-input" id="userpassword" placeholder="Enter new password" type="password"/>
<span class="text-default-400 text-xs italic">
<a class="hover:text-primary" href="#">Click here to change your email</a>
</span>
</div>
<div class="col-span-1 lg:col-span-2">
<label class="form-label" for="profilephoto">Password</label>
<input class="form-input" id="profilephoto" name="file-input" type="file"/>
</div>
</div>
<h5 class="bg-light/15 border-default-300 mb-5 flex items-center justify-center gap-1.5 rounded border border-dashed p-1.25 text-sm uppercase">
<i class="iconify tabler--map-pin text-base"></i>
                                        Address Info
                                    </h5>
<div class="mb-5 grid grid-cols-1 lg:grid-cols-6 gap-x-base gap-y-5">
<div class="col-span-1 lg:col-span-3">
<label class="form-label" for="address-line1">Address Line 1</label>
<input class="form-input" id="address-line1" placeholder="Street, Apartment, Unit, etc." type="text"/>
</div>
<div class="col-span-1 lg:col-span-3">
<label class="form-label" for="address-line2">Address Line 2</label>
<input class="form-input" id="address-line2" placeholder="Optional" type="text"/>
</div>
<div class="col-span-1 lg:col-span-2">
<label class="form-label" for="city">City</label>
<input class="form-input" id="city" placeholder="City" type="text"/>
</div>
<div class="col-span-1 lg:col-span-2">
<label class="form-label" for="state">State / Province</label>
<input class="form-input" id="state" placeholder="State or Province" type="text"/>
</div>
<div class="col-span-1 lg:col-span-4">
<label class="form-label" for="zipcode">Postal / ZIP Code</label>
<input class="form-input" id="zipcode" placeholder="Postal Code" type="text"/>
</div>
<div class="col-span-1 lg:col-span-6">
<label class="form-label" for="country">Country</label>
<input class="form-input" id="country" placeholder="Country" type="text"/>
</div>
</div>
<h5 class="bg-light/15 border-default-300 mb-5 flex items-center justify-center gap-1.5 rounded border border-dashed p-1.25 text-sm uppercase">
<i class="iconify tabler--building text-base"></i>
                                        Company Info
                                    </h5>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-base gap-y-5 mb-base">
<div>
<label class="form-label" for="companyname">Company Name</label>
<input class="form-input" id="companyname" placeholder="Enter company name" type="text"/>
</div>
<div>
<label class="form-label" for="cwebsite">Website</label>
<input class="form-input" id="cwebsite" placeholder="https://yourcompany.com" type="text"/>
</div>
</div>
<h5 class="bg-light/15 border-default-300 mb-5 flex items-center justify-center gap-1.5 rounded border border-dashed p-1.25 text-sm uppercase">
<i class="iconify tabler--world text-base"></i>
                                        Social
                                    </h5>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-base gap-y-5 mb-base">
<div>
<label class="form-label" for="social-fb">Facebook</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-fb" placeholder="Facebook URL" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="social-tw">Twitter X</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M4 4l11.733 16h4.267l-11.733 -16z"></path>
<path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-tw" placeholder="@username" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="social-insta">Instagram</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"></path>
<path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
<path d="M16.5 7.5v.01"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-insta" placeholder="Instagram URL" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="social-lin">LinkedIn</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M8 11v5"></path>
<path d="M8 8v.01"></path>
<path d="M12 16v-5"></path>
<path d="M16 16v-3a2 2 0 1 0 -4 0"></path>
<path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-lin" placeholder="LinkedIn Profile" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="social-gh">GitHub</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-gh" placeholder="GitHub Username" required="" type="text"/>
</div>
</div>
<div>
<label class="form-label" for="social-sky">Dribbble</label>
<div class="input-group">
<span class="input-group-text">
<svg class="text-default-800 text-base" fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 3.6c5 6 7 10.5 7.5 16.2"></path>
<path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4"></path>
<path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5"></path>
</svg>
</span>
<input class="form-input rounded-s-none!" id="social-sky" placeholder="@username" required="" type="text"/>
</div>
</div>
</div>
<div class="mt-7.5 text-end">
<button class="btn bg-success text-white hover:bg-success-hover" type="submit">Save Changes</button>
</div>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>