<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{htmlEscape .Title}}</title>
    <meta name="description" content="{{htmlEscape .Description}}">
    <link rel="canonical" href="{{htmlEscape .Canonical}}">
    <script type="application/ld+json">{{safe .Schema}}</script>
    <style>
        :root { --primary: #2c3e50; --secondary: #3498db; --bg: #f9f9f9; --text: #333; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background: #f9f9f9; }
        header { margin-bottom: 30px; text-align: center; }
        h1 { color: #2c3e50; font-size: 2.5rem; margin-bottom: 10px; }
        .meta { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 40px; }
        .content-section { background: white; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .section-image { width: 100%; height: auto; border-radius: 8px; margin: 20px 0; display: block; }
        .section-text { font-size: 1.1rem; color: #444; margin: 20px 0; }
        h2, h3 { color: #2c3e50; }
        footer { margin-top: 50px; text-align: center; font-size: 0.8rem; color: #bdc3c7; padding: 20px; }
        .ads-container { margin-bottom: 30px; text-align: center; }
        .related-box { margin-top: 50px; padding: 30px; background: #fff; border-radius: 12px; border: 1px solid #eee; }
        .related-box h4 { color: var(--primary); margin-bottom: 20px; font-size: 1.4rem; border-bottom: 2px solid var(--secondary); display: inline-block; padding-bottom: 5px; }
        .related-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
        .related-list li a { color: var(--secondary); text-decoration: none; font-size: 1rem; font-weight: 500; display: block; padding: 10px; background: #f0f7ff; border-radius: 6px; transition: 0.2s; }
        .related-list li a:hover { background: var(--secondary); color: white; transform: translateX(5px); }
        table { width: 100%; border-collapse: collapse; margin: 20px 0; border: 1px solid #ddd; }
        th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
        th { background-color: #f2f2f2; font-weight: bold; }
        tr:nth-child(even) { background-color: #f9f9f9; }
    </style>
    {{safe .InjectHeader}}
</head>
<body>
    <header>
        <h1>{{htmlEscape .Title}}</h1>
        <div class="meta">Published on {{htmlEscape .Date}} by {{htmlEscape .SiteName}}</div>
    </header>
    
    <main>
        {{if .InjectAds}}
        <div class="ads-container">{{safe .InjectAds}}</div>
        {{end}}

        <div class="article-body">
            {{renderCompleteArticle .AIBlocks .Images .InjectAds "modern"}}
        </div>

        {{if .HasRelated}}
        <div class="related-box">
            <h4>Related Articles</h4>
            <ul class="related-list">
                {{range .RelatedArticles}}
                <li><a href="{{htmlEscape .Slug}}.html">{{htmlEscape .Keyword}}</a></li>
                {{end}}
            </ul>
        </div>
        {{end}}
    </main>

    <footer>
        <p>&copy; 2026 {{htmlEscape .SiteName}}. All rights reserved.</p>
    </footer>
    {{safe .InjectFooter}}
</body>
</html>