{% extends "framework_modern.html" %}

{% block content %}
  <div class="mx-auto max-w-4xl px-4 py-8">
    {# Header / Title row #}
    <div class="mb-6 flex items-center justify-between">
      <h1 class="text-2xl font-bold">{{ news_entry.title }}</h1>
    </div>

    {# Meta info card #}
    <div class="card bg-base-100 shadow mb-6">
      <div class="card-body">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <div>
            <span class="text-sm font-semibold text-base-content/60">Published</span>
            <p class="mt-1">{{ news_entry.publication_date|date:"N j, Y, P" }}</p>
          </div>
          <div>
            <span class="text-sm font-semibold text-base-content/60">Author</span>
            <p class="mt-1">
              {% if news_entry.author %}
                {{ news_entry.author.get_full_name|default:news_entry.author.username }}
              {% else %}
                <span class="text-base-content/40 italic">Unknown</span>
              {% endif %}
            </p>
          </div>
        </div>
      </div>
    </div>

    {# Content card #}
    <div class="card bg-base-100 shadow">
      <div class="card-body prose max-w-none">
        {{ news_entry.content|safe }}
      </div>
    </div>

    {# Back link #}
    <div class="mt-6">
      <a href="javascript:history.back()" class="btn btn-ghost btn-sm">
        ← Back
      </a>
    </div>
  </div>
{% endblock content %}