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

{% block title %}{% trans "Notícias" %}{% endblock title %}

{% block extrastyle %}
<link rel="stylesheet" href="{% static 'css/news.css' %}">
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

  .news-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    padding: 2rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: visible;
    width: 100%;
  }

  .news-header {
    text-align: center;
    margin-bottom: 3rem;
    animation: fadeInDown 0.8s ease-out;
  }

  .news-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #6f42c1, #e83e8c, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(111, 66, 193, 0.5);
    margin-bottom: 1rem;
  }

  .news-subtitle {
    color: #a8a8a8;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .news-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 0 25px rgba(111, 66, 193, 0.3), 0 0 40px rgba(13, 202, 240, 0.2);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    animation: slideInUp 0.6s ease-out;
  }

  .news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #6f42c1, #e83e8c, #0dcaf0);
    border-radius: 20px;
    padding: 2px;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
  }

  .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(111, 66, 193, 0.4), 0 0 50px rgba(13, 202, 240, 0.3);
  }

  .news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    transition: all 0.3s ease;
  }

  .news-card:hover .news-image {
    transform: scale(1.05);
  }

  .news-card-body {
    padding: 1.5rem;
    position: relative;
  }

  .news-card-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    line-height: 1.4;
    transition: color 0.3s ease;
  }

  .news-card:hover .news-card-title {
    color: #6f42c1;
  }

  .news-card-summary {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: #888;
  }

  .news-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .news-author i {
    color: #6f42c1;
  }

  .news-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .news-date i {
    color: #e83e8c;
  }

  .news-read-more {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .news-read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  .news-read-more:hover::before {
    left: 100%;
  }

  .news-read-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(111, 66, 193, 0.4);
    color: white;
    text-decoration: none;
  }

  .news-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #6c757d;
    font-size: 1.1rem;
  }

  .news-empty-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: #dee2e6;
    animation: pulse 2s infinite;
  }

  .news-empty h3 {
    color: #6f42c1;
    margin-bottom: 1rem;
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      transform: translateY(-30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (max-width: 768px) {
    .news-title {
      font-size: 2rem;
    }
    
    .news-card-body {
      padding: 1.25rem;
    }
    
    .news-card-title {
      font-size: 1.1rem;
    }
    
    .news-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }
</style>
{% endblock extrastyle %}

{% block breadcrumbs %}
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
<li class="breadcrumb-item active" aria-current="page">{% trans "Notícias" %}</li>
{% endblock breadcrumbs %}

{% block page_header %}
<h5 class="display-5">{% trans "Notícias" %}</h5>
{% endblock page_header %}

{% block content %}
<div class="news-container">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-12">
        <!-- Header das Notícias -->
        <div class="news-header">
          <h1 class="news-title">
            <i class="fas fa-newspaper me-3"></i>
            {% trans "Notícias" %}
          </h1>
          <p class="news-subtitle">
            {% trans "Fique por dentro das últimas novidades e atualizações exclusivas da nossa comunidade." %}
          </p>
        </div>

        <!-- Grid de Notícias -->
        {% if user.is_authenticated %}
          {% if private_news_list %}
            <div class="row">
              {% for item in private_news_list %}
                <div class="col-lg-4 col-md-6 mb-4">
                  <div class="news-card">
                    {% if item.news.image %}
                      <img class="news-image" src="{{ item.news.image.url }}" alt="{{ item.translation.title }}">
                    {% else %}
                      <div class="news-image" style="background: linear-gradient(135deg, #6f42c1, #e83e8c); display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-newspaper" style="font-size: 3rem; color: white;"></i>
                      </div>
                    {% endif %}
                    
                    <div class="news-card-body">
                      <h3 class="news-card-title">{{ item.translation.title }}</h3>
                      <p class="news-card-summary">{{ item.translation.summary }}</p>
                      
                      <div class="news-meta">
                        <div class="news-author">
                          <i class="fas fa-user"></i>
                          <span>{{ item.news.author.username }}</span>
                        </div>
                        <div class="news-date">
                          <i class="fas fa-calendar"></i>
                          <span>{{ item.news.pub_date|date:"d/m/Y" }}</span>
                        </div>
                      </div>
                      
                      <a href="{% url 'news:detail' item.news.slug %}" class="news-read-more">
                        <i class="fas fa-arrow-right"></i>
                        {% trans "Leia mais" %}
                      </a>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="news-empty">
              <i class="fas fa-newspaper news-empty-icon"></i>
              <h3>{% trans "Nenhuma notícia disponível" %}</h3>
              <p>{% trans "Não há notícias privadas disponíveis no momento. Volte em breve para novidades!" %}</p>
            </div>
          {% endif %}
        {% else %}
          <div class="news-empty">
            <i class="fas fa-lock news-empty-icon"></i>
            <h3>{% trans "Acesso Restrito" %}</h3>
            <p>{% trans "Faça login para visualizar as notícias exclusivas da comunidade." %}</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Adiciona efeitos de interação aos cards de notícias
  const newsCards = document.querySelectorAll('.news-card');
  
  newsCards.forEach((card, index) => {
    // Efeito de entrada para cada card
    card.style.opacity = '0';
    card.style.transform = 'translateY(30px)';
    
    setTimeout(() => {
      card.style.transition = 'all 0.6s ease';
      card.style.opacity = '1';
      card.style.transform = 'translateY(0)';
    }, 100 + (index * 150));
    
    // Efeito de hover aprimorado
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-8px) scale(1.02)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0) scale(1)';
    });
  });
  
  // Efeito de parallax removido - estava causando movimento indesejado e quebrando o footer
  
  // Animação dos botões "Leia mais"
  const readMoreButtons = document.querySelectorAll('.news-read-more');
  
  readMoreButtons.forEach(button => {
    button.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-3px) scale(1.05)';
    });
    
    button.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0) scale(1)';
    });
  });
  
  // Animação do ícone principal removida - estava causando efeito de balanço indesejado
});
</script>
{% endblock content %}