{% extends "base.html" %}

{% block title %}{{ post.meta_title }} | Satta King{% endblock %}

{% block meta %}
<meta name="description" content="{{ post.meta_description or post.title }}">
<meta name="keywords" content="{{ post.meta_keywords or 'satta king, satta result' }}">
<link rel="canonical" href="{{ post.canonical_url or request.url }}">

<meta property="og:type" content="article">
<meta property="og:title" content="{{ post.og_title or post.title }}">
<meta property="og:description" content="{{ post.og_description or post.meta_description or post.title }}">
<meta property="og:url" content="{{ request.url }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ post.og_title or post.title }}">
<meta name="twitter:description" content="{{ post.og_description or post.meta_description or post.title }}">

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "{{ post.schema_type or 'Article' }}",
    "headline": "{{ post.title }}",
    "description": "{{ post.meta_description or post.title }}",
    "datePublished": "{{ post.publish_date.isoformat() if post.publish_date else '' }}",
    "author": {
        "@type": "Organization",
        "name": "Satta King"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Satta King"
    }
}
</script>
{% endblock %}

{% block styles %}
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
    a { text-decoration: none; color: inherit; }
    
    .main-container { max-width: 1400px; margin: 0 auto; padding: 0 15%; }
    @media (max-width: 1200px) { .main-container { padding: 0 10%; } }
    @media (max-width: 768px) { .main-container { padding: 0 3%; } }
    @media (max-width: 480px) { .main-container { padding: 0 2%; } }
    
    .header-section {
        background: #fff;
        padding: 15px 0;
        text-align: center;
        border-bottom: 3px solid #ffd700;
    }
    
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .logo-container img { max-height: 60px; }
    .site-title { font-size: 28px; font-weight: 800; color: #333; }
    
    .nav-section {
        background: #000;
        padding: 10px 15%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    @media (max-width: 1200px) { .nav-section { padding: 10px 10%; } }
    @media (max-width: 768px) { .nav-section { padding: 10px 3%; } }
    
    .nav-menu { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
    .nav-item { color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; transition: all 0.3s; }
    .nav-item:hover, .nav-item.active { background: #333; }
    
    .post-container {
        background: #fff;
        border-radius: 15px;
        padding: 30px;
        margin: 20px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .post-title {
        font-size: 28px;
        font-weight: 700;
        color: #333;
        margin-bottom: 10px;
    }
    
    .post-date {
        font-size: 14px;
        color: #888;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .post-content {
        font-size: 16px;
        line-height: 1.8;
        color: #444;
    }
    
    .post-content p {
        margin-bottom: 15px;
    }
    
    .back-link {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background: #333;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        transition: background 0.3s;
    }
    
    .back-link:hover {
        background: #555;
    }
    
    .footer-section {
        background: #000;
        color: #fff;
        padding: 30px;
        text-align: center;
        margin-top: 30px;
    }
    
    .footer-links { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 15px; }
    .footer-link { color: #ccc; font-size: 14px; cursor: pointer; }
    .footer-link:hover { color: #ffd700; }
    .copyright { color: #888; font-size: 12px; }
</style>
{% endblock %}

{% block content %}
<div class="main-container">
    <div class="header-section">
        <div class="logo-container">
            {% if site_settings and site_settings.logo_data %}
            <img src="{{ site_settings.logo_data }}" alt="Satta King">
            {% else %}
            <span class="site-title">Satta King</span>
            {% endif %}
        </div>
    </div>

    <div class="nav-section">
        <div class="nav-menu">
            <a href="/" class="nav-item">Home</a>
            <a href="/chart" class="nav-item">Chart</a>
            <a href="/daily-update" class="nav-item">Daily Update</a>
            <a href="/latest" class="nav-item active">Latest</a>
        </div>
    </div>
    
    <div class="post-container">
        <h1 class="post-title">{{ post.title }}</h1>
        <div class="post-date">{{ post.publish_date.strftime('%B %d, %Y') if post.publish_date else '' }}</div>
        <div class="post-content">
            {{ post.content|safe if post.content else '' }}
        </div>
        <a href="/latest" class="back-link">← Back to Latest Posts</a>
    </div>
</div>

<div class="footer-section">
    <div class="footer-links">
        <a href="/privacy-policy" class="footer-link">Privacy Policy</a>
        <a href="/about" class="footer-link">About Us</a>
        <a href="/contact" class="footer-link">Contact</a>
        <a href="/disclaimer" class="footer-link">Disclaimer</a>
    </div>
    <div class="copyright">© 2026 Satta King. All rights reserved.</div>
</div>
{% endblock %}