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

### THEME CONFIG ###
theme:
  post:
    image:
      class: "img-fluid rounded-3 w-100 my-5"

### WEB MANAGER CONFIG ###
web_manager:
  socialSharing:
    enabled: true

### PAGE CONFIG ###
author_section:
  author_position: "Marketing Manager"

related_posts:
  headline: "Related"
  headline_accent: "posts"
  limit: 3

newsletter:
  superheadline:
    icon: "envelope"
    text: "Newsletter"
  headline: "Stay in the"
  headline_accent: "loop"
  subheadline: "Join our newsletter and get resources, curated content, and inspiration delivered straight to your inbox."
  button:
    text: "Submit"
  form:
    placeholder: "jonsnow@gmail.com"
---

<!-- Article Header & Content -->
<article class="pt-10">
  <div class="container">
    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <header class="text-center mb-5" data-lazy="@class animation-slide-up">
          <h1 class="h1 fw-bold mb-0">{{ page.post.title }}</h1>
        </header>

        <!-- Author & Meta -->
        <div class="d-flex justify-content-between align-items-center mb-5" data-lazy="@class animation-slide-up">
          <div class="d-flex align-items-center">
            <a href="{%- uj_member page.post.author, "url" -%}" class="text-decoration-none me-2">
              <div class="avatar avatar-md">
                {%- uj_member page.post.author, "image-tag", class="rounded-circle" -%}
              </div>
            </a>
            <div>
              <a href="{%- uj_member page.post.author, "url" -%}" class="text-decoration-none text-body fw-semibold d-block">
                {%- uj_member page.post.author, "name" -%}
              </a>
              {% iftruthy page.resolved.author_section.author_position %}
                <span class="text-muted small">{{ page.resolved.author_section.author_position }}</span>
              {% endiftruthy %}
            </div>
          </div>
          <div class="d-flex flex-column align-items-end text-end gap-1">
            <time datetime="{{ page.date | date_to_xmlschema }}" class="text-muted small d-block">
              {{ page.date | date: "%b %d, %Y" }}
            </time>
            <div class="badge bg-primary">{% uj_readtime content %} min read</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-5" data-lazy="@class animation-slide-up">
        {%- uj_post page.post.id, "image-tag", class="img-fluid rounded-3 w-100 blog-post-image" -%}
      </div>
    </div>

    <div class="row justify-content-center mb-3">
      <div class="blog-post-content col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {{ content | uj_content_format }}
      </div>
    </div>

    <!-- Ad -->
    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {% include /modules/adunits/adsense.html type="in-article" %}
      </div>
    </div>
  </div>
</article>

