<%- include('partials/header') %>

<section class="section-padding">
  <div class="container" style="max-width: 900px;">
    <div style="margin-bottom: 2rem;">
      <a href="/berita" class="news-link" style="margin-bottom: 1rem;"><i class="fa-solid fa-arrow-left"></i> <%= t.berita_detail.back_link %></a>
      <span class="section-tag" style="margin-top: 0.5rem;"><%= article.category %></span>
      <h1 style="font-size: 2.25rem; color: var(--primary-navy); margin: 0.75rem 0 1rem 0; line-height: 1.25;"><%= currentLang === 'en' && article.title_en ? article.title_en : article.title %></h1>
      <div style="display: flex; gap: 1.5rem; color: var(--text-muted); font-size: 0.9rem;">
        <span><i class="fa-solid fa-calendar text-gold"></i> <%= article.date %></span>
        <span><i class="fa-solid fa-user text-gold"></i> <%= t.berita_detail.by %> <%= article.author %></span>
      </div>
    </div>

    <div style="border-radius: var(--radius-lg); overflow: hidden; height: 400px; margin-bottom: 2.5rem; box-shadow: var(--shadow-md);">
      <img src="<%= article.image %>" alt="<%= article.title %>" style="width: 100%; height: 100%; object-fit: cover;">
    </div>

    <div class="ql-snow" style="font-size: 1.05rem; line-height: 1.8; color: var(--text-dark); background: var(--bg-card); padding: 2.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm);">
      <p style="font-weight: 600; color: var(--primary-navy); margin-bottom: 1.5rem; font-size: 1.15rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color);"><%= currentLang === 'en' && article.summary_en ? article.summary_en : article.summary %></p>
      
      <div class="ql-editor" style="padding: 0;">
        <%- currentLang === 'en' && article.content_en ? article.content_en : article.content %>
      </div>
    </div>

    <% if (article.gallery && article.gallery.length > 0) { %>
      <div style="margin-top: 3rem;">
        <h3 style="font-size: 1.4rem; color: var(--primary-navy); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
          <i class="fa-solid fa-images" style="color: var(--accent-gold);"></i> Galeri Foto
        </h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem;">
          <% article.gallery.forEach((img, i) => { %>
            <a href="<%= img %>" target="_blank" style="display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s; aspect-ratio: 4/3;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
              <img src="<%= img %>" alt="Galeri foto <%= i + 1 %>" style="width: 100%; height: 100%; object-fit: cover;">
            </a>
          <% }); %>
        </div>
      </div>
    <% } %>


    <% if (related.length > 0) { %>
      <div style="margin-top: 4rem;">
        <h3 style="font-size: 1.5rem; color: var(--primary-navy); margin-bottom: 1.5rem;"><%= t.berita_detail.related_title %></h3>
        <div class="news-grid">
          <% related.forEach(item => { %>
            <div class="news-card">
              <div class="news-img">
                <img src="<%= item.image %>" alt="<%= currentLang === 'en' && item.title_en ? item.title_en : item.title %>">
                <span class="news-category-badge"><%= item.category %></span>
              </div>
              <div class="news-body">
                <h4 style="font-size: 1.05rem; margin-bottom: 0.5rem;"><%= currentLang === 'en' && item.title_en ? item.title_en : item.title %></h4>
                <a href="/berita/<%= item.id %>" class="news-link"><%= t.berita_detail.read_more %> <i class="fa-solid fa-arrow-right"></i></a>
              </div>
            </div>
          <% }); %>
        </div>
      </div>
    <% } %>
  </div>
</section>

<%- include('partials/footer') %>
