{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-profiles" %}
{% set mainNavActive_3 = "page-profile-comments-1" %}
{% set title = "Unify Profile Comments | " %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-css.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

    {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Breadcrumb -->
      <section class="g-my-30">
        <div class="container">
          <ul class="u-list-inline">
            <li class="list-inline-item g-mr-7">
              <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Home</a>
              <i class="fa fa-angle-right g-ml-7"></i>
            </li>
            <li class="list-inline-item g-mr-7">
              <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Pages</a>
              <i class="fa fa-angle-right g-ml-7"></i>
            </li>
            <li class="list-inline-item g-color-primary">
              <span>Profile Comments</span>
            </li>
          </ul>
        </div>
      </section>
      <!-- End Breadcrumb -->

      <section class="g-mb-100">
        <div class="container">
          <div class="row">
            <!-- Profile Sidebar -->
            <div class="col-lg-3 g-mb-50 g-mb-0--lg">
              <!-- User Image -->
              <div class="u-block-hover g-pos-rel">
                <figure>
                  <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x450/img5.jpg" alt="Image Description">
                </figure>

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-black-opacity-0_5 g-pa-30">
                  <div class="u-block-hover__additional--fade u-block-hover__additional--fade-up g-flex-middle">
                    <!-- Figure Social Icons -->
                    <ul class="list-inline text-center g-flex-middle-item--bottom g-mb-20">
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-note u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-notebook u-line-icon-pro"></i>
                        </a>
                      </li>
                      <li class="list-inline-item align-middle g-mx-7">
                        <a class="u-icon-v1 u-icon-size--md g-color-white" href="#">
                          <i class="icon-settings u-line-icon-pro"></i>
                        </a>
                      </li>
                    </ul>
                    <!-- End Figure Social Icons -->
                  </div>
                </figcaption>
                <!-- End Figure Caption -->

                <!-- User Info -->
                <span class="g-pos-abs g-top-20 g-left-0">
                  <a class="btn btn-sm u-btn-primary rounded-0" href="#">Johne Doe</a>
                  <small class="d-block g-bg-black g-color-white g-pa-5">Project Manager</small>
                </span>
                <!-- End User Info -->
              </div>
              <!-- User Image -->

              <!-- Sidebar Navigation -->
              <div class="list-group list-group-border-0 g-mb-40">
                <!-- Overall -->
                <a href="page-profile-main-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-home g-pos-rel g-top-1 g-mr-8"></i> Overall</span>
                  <span class="u-label g-font-size-11 g-bg-gray-dark-v2 g-rounded-20 g-px-10">2</span>
                </a>
                <!-- End Overall -->

                <!-- Profile -->
                <a href="page-profile-profile-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-cursor g-pos-rel g-top-1 g-mr-8"></i> Profile</span>
                </a>
                <!-- End Profile -->

                <!-- Users Contacts -->
                <a href="page-profile-users-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-notebook g-pos-rel g-top-1 g-mr-8"></i> Users Contacts</span>
                </a>
                <!-- End Users Contacts -->

                <!-- My Projects -->
                <a href="page-profile-projects-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-layers g-pos-rel g-top-1 g-mr-8"></i> My Projects</span>
                  <span class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-10">9</span>
                </a>
                <!-- End My Projects -->

                <!-- Comments -->
                <a href="page-profile-comments-1.html" class="list-group-item justify-content-between active">
                  <span><i class="icon-bubbles g-pos-rel g-top-1 g-mr-8"></i> Comments</span>
                  <span class="u-label g-font-size-11 g-bg-pink g-rounded-20 g-px-8">24</span>
                </a>
                <!-- End Comments -->

                <!-- Reviews -->
                <a href="page-profile-reviews-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i> Reviews</span>
                </a>
                <!-- End Reviews -->

                <!-- History -->
                <a href="page-profile-history-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-fire g-pos-rel g-top-1 g-mr-8"></i> History</span>
                </a>
                <!-- End History -->

                <!-- Settings -->
                <a href="page-profile-settings-1.html" class="list-group-item list-group-item-action justify-content-between">
                  <span><i class="icon-settings g-pos-rel g-top-1 g-mr-8"></i> Settings</span>
                  <span class="u-label g-font-size-11 g-bg-cyan g-rounded-20 g-px-8">3</span>
                </a>
                <!-- End Settings -->
              </div>
              <!-- End Sidebar Navigation -->

              <!-- Project Progress -->
              <div class="card border-0 rounded-0 g-mb-50">
                <!-- Panel Header -->
                <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                  <h3 class="h6 mb-0">
                    <i class="icon-layers g-pos-rel g-top-1 g-mr-5"></i> Project Progress
                  </h3>
                  <div class="dropdown g-mb-10 g-mb-0--md">
                    <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="icon-options-vertical g-pos-rel g-top-1"></i>
                    </span>
                    <div class="dropdown-menu dropdown-menu-right rounded-0 g-mt-10">
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-layers g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Projects
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-wallet g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Wallets
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-fire g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Reports
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-settings g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Users Setting
                      </a>

                      <div class="dropdown-divider"></div>

                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-plus g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> View More
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Panel Header -->

                <!-- Panel Body -->
                <div class="js-scrollbar card-block u-info-v1-1 g-bg-white-gradient-v1--after g-height-300 g-pa-0">
                  <!-- Web Design -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Web Design <span class="float-right g-ml-10">68%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-cyan u-progress-bar--xs" role="progressbar" style="width: 68%;" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">11% more than last week</small>
                  </div>
                  <!-- End Web Design -->

                  <!-- Unify Project -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Dribbble Shots <span class="float-right g-ml-10">62%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-pink u-progress-bar--xs" role="progressbar" style="width: 62%;" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">20% less than last week</small>
                  </div>
                  <!-- End Unify Project -->

                  <!-- Unify Project -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Unify Project <span class="float-right g-ml-10">93%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-primary u-progress-bar--xs" role="progressbar" style="width: 93%;" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">17% more than last week</small>
                  </div>
                  <!-- End Unify Project -->

                  <!-- WordPress Coding -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">WordPress Coding <span class="float-right g-ml-10">74%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-black u-progress-bar--xs" role="progressbar" style="width: 74%;" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">35% more than last week</small>
                  </div>
                  <!-- End WordPress Coding -->

                  <!-- Pixeel Ltd -->
                  <div class="g-mb-20">
                    <h6 class="g-mb-10">Pixeel Ltd <span class="float-right g-ml-10">86%</span></h6>
                    <div class="js-hr-progress-bar progress g-bg-black-opacity-0_1 rounded-0 g-mb-5">
                      <div class="js-hr-progress-bar-indicator progress-bar g-bg-darkpurple u-progress-bar--xs" role="progressbar" style="width: 86%;" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <small class="g-font-size-12">42% more than last week</small>
                  </div>
                  <!-- End Pixeel Ltd -->
                </div>
                <!-- End Panel Body -->
              </div>
              <!-- End Project Progress -->
            </div>
            <!-- End Profile Sidebar -->

            <!-- Profle Content -->
            <div class="col-lg-9">
              <!-- Comments (Option 1) -->
              <div class="card border-0 g-mb-40">
                <!-- Panel Header -->
                <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                  <h3 class="h6 mb-0">
                    <i class="icon-bubbles g-pos-rel g-top-1 g-mr-5"></i> Comments <small>(option 1)</small>
                  </h3>
                  <div class="dropdown g-mb-10 g-mb-0--md">
                    <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="icon-options-vertical g-pos-rel g-top-1"></i>
                    </span>
                    <div class="dropdown-menu dropdown-menu-right rounded-0 g-mt-10">
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-layers g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Projects
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-wallet g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Wallets
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-fire g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Reports
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-settings g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Users Setting
                      </a>

                      <div class="dropdown-divider"></div>

                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-plus g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> View More
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Panel Header -->

                <!-- Panel Body -->
                <div class="card-block g-pa-0">
                  <div class="media g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 g-mt-3 g-mr-20" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                    <div class="media-body">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">James Coolman</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>2 days ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 214
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 35
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 52
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="media g-brd-around g-brd-gray-light-v4 g-pa-20 g-ml-40 g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 g-mt-3 g-mr-20" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                    <div class="media-body">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">Alberta Watson</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>7 hr ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline g-mb-10 g-mb-20--md">
                        <li class="list-inline-item g-mb-10 g-mb-0--md">
                          <img class="g-width-100 g-height-100" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--md">
                          <img class="g-width-100 g-height-100" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--md">
                          <img class="g-width-100 g-height-100" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item u-bg-overlay g-bg-black-opacity-0_5--after">
                          <img class="g-width-100 g-height-100" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                          <a class="u-link-v5 u-bg-overlay__inner g-absolute-centered g-color-white g-color-primary--hover text-center" href="#">
                            <span class="g-font-size-20">10+</span> Photos
                          </a>
                        </li>
                      </ul>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 637
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 08
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 38
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="media g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 g-mt-3 g-mr-20" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                    <div class="media-body">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">David Lee</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>2 days ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 178
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 14
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 12
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <a class="btn btn-block u-btn-darkgray rounded-0 g-py-13" href="#">Load More</a>
                </div>
                <!-- End Panel Body -->
              </div>
              <!-- End Comments (Option 1) -->

              <!-- Comments (Option 2) -->
              <div class="card border-0 g-mb-40">
                <!-- Panel Header -->
                <div class="card-header d-flex align-items-center justify-content-between g-bg-gray-light-v5 border-0 g-mb-15">
                  <h3 class="h6 mb-0">
                    <i class="icon-bubbles g-pos-rel g-top-1 g-mr-5"></i> Comments <small>(option 2)</small>
                  </h3>
                  <div class="dropdown g-mb-10 g-mb-0--md">
                    <span class="d-block g-color-primary--hover g-cursor-pointer g-mr-minus-5 g-pa-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="icon-options-vertical g-pos-rel g-top-1"></i>
                    </span>
                    <div class="dropdown-menu dropdown-menu-right rounded-0 g-mt-10">
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-layers g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Projects
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-wallet g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Wallets
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-fire g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Reports
                      </a>
                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-settings g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> Users Setting
                      </a>

                      <div class="dropdown-divider"></div>

                      <a class="dropdown-item g-px-10" href="#">
                        <i class="icon-plus g-font-size-12 g-color-gray-dark-v5 g-mr-5"></i> View More
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Panel Header -->

                <!-- Panel Body -->
                <div class="card-block g-pa-0">
                  <div class="media g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 rounded-circle g-mt-3 g-mr-20" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                    <div class="media-body g-brd-around g-brd-gray-light-v4 g-pa-20">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">James Coolman</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>2 days ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 214
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 35
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 42
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="media g-ml-40 g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 rounded-circle g-mt-3 g-mr-15" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image Description">
                    <div class="media-body g-brd-around g-brd-gray-light-v4 g-pa-20">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">Alberta Watson</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>7 hr ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline g-mb-10 g-mb-20--md">
                        <li class="list-inline-item g-mb-10 g-mb-0--sm">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item u-bg-overlay g-bg-black-opacity-0_5--after">
                          <img class="g-width-70 g-height-70" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                          <a class="u-link-v5 u-bg-overlay__inner g-absolute-centered g-color-white g-color-primary--hover text-center" href="#">
                            <span class="g-font-size-20">10+</span> Photos
                          </a>
                        </li>
                      </ul>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 637
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 08
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 24
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="media g-mb-20">
                    <img class="d-flex g-width-50 g-height-50 rounded-circle g-mt-3 g-mr-15" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image Description">
                    <div class="media-body g-brd-around g-brd-gray-light-v4 g-pa-20">
                      <div class="d-sm-flex justify-content-sm-between align-items-sm-center g-mb-15 g-mb-10--sm">
                        <h5 class="h4 g-font-weight-300 g-mr-10 g-mb-5 g-mb-0--sm">David Lee</h5>
                        <div class="text-nowrap g-font-size-12">
                          <span>2 days ago</span> / <a href="#">Reply</a>
                        </div>
                      </div>

                      <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.</p>

                      <ul class="list-inline my-0">
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-like g-pos-rel g-top-1 g-mr-3"></i> 178
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-dislike g-pos-rel g-top-1 g-mr-3"></i> 14
                          </a>
                        </li>
                        <li class="list-inline-item g-mr-20">
                          <a class="g-color-gray-dark-v5 g-text-underline--none--hover" href="#">
                            <i class="icon-share g-pos-rel g-top-1 g-mr-3"></i> 65
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <a class="btn btn-block u-btn-primary rounded-0 g-py-13" href="#">Load More</a>
                </div>
                <!-- End Panel Body -->
              </div>
              <!-- End Comments (Option 2) -->
            </div>
            <!-- End Profle Content -->
          </div>
        </div>
      </section>

      {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
    </main>

    {% include "html/assets/include/nunjucks/partials/blocks/helpers/outer-spaces-helper.njk" %}

    {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/appear.js"></script>
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    <script src="{{ root }}assets/vendor/malihu-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
    <script src="{{ root }}assets/js/components/hs.header.js"></script>
    <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.js"></script>
    <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>
    <script src="{{ root }}assets/js/components/hs.scrollbar.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

    <!-- JS Customization -->
    <script src="{{ root }}assets/js/custom.js"></script>

    <!-- JS Plugins Init. -->
    <script>
      $(document).on('ready', function () {
        // initialization of go to
        $.HSCore.components.HSGoTo.init('.js-go-to');

        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of HSScrollBar component
        $.HSCore.components.HSScrollBar.init( $('.js-scrollbar') );
      });

      $(window).on('load', function () {
        // initialization of header
        $.HSCore.components.HSHeader.init($('#js-header'));
        $.HSCore.helpers.HSHamburgers.init('.hamburger');

        // initialization of HSMegaMenu component
        $('.js-mega-menu').HSMegaMenu({
          event: 'hover',
          pageContainer: $('.container'),
          breakpoint: 991
        });

        // initialization of horizontal progress bars
        setTimeout(function () { // important in this case
          var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
            direction: 'horizontal',
            indicatorSelector: '.js-hr-progress-bar-indicator'
          });
        }, 1);
      });

      $(window).on('resize', function () {
        setTimeout(function () {
          $.HSCore.components.HSTabs.init('[role="tablist"]');
        }, 200);
      });
    </script>

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