<!-- Author & Comments -->
<section>
  <div class="container">
    <hr class="my-5">

    <!-- Tags -->
    <div class="row justify-content-center mb-4">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12 text-center" data-lazy="@class animation-slide-up">
        {% 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/tags/{{ tag | slugify }}" class="btn btn-adaptive btn-sm px-2 py-1 mb-2" style="font-size: 0.75rem;">{% uj_icon "tag", "me-1" %}{{ tag }}</a>
        {% endfor %}
      </div>
    </div>

    <!-- Author -->
    <div class="row justify-content-center mb-5">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center">
          <div class="d-flex mb-3 mb-sm-0">
            <div class="flex-shrink-0">
              <a href="{% uj_member page.post.author, "url" %}">
                <div class="avatar avatar-lg">
                  {% uj_member page.post.author, "image-tag", class="rounded-circle" %}
                </div>
              </a>
            </div>
            <div class="ms-3">
              <a href="{% uj_member page.post.author, "url" %}" class="text-body text-decoration-none">
                <div class="fw-semibold">
                  {%- uj_member page.post.author, "name" -%}
                </div>
              </a>
              {% iftruthy page.resolved.author_section.author_position %}
                <div class="text-muted small">
                  {{ page.resolved.author_section.author_position }}
                </div>
              {% endiftruthy %}
            </div>
          </div>
          <div data-social-share
                data-platforms=""
                data-title=""
                data-description=""
                data-url=""
                data-size="sm"
                data-labels="false">
          </div>
        </div>
      </div>
    </div>

    <!-- Comments -->
    <div class="row justify-content-center mb-5">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {%- include modules/engagement/giscus.html -%}
      </div>
    </div>
  </div>
</section>

<!-- Related Posts -->
<section class="pt-0">
  <div class="container">
    <div class="row justify-content-center mb-3">
      <div class="col-12">
        <div class="mb-3 mb-sm-5 text-center" data-lazy="@class animation-slide-up">
          {% iftruthy page.resolved.related_posts.superheadline %}
            <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
              {{ page.resolved.related_posts.superheadline }}
            </span>
          {% endiftruthy %}
          {% iftruthy page.resolved.related_posts.headline %}
            <h3 class="h2 mb-0">
              {{ page.resolved.related_posts.headline }}{% iftruthy page.resolved.related_posts.headline_accent %} <span class="text-accent">{{ page.resolved.related_posts.headline_accent }}</span>{% endiftruthy %}
            </h3>
          {% endiftruthy %}
        </div>
        <div class="row g-4">
          <!-- Loop through posts based on configured limit -->
          {% assign count = 0 %}
          {% assign limit = page.resolved.related_posts.limit | default: 3 %}
          {% for post in site.posts %}
            {% if count < limit %}
              {% if post.id != page.post.id %}
                {% assign count = count | plus: 1 %}
                <div class="col-xl-4 col-lg-6 col-md-12" data-lazy="@class animation-slide-up">
                  <article class="card h-100 shadow-sm border-0 bg-body-tertiary">
                    <!-- Image -->
                    <div class="p-3 pb-0">
                      <a href="{{ site.url }}{{ post.url }}" class="text-decoration-none">
                        {%- uj_post post.post.id, "image-tag", class="img-fluid object-fit-cover blog-post-card-image rounded-3" -%}
                      </a>
                    </div>

                    <!-- Card Body -->
                    <div class="card-body d-flex flex-column">
                      <!-- Category Badge -->
                      {% if post.post.categories[0] %}
                        <div class="mb-2">
                          <a href="{{ site.url }}/blog/categories/{{ post.post.categories[0] | slugify }}" class="badge bg-primary-soft text-primary text-decoration-none">
                            {{ post.post.categories[0] | uj_title_case }}
                          </a>
                        </div>
                      {% endif %}

                      <!-- Title -->
                      <h3 class="h5 card-title mb-0">
                        <a href="{{ site.url }}{{ post.url }}" class="text-decoration-none text-body">
                          {{ post.post.title }}
                        </a>
                      </h3>
                    </div>

                    <!-- Card Footer -->
                    <div class="card-footer bg-transparent border-0 pt-0 pb-3">
                      <div class="d-flex align-items-center justify-content-between small">
                        <!-- Left side: Author and Date -->
                        <div class="d-flex align-items-center">
                          <!-- Author Avatar -->
                          <a href="{%- uj_member post.post.author, "url" -%}" class="text-decoration-none me-2 position-relative z-1">
                            <div class="avatar avatar-md">
                              {%- uj_member post.post.author, "image-tag", class="rounded-circle" -%}
                            </div>
                          </a>

                          <!-- Author Name and Date stacked -->
                          <div>
                            <a href="{%- uj_member post.post.author, "url" -%}" class="text-decoration-none text-body fw-semibold position-relative z-1 d-block">
                              {%- uj_member post.post.author, "name" -%}
                            </a>
                            <time datetime="{{ post.date | date_to_xmlschema }}" class="text-muted">
                              {{ post.date | date: "%b %d, %Y" }}
                            </time>
                          </div>
                        </div>

                        <!-- Right side: Read time -->
                        <div class="text-muted">
                          {% uj_readtime post.content %} min read
                        </div>
                      </div>
                    </div>
                  </article>
                </div>
              {% endif %}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    </div>

  </div>
</section>

<!-- Newsletter -->
<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div class="card border-0 bg-gradient bg-primary text-white rounded-4 p-4 p-md-5 text-center position-relative overflow-hidden" data-lazy="@class animation-slide-up">
          <!-- Decorative icon - top right -->
          <div class="position-absolute top-0 end-0 opacity-25" style="font-size:10rem;transform:rotate(15deg)translate(30%,-30%)">
            {% uj_icon "comments", "text-white" %}
          </div>

          <!-- Decorative icon - bottom left -->
          <div class="position-absolute bottom-0 start-0 opacity-25" style="font-size:8rem;transform:rotate(-20deg)translate(-30%,30%)">
            {% uj_icon "rss", "text-white" %}
          </div>

          <div class="position-relative">
            {% iftruthy page.resolved.newsletter.superheadline.text %}
              <span class="badge bg-white bg-opacity-25 text-light p-2 mb-3 fw-semibold small">
                {% iftruthy page.resolved.newsletter.superheadline.icon %}
                  {% uj_icon page.resolved.newsletter.superheadline.icon, "me-1" %}
                {% endiftruthy %}
                {{ page.resolved.newsletter.superheadline.text }}
              </span>
            {% endiftruthy %}

            {% iftruthy page.resolved.newsletter.headline %}
              <h2 class="h3 fw-bold mb-3">
                {{ page.resolved.newsletter.headline }}
                {% iftruthy page.resolved.newsletter.headline_accent %}
                  {{ page.resolved.newsletter.headline_accent }}
                {% endiftruthy %}
              </h2>
            {% endiftruthy %}

            {% iftruthy page.resolved.newsletter.subheadline %}
              <p class="lead mb-4">{{ page.resolved.newsletter.subheadline }}</p>
            {% endiftruthy %}

            <form class="row g-3 justify-content-center needs-validation" action="{{ site.url }}/email-subscription">
              <div class="col-md-7">
                <label for="newsletter-email" class="visually-hidden">Email address</label>
                <input type="email" name="email" id="newsletter-email" class="form-control form-control-lg" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
              </div>
              <div class="col-md-auto">
                <button type="submit" class="btn btn-light btn-lg px-4">{% iftruthy page.resolved.newsletter.button.text %}{{ page.resolved.newsletter.button.text }}{% endiftruthy %}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>