{% extends "base.html" %}

{% block title %}{{ news.meta_title or news.title }} | Satta King News{% endblock %}
{% block description %}{{ news.meta_description or news.excerpt or news.title }}{% endblock %}
{% block keywords %}{{ news.meta_keywords or 'satta king news, satta updates, satta result news' }}{% endblock %}
{% block canonical %}/news/{{ news.slug }}{% endblock %}

{% block extra_head %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "{{ news.title }}",
    "description": "{{ news.meta_description or news.excerpt or '' }}",
    "url": "{{ request.url }}",
    "datePublished": "{{ news.created_at }}",
    "dateModified": "{{ news.updated_at or news.created_at }}",
    {% if news.featured_image %}"image": "{{ news.featured_image }}",{% endif %}
    "author": {
        "@type": "Organization",
        "name": "Satta King"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Satta King",
        "url": "{{ request.url_root }}"
    },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ request.url }}"
    },
    "articleSection": "News",
    "inLanguage": "en-IN",
    "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": "https://schema.org/ReadAction",
        "userInteractionCount": {{ news.views }}
    }
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Home", "item": "{{ request.url_root }}"},
        {"@type": "ListItem", "position": 2, "name": "News", "item": "{{ request.url_root }}news"},
        {"@type": "ListItem", "position": 3, "name": "{{ news.title }}", "item": "{{ request.url }}"}
    ]
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "What is this news about?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "{{ news.meta_description or news.excerpt or news.title }}"
            }
        },
        {
            "@type": "Question",
            "name": "When was this article published?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "This article was published on {{ news.created_at }}."
            }
        }
    ]
}
</script>
<meta property="og:type" content="article">
<meta property="og:title" content="{{ news.meta_title or news.title }}">
<meta property="og:description" content="{{ news.meta_description or news.excerpt or '' }}">
<meta property="og:url" content="{{ request.url }}">
{% if news.featured_image %}<meta property="og:image" content="{{ news.featured_image }}">{% endif %}
<meta property="article:published_time" content="{{ news.created_at }}">
<meta property="article:modified_time" content="{{ news.updated_at or news.created_at }}">
<meta property="article:section" content="News">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ news.meta_title or news.title }}">
<meta name="twitter:description" content="{{ news.meta_description or news.excerpt or '' }}">
{% if news.featured_image %}<meta name="twitter:image" content="{{ news.featured_image }}">{% endif %}
<style>
.article-container { max-width: 900px; margin: 0 auto; padding: 20px; }
.breadcrumb { display: flex; gap: 10px; margin-bottom: 25px; font-size: 0.9rem; flex-wrap: wrap; }
.breadcrumb a { color: #60a5fa; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #6b7280; }
.article-header { text-align: center; margin-bottom: 35px; }
.article-title { color: #ffd700; font-size: 2.2rem; margin-bottom: 20px; line-height: 1.3; }
.article-meta { display: flex; justify-content: center; gap: 25px; color: #9ca3af; font-size: 0.95rem; flex-wrap: wrap; }
.article-meta-item { display: flex; align-items: center; gap: 6px; }
.featured-image { width: 100%; max-height: 450px; object-fit: cover; border-radius: 15px; margin-bottom: 30px; }
.article-content { background: linear-gradient(145deg, #1f2937 0%, #111827 100%); border-radius: 15px; padding: 35px; border: 1px solid #374151; margin-bottom: 30px; }
.article-content .content-body { color: #d1d5db; line-height: 1.9; font-size: 1.05rem; }
.article-content .content-body h1, .article-content .content-body h2, .article-content .content-body h3 { color: #ffd700; margin: 25px 0 15px 0; }
.article-content .content-body h2 { font-size: 1.5rem; border-bottom: 2px solid #e94560; padding-bottom: 10px; }
.article-content .content-body h3 { font-size: 1.25rem; }
.article-content .content-body p { margin-bottom: 18px; }
.article-content .content-body a { color: #60a5fa; }
.article-content .content-body ul, .article-content .content-body ol { margin: 15px 0; padding-left: 25px; }
.article-content .content-body li { margin-bottom: 8px; }
.article-content .content-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 20px 0; }
.article-content .content-body blockquote { border-left: 4px solid #ffd700; padding-left: 20px; margin: 20px 0; color: #9ca3af; font-style: italic; }
.article-content .content-body table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.article-content .content-body th, .article-content .content-body td { padding: 12px; border: 1px solid #374151; text-align: left; }
.article-content .content-body th { background: #1e3a5f; color: #ffd700; }
.share-section { background: #1e3a5f; border-radius: 12px; padding: 20px; margin-bottom: 30px; text-align: center; }
.share-section h4 { color: #ffd700; margin-bottom: 15px; }
.share-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: transform 0.2s; }
.share-btn:hover { transform: scale(1.05); }
.share-whatsapp { background: #25d366; color: white; }
.share-twitter { background: #1da1f2; color: white; }
.share-facebook { background: #4267b2; color: white; }
.share-copy { background: #6b7280; color: white; cursor: pointer; border: none; }
.related-section { background: linear-gradient(145deg, #1f2937 0%, #111827 100%); border-radius: 15px; padding: 25px; border: 1px solid #374151; margin-bottom: 30px; }
.related-title { color: #ffd700; font-size: 1.3rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #e94560; }
.related-list { display: grid; gap: 15px; }
.related-item { background: #111827; padding: 15px; border-radius: 10px; border: 1px solid #374151; }
.related-item a { color: #d1d5db; text-decoration: none; font-weight: 500; }
.related-item a:hover { color: #ffd700; }
.article-stats { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; flex-wrap: wrap; }
.stat-box { background: #1e3a5f; padding: 15px 25px; border-radius: 10px; text-align: center; }
.stat-number { color: #ffd700; font-size: 1.4rem; font-weight: bold; }
.stat-label { color: #9ca3af; font-size: 0.85rem; }
.back-link { display: inline-block; background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%); color: #fff; padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: 500; transition: transform 0.2s; }
.back-link:hover { transform: translateY(-2px); }
.nav-links { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
@media (max-width: 768px) {
    .article-container { padding: 15px; }
    .article-title { font-size: 1.6rem; }
    .article-content { padding: 20px; }
    .article-meta { gap: 15px; }
    .share-buttons { gap: 10px; }
    .share-btn { padding: 8px 15px; font-size: 0.85rem; }
}
</style>
{% endblock %}

{% block content %}
<article class="article-container" itemscope itemtype="https://schema.org/NewsArticle">
    <nav class="breadcrumb" aria-label="Breadcrumb">
        <a href="/">Home</a>
        <span>›</span>
        <a href="/news">News</a>
        <span>›</span>
        <span>{{ news.title[:50] }}{% if news.title|length > 50 %}...{% endif %}</span>
    </nav>

    <header class="article-header">
        <h1 class="article-title" itemprop="headline">{{ news.title }}</h1>
        <div class="article-meta">
            <div class="article-meta-item">
                <span>📅</span>
                <time itemprop="datePublished" datetime="{{ news.created_at }}">{{ news.created_at }}</time>
            </div>
            <div class="article-meta-item">
                <span>👁️</span>
                <span itemprop="interactionCount">{{ news.views }} views</span>
            </div>
            <div class="article-meta-item">
                <span>📰</span>
                <span itemprop="articleSection">News</span>
            </div>
        </div>
    </header>

    <div class="article-stats">
        <div class="stat-box">
            <div class="stat-number">{{ news.views }}</div>
            <div class="stat-label">Total Views</div>
        </div>
        <div class="stat-box">
            <div class="stat-number">{{ news.created_at.strftime('%d') if news.created_at else 'N/A' }}</div>
            <div class="stat-label">{{ news.created_at.strftime('%b %Y') if news.created_at else '' }}</div>
        </div>
    </div>

    {% if news.featured_image %}
    <img src="{{ news.featured_image }}" alt="{{ news.title }}" class="featured-image" itemprop="image">
    {% endif %}

    <div class="article-content">
        <div class="content-body" itemprop="articleBody">
            {{ news.content|safe }}
        </div>
    </div>

    <div class="share-section">
        <h4>Share This Article</h4>
        <div class="share-buttons">
            <a href="https://wa.me/?text={{ news.title }} - {{ request.url }}" target="_blank" class="share-btn share-whatsapp">
                📱 WhatsApp
            </a>
            <a href="https://twitter.com/intent/tweet?text={{ news.title }}&url={{ request.url }}" target="_blank" class="share-btn share-twitter">
                🐦 Twitter
            </a>
            <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}" target="_blank" class="share-btn share-facebook">
                📘 Facebook
            </a>
            <button class="share-btn share-copy" onclick="navigator.clipboard.writeText('{{ request.url }}'); this.textContent='✓ Copied!';">
                📋 Copy Link
            </button>
        </div>
    </div>

    {% if related_news %}
    <section class="related-section">
        <h2 class="related-title">Related News</h2>
        <div class="related-list">
            {% for item in related_news %}
            <div class="related-item">
                <a href="/news/{{ item.slug }}">{{ item.title }}</a>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <div class="nav-links">
        <a href="/news" class="back-link">← Back to News</a>
        <a href="/" class="back-link">🏠 Home</a>
    </div>
</article>
{% endblock %}