{% load static %}
<section id="home-sections" class="clearfix">
    <div class="horizontal column">
        <div class="widget widget_recent_entries">
            <div class="section-head">
                <h3 class="widget-title">Últimas Notícias</h3>
                <a class="see-more" href="{% url 'listar_noticias_cards' %}">Ver Mais</a>
            </div>

            <ul class="news-list list-horizontal">
                {% for n in news_list|slice:":4" %}
                    {% with pk=n.pk|stringformat:"s" %}
                        {% with modal_id="news-modal-"|add:pk thumb_id="news-thumb-"|add:pk %}
                            <li class="news-card">
                                <h6 class="news-title">
                                    <a data-fancybox data-src="#{{ modal_id }}" href="javascript:;">{{ n.title }}</a>
                                </h6>

                                <a data-fancybox data-src="#{{ modal_id }}" href="javascript:;" class="thumb-link"
                                    {% if n.file and n.is_video %}data-video-src="{{ n.file.url }}" data-thumb-id="{{ thumb_id }}"{% endif %}>
                                    {% if n.file %}
                                    {% if n.is_video %}
                                        <img id="{{ thumb_id }}" width="120" height="213" loading="lazy"
                                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
                                            alt="{{ n.title }}">
                                        <span class="play-badge"><i class="fas fa-play"></i></span>
                                    {% else %}
                                        <img src="{{ n.file.url }}" alt="{{ n.title }}" width="120" height="213" loading="lazy" decoding="async">
                                    {% endif %}
                                    {% else %}
                                    <img src="{% static 'img/placeholder-9x16.png' %}" alt="{{ n.title }}"
                                        width="120" height="213" loading="lazy" decoding="async">
                                    {% endif %}
                                </a>

                                <p class="news-excerpt">{{ n.text|truncatechars:220 }}</p>

                                <div id="{{ modal_id }}" class="news-modal" style="display:none;">
                                    <h3 class="mb-2" style="text-align:center;">{{ n.title }}</h3>
                                    <p class="mb-3" style="text-align:center;">{{ n.text|linebreaksbr }}</p>

                                    {% if n.file and n.is_video %}
                                    <div class="vertical-video">
                                        <video controls preload="metadata" playsinline controlsList="nodownload">
                                        <source src="{{ n.file.url }}">
                                        Seu navegador não suporta vídeo HTML5.
                                        </video>
                                    </div>
                                    {% elif n.file %}
                                    <div style="text-align:center">
                                        <img src="{{ n.file.url }}" alt="{{ n.title }}"
                                            style="max-width:100%;height:auto;border-radius:12px;">
                                    </div>
                                    {% endif %}
                                </div>
                            </li>
                        {% endwith %}
                    {% endwith %}
                {% empty %}
                    <li>Sem notícias por enquanto.</li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>

<style>
    .horizontal.column { width:100%; display:block; float:none; margin:0 0 24px; }

    .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .see-more{ font-size:.9rem; text-decoration:none; }
    .see-more:hover{ text-decoration:underline; }

    .list-horizontal{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:16px; }
    .list-horizontal > li{ list-style:none; }

    .news-card{ max-width:360px; flex:1 1 300px; }
    .news-title{ margin-bottom:6px; }
    .news-excerpt{ margin:8px 0 0; }

    .thumb-link{ position:relative; display:inline-block; }
    .thumb-link img{ display:block; width:120px; height:213px; object-fit:cover; background:#ddd; border-radius:8px; }
    .thumb-link .play-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

    .vertical-video{ width:min(90vw,420px); aspect-ratio:9/16; margin:0 auto; position:relative; overflow:hidden; border-radius:12px; background:#000; box-shadow:0 8px 30px rgba(0,0,0,.35); }
    .vertical-video video{ width:100%; height:100%; object-fit:cover; }

    .news-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .news-card .thumb-link {
        display: flex;
        justify-content: center;
    }

    .news-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 2;  /* número máximo de linhas */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
</style>

<script>
    /* thumb para vídeos */
    (function(){
            document.querySelectorAll('[data-video-src][data-thumb-id]').forEach(function (el) {
            const src = el.getAttribute('data-video-src');
            const id  = el.getAttribute('data-thumb-id');
            const img = document.getElementById(id);
            if (!src || !img) return;
            makeThumbFromVideo(src, 1.0).then(url => { img.src = url; }).catch(() => {});
        });

        function makeThumbFromVideo(src, atSec){
            return new Promise((resolve, reject)=>{
                const v = document.createElement('video');
                v.crossOrigin = 'anonymous'; v.preload = 'metadata'; v.muted = true; v.playsInline = true; v.src = src;
                v.addEventListener('error', () => reject('erro'), {once:true});
                v.addEventListener('loadedmetadata', seek, {once:true});
                function seek(){
                    try { v.currentTime = Math.max(atSec||0.5, 0.1); }
                    catch(e){ return setTimeout(seek, 120); }
                    v.addEventListener('seeked', () => {
                        const vw = v.videoWidth || 360, vh = v.videoHeight || 640, target = 9/16, r = vw/vh;
                        let sx=0, sy=0, sw=vw, sh=vh;
                        if (r > target) { const nw = vh*target; sx=(vw-nw)/2; sw=nw; }
                        else if (r < target) { const nh = vw/target; sy=(vh-nh)/2; sh=nh; }
                        const tmp = document.createElement('canvas'); tmp.width=sw; tmp.height=sh;
                        tmp.getContext('2d').drawImage(v, sx,sy,sw,sh, 0,0, sw,sh);
                        const out = document.createElement('canvas'); out.width=120; out.height=213;
                        out.getContext('2d').drawImage(tmp, 0,0, out.width, out.height);
                        resolve(out.toDataURL('image/jpeg', .86));
                    }, {once:true});
                }
            });
        }

        document.addEventListener("fancybox:close", () => {
            document.querySelectorAll(".news-modal video").forEach(v => { try{ v.pause(); }catch(e){} v.currentTime = 0; });
        });
    })();
</script>