{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_head %}
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  {{ parent() }}

  {# Add Bootstrap Icons CDN #}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />

  {# Add Google Fonts - Inter #}
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
{% endblock %}


{% block base_content %}
<div style="padding: 2rem;">
    <h1>Translation Test</h1>
    <p><strong>Current Locale:</strong> {{ app.request.locale }}</p>
    
    <h2>Footer Translations:</h2>
    <ul>
        <li>About Title: {{ "footer.about.title"|trans }}</li>
        <li>Quick Links: {{ "footer.quicklinks.title"|trans }}</li>
        <li>Newsletter: {{ "footer.newsletter.title"|trans }}</li>
        <li>Copyright: {{ "footer.copyright"|trans }}</li>
    </ul>
    
    <h2>Product Translations:</h2>
    <ul>
        <li>Add to Cart: {{ "product.card.addToCart"|trans }}</li>
        <li>In Stock: {{ "product.detail.inStock"|trans }}</li>
        <li>Price: {{ "product.filters.price"|trans }}</li>
    </ul>
</div>
{% endblock %}