{% extends "public_base.html" %}
{% load static %}
{% block title %}{{ meta_title }}{% endblock %}

{% block meta %}
  <meta name="description" content="{{ meta_description }}">
  <meta property="og:title" content="{{ meta_title }}">
  <meta property="og:description" content="{{ meta_description }}">
  <meta name="twitter:title" content="{{ meta_title }}">
  <meta name="twitter:description" content="{{ meta_description }}">
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-6 py-16">

  <!-- Back Button -->
  <div class="mb-6">
    <a href="{% url 'blogs_list' %}" 
       class="inline-block px-4 py-2 bg-[#0097b2] text-white rounded-md hover:bg-[#007a94] transition-colors duration-300">
      &larr; Back to Blogs
    </a>
  </div>

  <article class="bg-white shadow-lg rounded-lg overflow-hidden">
    <header class="px-8 pt-8 pb-6 border-b border-gray-200">
      <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight leading-tight mb-2">
        {{ blog.title }}
      </h1>
      <time class="text-gray-500 text-sm uppercase tracking-wide" datetime="{{ blog.published_on }}">
        {{ blog.published_on|date:"F d, Y" }}
      </time>
    </header>

    {% if blog.cover_image %}
      <figure class="w-full h-96 overflow-hidden rounded-b-lg">
        <img src="{{ blog.cover_image.url }}" alt="{{ blog.title }}" class="object-cover w-full h-full transition-transform duration-500 hover:scale-105" />
      </figure>
    {% endif %}

    <section class="prose max-w-none px-8 py-10 text-gray-700">
      {{ blog.content|linebreaks }}
    </section>
  </article>
</div>
{% endblock %}