<!DOCTYPE html>
<html>
<head>
  <title><%= blog.title %></title>
  <meta name="description" content="<%= blog.pg2 %>">
  <meta name="keywords" content="<%= blog.tags %>">
</head>
<body>

  <!-- Background/Main Image -->
  <% if (blog.Imgbg) { %>
    <img src="<%= blog.Imgbg %>" alt="<%= blog.title %> Image" style="width:100%;">
  <% } %>

  <h1><%= blog.title %></h1>

  <!-- Summary -->
  <div><%= blog.pg2 %></div>

  <!-- Main Content -->
  <div><%= blog.pg1 %></div>

  <!-- Optional Headings and Paragraphs -->
  <% if (blog.hed1 && blog.hpg1) { %>
    <h2><%= blog.hed1 %></h2>
    <p><%= blog.hpg1 %></p>
  <% } %>

  <% if (blog.hed2 && blog.hpg2) { %>
    <h2><%= blog.hed2 %></h2>
    <p><%= blog.hpg2 %></p>
  <% } %>

  <!-- Extra Images -->
  <% if (blog.Img1) { %><img src="<%= blog.Img1 %>" alt="Image 1"><% } %>
  <% if (blog.Img2) { %><img src="<%= blog.Img2 %>" alt="Image 2"><% } %>
  <% if (blog.Img3) { %><img src="<%= blog.Img3 %>" alt="Image 3"><% } %>

  <p><small>Tags: <%= blog.tags %></small></p>
  <p><small>Published: <%= blog.created_at.toLocaleDateString() %></small></p>

</body>
</html>
