{% extends "layout.html" %}
{% block body %}



    <!-- Page Header -->
     {% set fname= 'img/' + post.img_file %}
    <header class="masthead" data-bg="{{ url_for('static', filename='img/' ~ post.img_file) }}">

      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-heading">
              {% if post %}
                <h1>{{ post.title }}</h1>
              {% else %}
                  <p>Post not found.</p>
              {% endif %}

              <h2 class="subheading">{{post.tagline}}</h2>
              <span class="meta">Posted by
                <a href="#">Admin</a>
                on {{post.date}}</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Post Content -->
    <article>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            {{post.content}}
            <!-- <p>Placeholder text by -->
              <!-- <a href="http://spaceipsum.com/">Space Ipsum</a>. Photographs by
              <a href="https://www.flickr.com/photos/nasacommons/">NASA on The Commons</a>.</p> -->
          </div>
        </div>
      </div>
    </article>


    <!-- This is to add the background image for the post.html -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const masthead = document.querySelector(".masthead");
    const bgUrl = masthead.getAttribute("data-bg");
    if (bgUrl) {
      masthead.style.backgroundImage = `url('${bgUrl}')`;
    }
  });
</script>


 
{% endblock %}