{% extends "base.html" %}
{% load static %}

{% block content %}
<style>
    body {
        background-color: #f8f9fa;
    }
    .article-container {
        max-width: 800px;
        margin: 40px auto;
        padding: 40px;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .article-header h1 {
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .article-header .text-muted {
        margin-bottom: 2rem;
    }
    .article-content {
        line-height: 1.8;
        font-size: 1.1rem;
    }
    .article-content h2, .article-content h3 {
        font-weight: 600;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="{% url 'core:student_dashboard' %}">Student Dashboard</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'core:student_dashboard' %}">Back to Dashboard</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="{% url 'core:logout' %}">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="article-container">
    <header class="article-header text-center">
        <h1>{{ article.title }}</h1>
        <p class="text-muted">Published on {{ article.created_at|date:"F d, Y" }}</p>
    </header>
    <div class="article-content">
        {{ article.content|safe }}
    </div>
</div>
{% endblock %}
