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

{% block title %}CV — Alexandre Gut{% endblock %}

{% block content %}

<section class="page-header">
    <div class="page-header-container">
        <span class="section-tag">Curriculum Vitae</span>
        <h1 class="page-title">Mon CV</h1>
        <p class="page-sub">Ingénieur Informatique &amp; Systèmes Embarqués</p>
    </div>
</section>

<section class="section cv-section">
    <div class="cv-container">

        <!-- Boutons actions -->
        <div class="cv-actions">
            <a href="{% static 'cv_alexandre_gut.pdf' %}" download="CV_Alexandre_Gut.pdf" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Télécharger le CV
            </a>
            <a href="{% static 'cv_alexandre_gut.pdf' %}" target="_blank" class="btn btn-outline">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                    <polyline points="15 3 21 3 21 9"/>
                    <line x1="10" y1="14" x2="21" y2="3"/>
                </svg>
                Ouvrir dans un nouvel onglet
            </a>
            <a href="/" class="btn btn-ghost">
                ← Retour
            </a>
        </div>

        <!-- Visionneuse PDF -->
        <div class="cv-viewer-wrapper">
            <iframe
                src="{% static 'cv_alexandre_gut.pdf' %}#toolbar=0&navpanes=0&scrollbar=1"
                class="cv-iframe"
                title="CV Alexandre Gut"
            ></iframe>

            <!-- Fallback si l'iframe ne charge pas -->
            <div class="cv-fallback" id="cvFallback" style="display:none;">
                <div class="cv-fallback-icon">📄</div>
                <p>La prévisualisation n'est pas disponible dans ce navigateur.</p>
                <a href="{% static 'cv_alexandre_gut.pdf' %}" download="CV_Alexandre_Gut.pdf" class="btn btn-primary">
                    Télécharger le CV
                </a>
            </div>
        </div>

    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
// Détection mobile → rediriger vers le PDF directement
const iframe = document.querySelector('.cv-iframe');
if (iframe) {
    iframe.addEventListener('error', () => {
        iframe.style.display = 'none';
        document.getElementById('cvFallback').style.display = 'flex';
    });
}

// Sur mobile, montrer le fallback directement
if (window.innerWidth < 768) {
    if (iframe) iframe.style.display = 'none';
    const fallback = document.getElementById('cvFallback');
    if (fallback) fallback.style.display = 'flex';
}
</script>
{% endblock %}