<!-- Profile Cover -->
                      <div class="profile-cover">
                        <div class="profile-cover-img-wrapper">
                          <img class="profile-cover-img" src="../assets/img/1920x400/img1.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Profile Cover -->

                      <!-- Profile Header -->
                      <div class="text-center mb-5">
                        <!-- Avatar -->
                        <div class="avatar avatar-xxl avatar-circle avatar-border-lg profile-cover-avatar">
                          <img class="avatar-img" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                          <span class="avatar-status avatar-status-success"></span>
                        </div>
                        <!-- End Avatar -->

                        <h1 class="page-title">Ella Lauda <i class="tio-verified tio-lg text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></h1>

                        <!-- List -->
                        <ul class="list-inline list-inline-m-1">
                          <li class="list-inline-item">
                            <i class="tio-city mr-1"></i>
                            <span>Htmlstream</span>
                          </li>

                          <li class="list-inline-item">
                            <i class="tio-poi-outlined mr-1"></i>
                            <a href="#">San Francisco,</a>
                            <a href="#">US</a>
                          </li>

                          <li class="list-inline-item">
                            <i class="tio-date-range mr-1"></i>
                            <span>Joined March 2017</span>
                          </li>
                        </ul>
                        <!-- End List -->
                      </div>
                      <!-- End Profile Header -->
                    
                  

                    
                      <!-- Card -->
                      <div class="card">
                        <!-- Profile Cover -->
                        <div class="profile-cover">
                          <div class="profile-cover-img-wrapper">
                            <img id="profileCoverImg" class="profile-cover-img" src="../assets/img/1920x400/img2.jpg" alt="Image Description">

                            <!-- Custom File Cover -->
                            <div class="profile-cover-content profile-cover-btn">
                              <div class="custom-file-btn">
                                <input type="file" class="js-file-attach custom-file-btn-input" id="profileCoverUplaoder"
                                       data-hs-file-attach-options='{
                                          "textTarget": "#profileCoverImg",
                                          "mode": "image",
                                          "targetAttr": "src"
                                       }'>
                                <label class="custom-file-btn-label btn btn-sm btn-white" for="profileCoverUplaoder">
                                  <i class="tio-add-photo mr-sm-1"></i>
                                  <span class="d-none d-sm-inline-block">Update your header</span>
                                </label>
                              </div>
                            </div>
                            <!-- End Custom File Cover -->
                          </div>
                        </div>
                        <!-- End Profile Cover -->

                        <!-- Avatar -->
                        <label class="avatar avatar-xxl avatar-circle avatar-border-lg avatar-uploader profile-cover-avatar" for="avatarUploader">
                          <img id="avatarImg" class="avatar-img" src="../assets/img/160x160/img6.jpg" alt="Image Description">

                          <input type="file" class="js-file-attach avatar-uploader-input" id="avatarUploader"
                                 data-hs-file-attach-options='{
                                    "textTarget": "#avatarImg",
                                    "mode": "image",
                                    "targetAttr": "src"
                                 }'>

                          <span class="avatar-uploader-trigger">
                            <i class="tio-edit avatar-uploader-icon shadow-soft"></i>
                          </span>
                        </label>
                        <!-- End Avatar -->

                        <!-- Body -->
                        <div class="card-body">
                          <div class="row">
                            <div class="col-sm-5">
                              <span class="d-block font-size-sm mb-2">Who can see your profile photo? <i class="tio-help-outlined" data-toggle="tooltip" data-placement="top" title="Your visibility setting only applies to your profile photo. Your header image is always visible to anyone."></i></span>

                              <!-- Select -->
                              <div class="select2-custom">
                                <select class="js-select2-custom"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity"
                                        }'>
                                  <option value="privacy1" data-option-template='<span class="media"><i class="tio-earth-east tio-lg text-body mr-2" style="margin-top: .125rem;"></i><span class="media-body"><span class="d-block">Anyone</span><small class="select2-custom-hide">Visible to anyone who can view your content. Accessible by installed apps.</small></span></span>'>Anyone</option>
                                  <option value="privacy2" data-option-template='<span class="media"><i class="tio-lock-outlined tio-lg text-body mr-2" style="margin-top: .125rem;"></i><span class="media-body"><span class="d-block">Only you</span><small class="select2-custom-hide">Only visible to you.</small></span></span>'>Only you</option>
                                </select>
                               </div>
                              <!-- End Select -->
                             </div>
                          </div>
                          <!-- End Row -->
                        </div>
                        <!-- End Body -->
                      </div>
                      <!-- End Card -->
                    
                  

                    
                      <link rel="stylesheet" href="../node_modules/select2/dist/css/select2.min.css">
                    
                  

                    
                      <!-- JS Implementing Plugins -->
                      <script src="../assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
                      <script src="../node_modules/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="../assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of file attach
                          $('.js-file-attach').each(function () {
                            var customFile = new HSFileAttach($(this)).init();
                          });

                          // initialization of select2
                          $('.js-select2-custom').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>