{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Detalhes da Notícia{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/news_detail.css' %}">
{% endblock extrastyle %}

{% block content %}
<style>
    .ck-content {
      font-size: 1.1rem;
    }
  
    .ck-content h1, .ck-content h2, .ck-content h3 {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
      font-weight: bold;
    }
  
    .ck-content p {
      margin-bottom: 1rem;
    }
  
    .ck-content ul,
    .ck-content ol {
      margin-left: 2rem;
      margin-bottom: 1rem;
    }
  
    .ck-content blockquote {
      padding-left: 1rem;
      border-left: 4px solid var(--gold);
      font-style: italic;
      color: #666;
    }
  
    .ck-content img {
      max-width: 100%;
      height: auto;
      margin: 1rem 0;
      border-radius: 8px;
    }
  
    .ck-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 1rem 0;
    }
  
    .ck-content th, .ck-content td {
      border: 1px solid #ccc;
      padding: 0.5rem;
      text-align: left;
    }
  </style>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <!-- Título da notícia -->
            <h1 class="news-title">{{ news.title }}</h1>

            <!-- Imagem da notícia -->
            {% if news.image %}
                <img class="news-image" src="{{ news.image.url }}" alt="{{ news.title }}">
            {% endif %}

            <!-- Conteúdo -->
            <div class="mb-4 ck-content">
                {{ news.content|safe }}
            </div>

            <!-- Metadados -->
            <div class="news-meta">
                <small>Autor: {{ news.author.username }} | Data de Publicação: {{ news.pub_date }}</small>
            </div>

            <!-- Botão voltar -->
            <div class="news-navigation">
                <a href="{% url 'news:index' %}" class="btn btn-primary mt-4">Voltar para as notícias</a>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<!-- JS extra, se necessário -->
{% endblock extra_js %}