{% extends 'base.html.twig' %}

{% block title %}Test Meta Tags - Administration SEO - {{ parent() }}{% endblock %}

{% block body %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="fas fa-tags me-2"></i>Test des Meta Tags</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ path('admin_dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ path('admin_seo_index') }}">SEO</a></li>
                        <li class="breadcrumb-item active">Meta Tags</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Meta Tags de base -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Meta Tags de Base</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Données générées :</h6>
                            <pre class="bg-light p-3 rounded"><code>{{ basic_meta|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                        </div>
                        <div class="col-md-6">
                            <h6>Rendu HTML :</h6>
                            <div class="bg-light p-3 rounded">
                                <code>&lt;title&gt;{{ basic_meta.title }}&lt;/title&gt;</code><br>
                                <code>&lt;meta name="description" content="{{ basic_meta.description }}"&gt;</code><br>
                                <code>&lt;meta name="keywords" content="{{ basic_meta.keywords }}"&gt;</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Meta Tags Objet -->
    {% if item_meta and test_item %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">Meta Tags Objet - {{ test_item.title }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Données générées :</h6>
                            <pre class="bg-light p-3 rounded"><code>{{ item_meta|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                        </div>
                        <div class="col-md-6">
                            <h6>Aperçu Google :</h6>
                            <div class="border p-3 rounded bg-white">
                                <div class="text-primary" style="font-size: 18px;">{{ item_meta.title }}</div>
                                <div class="text-success small">{{ item_meta.url }}</div>
                                <div class="text-muted">{{ item_meta.description }}</div>
                                <div class="mt-2">
                                    <span class="badge bg-warning text-dark">{{ item_meta.price }}€</span>
                                    <span class="badge bg-info">{{ item_meta.category }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% if item_structured_data %}
                    <div class="mt-3">
                        <h6>Données Structurées Schema.org :</h6>
                        <pre class="bg-light p-3 rounded"><code>{{ item_structured_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Meta Tags Membre -->
    {% if member_meta and test_member %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">Meta Tags Membre - {{ test_member.businessName ?: (test_member.firstName ~ ' ' ~ test_member.lastName) }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Données générées :</h6>
                            <pre class="bg-light p-3 rounded"><code>{{ member_meta|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                        </div>
                        <div class="col-md-6">
                            <h6>Aperçu Google :</h6>
                            <div class="border p-3 rounded bg-white">
                                <div class="text-primary" style="font-size: 18px;">{{ member_meta.title }}</div>
                                <div class="text-success small">{{ member_meta.url }}</div>
                                <div class="text-muted">{{ member_meta.description }}</div>
                                <div class="mt-2">
                                    <span class="badge bg-primary">Antiquaire</span>
                                    {% if test_member.geoCity %}
                                        <span class="badge bg-secondary">{{ test_member.geoCity.name }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {% if member_structured_data %}
                    <div class="mt-3">
                        <h6>Données Structurées Schema.org :</h6>
                        <pre class="bg-light p-3 rounded"><code>{{ member_structured_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Meta Tags Catégorie -->
    {% if category_meta and test_category %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">Meta Tags Catégorie - {{ test_category.name }}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Données générées :</h6>
                            <pre class="bg-light p-3 rounded"><code>{{ category_meta|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                        </div>
                        <div class="col-md-6">
                            <h6>Aperçu Google :</h6>
                            <div class="border p-3 rounded bg-white">
                                <div class="text-primary" style="font-size: 18px;">{{ category_meta.title }}</div>
                                <div class="text-success small">{{ category_meta.url }}</div>
                                <div class="text-muted">{{ category_meta.description }}</div>
                                <div class="mt-2">
                                    <span class="badge bg-secondary">Catégorie</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Outils de validation -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-dark text-white">
                    <h5 class="card-title mb-0">Outils de Validation</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <a href="https://search.google.com/test/rich-results" class="btn btn-outline-primary w-100" target="_blank">
                                <i class="fab fa-google me-2"></i>Test Rich Results
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="https://developers.facebook.com/tools/debug/" class="btn btn-outline-primary w-100" target="_blank">
                                <i class="fab fa-facebook me-2"></i>Facebook Debugger
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="https://cards-dev.twitter.com/validator" class="btn btn-outline-info w-100" target="_blank">
                                <i class="fab fa-twitter me-2"></i>Twitter Card Validator
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}