<!-- Page Timeline POST #4 -->
<div class="profile-post">
  <!-- Timeline -->
  <div class="time is-hidden-mobile">
    <div class="img-container">
      <img
        src="https://via.placeholder.com/300x300"
        data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
        alt=""
      />
    </div>
  </div>
  <!-- Post -->
  <div class="card is-post">
    <!-- Main wrap -->
    <div class="content-wrap">
      <!-- Header -->
      <div class="card-heading">
        <div class="user-block">
          <div class="image">
            <img
              src="https://via.placeholder.com/300x300"
              data-demo-src="assets/img/vector/icons/logos/fastpizza.svg"
              data-page-popover="0"
              alt=""
            />
          </div>
          <div class="user-info">
            <a href="#">Fast Pizza</a>
            <span class="time">September 26 2018, 11:18am</span>
          </div>
        </div>
        <!-- Right side dropdown -->
        {{> feed-post-dropdown}}
      </div>
      <!-- Header -->

      <!-- Post body -->
      <div class="card-body">
        <!-- Post body text -->
        <div class="post-text">
          <p>
            We are very proud to present our latest services, meals and customer
            experience improvements. Amongst those, we opened a new Health &
            Sports center for our customers. We also released an apple watch app
            to track your deliveries. Awesome, isn't it ?
          </p>
          <p></p>
        </div>
        <!-- Featured image -->
        <div class="post-image">
          <!-- CSS masonry wrap -->
          <div class="masonry-grid">
            <!-- Left column -->
            <div class="masonry-column-left">
              <a
                data-fancybox="profile-post4"
                data-lightbox-type="comments"
                data-thumb="assets/img/demo/pages/posts/6.jpeg"
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/pages/posts/6.jpeg"
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/pages/posts/6.jpeg"
                  alt=""
                />
              </a>
              <a
                data-fancybox="profile-post4"
                data-lightbox-type="comments"
                data-thumb="assets/img/demo/pages/posts/5.jpg"
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/pages/posts/5.jpg"
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/pages/posts/5.jpg"
                  alt=""
                />
              </a>
            </div>
            <!-- Right column -->
            <div class="masonry-column-right">
              <a
                data-fancybox="profile-post4"
                data-lightbox-type="comments"
                data-thumb="assets/img/demo/pages/posts/4.jpg"
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/pages/posts/4.jpg"
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/pages/posts/4.jpg"
                  alt=""
                />
              </a>
              <a
                data-fancybox="profile-post4"
                data-lightbox-type="comments"
                data-thumb="assets/img/demo/pages/posts/7.jpg"
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/pages/posts/7.jpg"
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/pages/posts/7.jpg"
                  alt=""
                />
              </a>
              <a
                data-fancybox="profile-post4"
                data-lightbox-type="comments"
                data-thumb="assets/img/demo/pages/posts/8.jpg"
                href="https://via.placeholder.com/1600x900"
                data-demo-href="assets/img/demo/pages/posts/8.jpg"
              >
                <img
                  src="https://via.placeholder.com/1600x900"
                  data-demo-src="assets/img/demo/pages/posts/8.jpg"
                  alt=""
                />
              </a>
            </div>
            <!-- Post actions -->
            {{> feed-post-actions}}
          </div>
        </div>
      </div>
      <!-- /Post body -->

      <!-- Post footer -->
      <div class="card-footer">
        <!-- Followers -->
        <div class="likers-group">
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/rolf.jpg"
            data-user-popover="13"
            alt=""
          />
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/mike.jpg"
            data-user-popover="12"
            alt=""
          />
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/daniel.jpg"
            data-user-popover="3"
            alt=""
          />
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/elise.jpg"
            data-user-popover="6"
            alt=""
          />
          <img
            src="https://via.placeholder.com/300x300"
            data-demo-src="assets/img/avatars/daniel.jpg"
            data-user-popover="3"
            alt=""
          />
        </div>
        <div class="likers-text">
          <p>
            <a href="#">Mike</a>,
            <a href="#">Rolf</a>
          </p>
          <p>and 423 more liked this</p>
        </div>
        <!-- Post statistics -->
        <div class="social-count">
          <div class="likes-count">
            <i data-feather="heart"></i>
            <span>33</span>
          </div>
          <div class="shares-count">
            <i data-feather="link-2"></i>
            <span>3</span>
          </div>
          <div class="comments-count">
            <i data-feather="message-circle"></i>
            <span>8</span>
          </div>
        </div>
      </div>
      <!-- /Post footer -->
    </div>
    <!-- Main wrap -->

    <!-- Comments -->
    <div class="comments-wrap is-hidden">
      <!-- Header -->
      <div class="comments-heading">
        <h4>Comments <small>(8)</small></h4>
        <div class="close-comments">
          <i data-feather="x"></i>
        </div>
      </div>
      <!-- /Header -->

      <!-- Comments body -->
      <div class="comments-body has-slimscroll">
        <!-- Comment -->
        <div class="media is-comment">
          <!-- User image -->
          <div class="media-left">
            <div class="image">
              <img
                src="https://via.placeholder.com/300x300"
                data-demo-src="assets/img/avatars/stella.jpg"
                data-user-popover="2"
                alt=""
              />
            </div>
          </div>
          <!-- Content -->
          <div class="media-content">
            <a href="#">Stella Bergmann</a>
            <span class="time">17 days ago</span>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempo incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris
              consequat.
            </p>
            <!-- Comment actions -->
            <div class="controls">
              <div class="like-count">
                <i data-feather="thumbs-up"></i>
                <span>0</span>
              </div>
              <div class="reply">
                <a href="#">Reply</a>
              </div>
            </div>

            <!-- Nested Comment -->
            <div class="media is-comment">
              <!-- User image -->
              <div class="media-left">
                <div class="image">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/jenna.png"
                    data-user-popover="0"
                    alt=""
                  />
                </div>
              </div>
              <!-- Content -->
              <div class="media-content">
                <a href="#">Jenna Davis</a>
                <span class="time">17 days ago</span>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                  do eiusmod tempo incididunt ut labore et dolore magna aliqua.
                </p>
                <!-- Comment actions -->
                <div class="controls">
                  <div class="like-count">
                    <i data-feather="thumbs-up"></i>
                    <span>4</span>
                  </div>
                  <div class="reply">
                    <a href="#">Reply</a>
                  </div>
                </div>
              </div>
              <!-- Right side dropdown -->
              <div class="media-right">{{> comment-dropdown}}</div>
            </div>
            <!-- /Nested Comment -->

            <!-- Nested Comment -->
            <div class="media is-comment">
              <!-- User image -->
              <div class="media-left">
                <div class="image">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/david.jpg"
                    data-user-popover="4"
                    alt=""
                  />
                </div>
              </div>
              <!-- Content -->
              <div class="media-content">
                <a href="#">David Kim</a>
                <span class="time">17 days ago</span>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                  do eiusmod tempo incididunt ut labore et dolore magna aliqua.
                </p>
                <!-- Comment actions -->
                <div class="controls">
                  <div class="like-count">
                    <i data-feather="thumbs-up"></i>
                    <span>1</span>
                  </div>
                  <div class="reply">
                    <a href="#">Reply</a>
                  </div>
                </div>
              </div>
              <!-- Right side dropdown -->
              <div class="media-right">{{> comment-dropdown}}</div>
            </div>
            <!-- /Nested Comment -->

            <!-- Nested Comment -->
            <div class="media is-comment">
              <!-- User image -->
              <div class="media-left">
                <div class="image">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/milly.jpg"
                    data-user-popover="7"
                    alt=""
                  />
                </div>
              </div>
              <!-- Content -->
              <div class="media-content">
                <a href="#">Milly Augustine</a>
                <span class="time">17 days ago</span>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                  do eiusmod tempo incididunt ut labore et dolore magna aliqua.
                </p>
                <!-- Comment actions -->
                <div class="controls">
                  <div class="like-count">
                    <i data-feather="thumbs-up"></i>
                    <span>1</span>
                  </div>
                  <div class="reply">
                    <a href="#">Reply</a>
                  </div>
                </div>
              </div>
              <!-- Right side dropdown -->
              <div class="media-right">{{> comment-dropdown}}</div>
            </div>
            <!-- /Nested Comment -->
          </div>
          <!-- Right side dropdown -->
          <div class="media-right">{{> comment-dropdown}}</div>
        </div>
        <!-- /Comment -->

        <!-- Comment -->
        <div class="media is-comment">
          <!-- User image -->
          <div class="media-left">
            <div class="image">
              <img
                src="https://via.placeholder.com/300x300"
                data-demo-src="assets/img/avatars/daniel.jpg"
                data-user-popover="3"
                alt=""
              />
            </div>
          </div>
          <!-- Content -->
          <div class="media-content">
            <a href="#">Daniel Wellington</a>
            <span class="time">17 days ago</span>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempo.
            </p>
            <!-- Comment actions -->
            <div class="controls">
              <div class="like-count">
                <i data-feather="thumbs-up"></i>
                <span>6</span>
              </div>
              <div class="reply">
                <a href="#">Reply</a>
              </div>
            </div>
          </div>
          <!-- Right side dropdown -->
          <div class="media-right">{{> comment-dropdown}}</div>
        </div>
        <!-- /Comment -->

        <!-- Comment -->
        <div class="media is-comment">
          <!-- User image -->
          <div class="media-left">
            <div class="image">
              <img
                src="https://via.placeholder.com/300x300"
                data-demo-src="assets/img/avatars/david.jpg"
                data-user-popover="4"
                alt=""
              />
            </div>
          </div>
          <!-- Content -->
          <div class="media-content">
            <a href="#">David Kim</a>
            <span class="time">18 days ago</span>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempo incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="controls">
              <div class="like-count">
                <i data-feather="thumbs-up"></i>
                <span>5</span>
              </div>
              <div class="reply">
                <a href="#">Reply</a>
              </div>
            </div>

            <!-- Nested Comment -->
            <div class="media is-comment">
              <!-- User image -->
              <div class="media-left">
                <div class="image">
                  <img
                    src="https://via.placeholder.com/300x300"
                    data-demo-src="assets/img/avatars/stella.jpg"
                    data-user-popover="2"
                    alt=""
                  />
                </div>
              </div>
              <!-- Content -->
              <div class="media-content">
                <a href="#">Stella Bergmann</a>
                <span class="time">18 days ago</span>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
                  do eiusmod tempo incididunt ut labore et dolore magna aliqua.
                </p>
                <!-- Comment actions -->
                <div class="controls">
                  <div class="like-count">
                    <i data-feather="thumbs-up"></i>
                    <span>7</span>
                  </div>
                  <div class="reply">
                    <a href="#">Reply</a>
                  </div>
                </div>
              </div>
              <!-- Right side dropdown -->
              <div class="media-right">{{> comment-dropdown}}</div>
            </div>
            <!-- /Nested Comment -->
          </div>
          <!-- Right side dropdown -->
          <div class="media-right">{{> comment-dropdown}}</div>
        </div>
        <!-- /Comment -->

        <!-- Comment -->
        <div class="media is-comment">
          <!-- User image -->
          <div class="media-left">
            <div class="image">
              <img
                src="https://via.placeholder.com/300x300"
                data-demo-src="assets/img/avatars/mike.jpg"
                data-user-popover="12"
                alt=""
              />
            </div>
          </div>
          <!-- Content -->
          <div class="media-content">
            <a href="#">Mike Lasalle</a>
            <span class="time">20 days ago</span>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
              eiusmod tempo incididunt.
            </p>
            <div class="controls">
              <div class="like-count">
                <i data-feather="thumbs-up"></i>
                <span>5</span>
              </div>
              <div class="reply">
                <a href="#">Reply</a>
              </div>
            </div>
          </div>
          <!-- Right side dropdown -->
          <div class="media-right">{{> comment-dropdown}}</div>
        </div>
        <!-- /Comment -->

        <!-- Load More comments -->
        <div class="load-more has-text-centered">
          <button class="load-more-button">
            <i data-feather="more-horizontal"></i>
          </button>
        </div>
      </div>
      <!-- /Comments body -->

      <!-- Comments footer -->
      <div class="card-footer">
        <div class="media post-comment has-emojis">
          <!-- Textarea -->
          <div class="media-content">
            <div class="field">
              <p class="control">
                <textarea
                  class="textarea comment-textarea"
                  rows="5"
                  placeholder="Write a comment..."
                ></textarea>
              </p>
            </div>
            <!-- Additional actions -->
            <div class="actions">
              <div class="image is-32x32">
                <img
                  class="is-rounded"
                  src="https://via.placeholder.com/300x300"
                  data-demo-src="assets/img/avatars/jenna.png"
                  data-user-popover="0"
                  alt=""
                />
              </div>
              <div class="toolbar">
                <div class="action is-auto">
                  <i data-feather="at-sign"></i>
                </div>
                <div class="action is-emoji">
                  <i data-feather="smile"></i>
                </div>
                <div class="action is-upload">
                  <i data-feather="camera"></i>
                  <input type="file" />
                </div>
                <a class="button is-solid primary-button raised"
                  >Post Comment</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Comments footer -->
    </div>
    <!-- /Comments -->
  </div>
  <!-- /Post -->
</div>
<!-- /Page timeline POST #4 -->
