{% extends "base.html" %}

{% block title %}{{ article.title }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('home') }}">Matières</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('categories', subject_id=article.category.subject_id) }}">{{ article.category.subject.name }}</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('articles', category_id=article.category_id) }}">{{ article.category.name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
    </ol>
</nav>

<div class="article-content">
    <h1>{{ article.title }}</h1>
    {% set embed = article.youtube_url | youtube_embed %}
    {% if embed %}
    <div class="video-player" style="margin-bottom: 1rem;">
        <iframe width="100%" height="480" src="{{ embed }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    {% endif %}
    <div class="trix-content">
        {{ (article.content | render_embeds) | safe }}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.trix-content img').forEach(img => {
        img.addEventListener('click', () => {
            window.open(img.src, '_blank');
        });
    });
});
</script>
{% endblock %}