---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base
---


<section class="py-7 py-lg-8">
  <div class="container">
    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div class="text-center mb-4">
          <a href="#" class="fs-5 fw-semibold d-block mb-4 text-primary">{{ page.post.categories[0] | uj_title_case }}</a>
          <h1 class="display-3 fw-bold mb-4">{{ page.post.title }}</h1>
          <div class="">
            {{ page.date | date: "%b %d, %Y" }}
          </div>
          <div class="badge bg-primary">{%- uj_readtime -%} min read</div>
        </div>

        <!-- Media -->
        <div class="d-flex justify-content-between align-items-center mb-5">
          <div class="d-flex align-items-center">
            <a href="{%- uj_member page.post.author, 'url' -%}">
              <!-- rounded-circle avatar-md -->
              {%- uj_member page.post.author, 'image' -%}
            </a>
            <div class="ms-2 lh-1">
              <h5 class="mb-1">
                <a class="text-dark" href="{%- uj_member page.post.author, 'url' -%}">
                  <!-- avatar-img -->
                  {%- uj_member page.post.author, 'name' -%}
                </a>
              </h5>
              <!-- <span class="d-block small">{{ page.date | date: "%b %d, %Y" }}</span> -->
              <span class="text-primary">Marketing Manager</span>
            </div>
          </div>
          <div>
            <div class="d-flex gap-2">
              {% comment %}
                {%- include /main/modules/engagement/social-share-kit.html -%}
              {% endcomment %}
              @TODO: Implement social share kit
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-xl-10 col-lg-10 col-md-12 col-12 mb-6">
        {% comment %}
          {%- include /main/helpers/blog-image.html id=page.post.id name=page.url class="img-fluid rounded-3 w-100" alt=page.post.title -%}
        {% endcomment %}
        @TODO: implement uj_image
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div>
          {{ content | uj_content_format }}
        </div>
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div class="d-flex justify-content-between">
          <h3 class="h2">Tags</h3>
            {% comment %}
              {%- include /main/modules/engagement/social-share-kit.html -%}
            {% endcomment %}
            @TODO: Implement social share kit
        </div>

        <div class="">
          {% assign tags = '' | split: ',' %}
            {% for tag in page.post.tags %}
              {% assign tag_fixed = tag | uj_title_case %}

              {% unless tags contains tag_fixed %}
                {% assign tags = tags | push: tag_fixed %}
              {% endunless %}
            {% endfor %}
          {% for tag in tags %}
            <a href="{{ site.url }}/blog?tag={{ tag }}" class="btn btn-adaptive btn-xs mb-2">{{ tag }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <h3 class="h2">About the author</h3>
        <div class="d-sm-flex">
          <div class="flex-shrink-0 mb-3 mb-sm-0">
            <a href="">
              <!-- avatar avatar-xl avatar-circle -->
              {% uj_member page.post.author, "image" %}
            </a>
          </div>
          <div class="flex-grow-1 ms-sm-4">
            <div class="d-flex justify-content-between align-items-center mb-1">
              <a href="{% uj_member page.post.author, "url" %}">
                <h4 class="mb-0">
                  {%- uj_member page.post.author, "name" -%}
                </h4>
              </a>
              <a class="btn btn-outline-primary btn-sm" href="{% uj_member page.post.author, "url" %}">
                <i class="bi-person-plus-fill me-1"></i> Follow
              </a>
            </div>
            <p>
              {%- uj_member page.post.author, "content" -%}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <h3 class="h2">Comments</h3>

        {%- include modules/engagement/giscus.html -%}
      </div>
    </div>

    <div class="row justify-content-center mb-3 py-lg-8 py-6">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div class="text-center mb-6">
          <h2 class="display-4 fw-bold">Sign up for our Newsletter</h2>
          <p class="mb-0 lead">
            Join our newsletter and get resources, curated content, and inspiration delivered straight to your inbox.
          </p>
        </div>
        <form class="row px-md-8 mx-md-8 gx-2 needs-validation" action="{{ site.url }}/email-subscription">
          <div class="col">
            <input type="email" name="email" class="form-control" placeholder="jonsnow@gmail.com" required>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <!-- <div class="col-xl-8 col-lg-8 col-md-12 col-12"> -->
      <div class="col-12">
        <div class="w-lg-75_ content-space-2 mx-lg-auto">
          <div class="mb-3 mb-sm-5">
            <h3 class="h2">Related</h3>
          </div>
          <div class="row">
            <!-- Loop through last 4 posts -->
            {% assign count = 0 %}
            {% for post in site.posts %}
              {% if count < 3 %}
                {% if post.id != page.post.id %}
                  {% assign count = count | plus: 1 %}
                  <div class="col-xl-4 col-lg-4 col-md-6 col-12">
                    <div class="card mb-4 shadow-lg card-lift">
                      <a href="{{ post.url }}">
                        {% comment %}
                          {%- include /main/helpers/blog-image.html id=post.post.id name=post.url class="card-img-top" alt=post.post.title -%}
                        {% endcomment %}
                        @TODO: implement uj_image
                      </a>
                      <div class="card-body">
                        <a href="{{ post.url }}" class="fs-5 fw-semibold d-block mb-3 text-primary">{{ post.post.categories[0] | uj_title_case }}</a>
                        <a href="{{ post.url }}">
                          <h3>{{ post.title }}</h3>
                        </a>
                        <p>{{ post.description | strip_html | truncatewords: 20 }}</p>
                        <div class="row align-items-center g-0 mt-4">
                          <div class="col-auto">
                            <a href="{% uj_member post.author, "url" %}">
                              {% comment %}
                                {%- include /main/helpers/blog-author.html author=post.author class="rounded-circle avatar-sm me-2" mode="image" -%}
                              {% endcomment %}
                              @TODO: implement uj_image
                            </a>
                          </div>
                          <div class="col lh-1">
                            <h5 class="mb-1">
                              <a href="{% uj_member post.author, "url" %}">
                                <h5 class="mb-0">
                                  {% uj_member post.author, "name" %}
                                </h5>
                              </a>
                            </h5>
                            <p class="fs-6 mb-0">{{ post.date | date: "%b %d, %Y" }}</p>
                          </div>
                          <div class="col-auto">
                            <p class="fs-6 mb-0">{%- uj_readtime -%} min read</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                {% endif %}
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

{{ content | uj_content_format }}