{% extends 'base.html' %}
{% load static %}

{% block title %}Social Media Test - Quantum Tasks AI{% endblock %}

{% block og_title %}Social Media Preview Test - Quantum Tasks AI{% endblock %}
{% block og_description %}Testing social media link preview with branded image. This should show the Quantum Tasks AI logo and branding.{% endblock %}

{% block content %}
<div style="padding: 40px; max-width: 800px; margin: 0 auto;">
    <h1>Social Media Preview Test</h1>
    
    <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h2>Open Graph Meta Tags Debug</h2>
        <p><strong>OG Image URL:</strong> https://www.quantumtaskai.com{% static 'img/og-image.png' %}</p>
        <p><strong>Current Page URL:</strong> https://www.quantumtaskai.com{{ request.get_full_path }}</p>
        <p><strong>Static URL:</strong> {% static 'img/og-image.png' %}</p>
    </div>
    
    <div style="margin: 20px 0;">
        <h3>Preview Image</h3>
        <img src="{% static 'img/og-image.png' %}" alt="OG Image Preview" style="max-width: 100%; border: 1px solid #ddd;">
    </div>
    
    <div style="background: #e7f3ff; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>Testing Instructions</h3>
        <ol>
            <li>Copy this page URL: <code>https://www.quantumtaskai.com/test-og/</code></li>
            <li>Paste it in WhatsApp, Discord, Twitter, or LinkedIn</li>
            <li>Check if the image preview appears</li>
            <li>Use Facebook Sharing Debugger: <a href="https://developers.facebook.com/tools/debug/" target="_blank">https://developers.facebook.com/tools/debug/</a></li>
            <li>Use Twitter Card Validator: <a href="https://cards-dev.twitter.com/validator" target="_blank">https://cards-dev.twitter.com/validator</a></li>
        </ol>
    </div>
    
    <div style="background: #fff3cd; padding: 20px; border-radius: 8px; margin: 20px 0;">
        <h3>Troubleshooting</h3>
        <ul>
            <li>Social platforms cache previews - may take time to update</li>
            <li>Image must be publicly accessible (no authentication required)</li>
            <li>Image should be at least 600x315px for optimal display</li>
            <li>URL must be publicly accessible (not localhost)</li>
        </ul>
    </div>
</div>
{% endblock %}