@pushOnce('svg')
    <svg xmlns="http://www.w3.org/2000/svg">
        <path id="filetype-pdf" fill-rule="evenodd"
            d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM1.6 11.85H0v3.999h.791v-1.342h.803q.43 0 .732-.173.305-.175.463-.474a1.4 1.4 0 0 0 .161-.677q0-.375-.158-.677a1.2 1.2 0 0 0-.46-.477q-.3-.18-.732-.179m.545 1.333a.8.8 0 0 1-.085.38.57.57 0 0 1-.238.241.8.8 0 0 1-.375.082H.788V12.48h.66q.327 0 .512.181.185.183.185.522m1.217-1.333v3.999h1.46q.602 0 .998-.237a1.45 1.45 0 0 0 .595-.689q.196-.45.196-1.084 0-.63-.196-1.075a1.43 1.43 0 0 0-.589-.68q-.396-.234-1.005-.234zm.791.645h.563q.371 0 .609.152a.9.9 0 0 1 .354.454q.118.302.118.753a2.3 2.3 0 0 1-.068.592 1.1 1.1 0 0 1-.196.422.8.8 0 0 1-.334.252 1.3 1.3 0 0 1-.483.082h-.563zm3.743 1.763v1.591h-.79V11.85h2.548v.653H7.896v1.117h1.606v.638z" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" class="bi bi-play-btn" id="play-btn">
        <title>Tocar vídeo</title>
        <path d="M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z" />
        <path
            d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 0a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z" />
    </svg>
@endPushOnce

@pushOnce('bootstrapscripts')
    const mainCarousel = new bootstrap.Carousel('#mainCarousel');
@endPushOnce

<x-geracao.layout active="inicio" title="Início" youtubePreconnect="true" mainSitePreconnect="true"
    description="O Geração Atitude é um projeto de incentivo ao protagonismo juvenil e ao interesse por temas como cidadania, democracia, política, eleições, voto consciente e o funcionamento dos Poderes.">

    <main>
        <h1 class="d-none">Geração Atitude - Início</h1>

        <h2 class="visually-hidden">Notícias</h2>

        @if (!empty($destaques))
            <div class="container-fluid g-0">
                <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        @foreach ($destaques as $destaque)
                            <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="{{ $loop->index }}"
                                class=" @if ($loop->first) active @endif"
                                @if ($loop->first) aria-current="true" @endif
                                aria-label="Slide {{ $loop->index }}"></button>
                        @endforeach
                    </div>
                    <div class="carousel-inner">
                        @foreach ($destaques as $destaque)
                            @php
                                $imagemUrl = $destaque->getImgsrc('bigger');
                            @endphp
                            <a target="_blank"
                                href="{{ $destaque->url ?? ($destaque->www ?? route('geracao.noticia', ['slug' => $destaque->slug])) }}"
                                class="carousel-item @if ($loop->first) active @endif"
                                data-bs-interval=6000>
                                <div class="d-block bannerimage-a mx-auto w-100 overflow-hidden">
                                    <img style="background: rgba(1,1,1,0.1)" src="{{ $imagemUrl }}"
                                        class="w-100 bannerimage" alt="{{ $destaque->titulo }}">
                                </div>
                                <div class="my-carousel-caption d-block">
                                    <h3 style="position: relative" class="text-white fw-semibold">
                                        {{ $destaque->titulo }}</h3>
                                </div>
                            </a>
                        @endforeach

                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Anterior</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Próximo</span>
                    </button>
                </div>
            </div>
        @endif

        @php
            $boxes = [
                [
                    'title' => 'CIDADANIA',
                    'svg' =>
                        'M77.2083 18.1663V9.08301H31.7916V18.1663H9.08331V49.958C9.08331 54.9538 13.1708 59.0413 18.1666 59.0413H32.2458C34.0625 67.943 41.0566 74.9372 49.9583 76.7538V86.6547C36.3333 88.7438 36.3333 99.9164 36.3333 99.9164H72.6666C72.6666 99.9164 72.6666 88.7438 59.0416 86.6547V76.7538C67.9433 74.9372 74.9375 67.943 76.7542 59.0413H90.8333C95.8292 59.0413 99.9167 54.9538 99.9167 49.958V18.1663H77.2083ZM18.1666 49.958V27.2497H31.7916V49.958H18.1666ZM68.125 54.4997C68.125 61.9934 61.9937 68.1247 54.5 68.1247C47.0062 68.1247 40.875 61.9934 40.875 54.4997V18.1663H68.125V54.4997ZM90.8333 49.958H77.2083V27.2497H90.8333V49.958Z',
                ],
                [
                    'title' => 'DEMOCRACIA',
                    'svg' =>
                        'M54.5 18.167C59.3181 18.167 63.9388 20.081 67.3457 23.4879C70.7526 26.8948 72.6666 31.5156 72.6666 36.3337C72.6666 41.1518 70.7526 45.7725 67.3457 49.1794C63.9388 52.5863 59.3181 54.5003 54.5 54.5003C49.6819 54.5003 45.0611 52.5863 41.6542 49.1794C38.2473 45.7725 36.3333 41.1518 36.3333 36.3337C36.3333 31.5156 38.2473 26.8948 41.6542 23.4879C45.0611 20.081 49.6819 18.167 54.5 18.167ZM54.5 27.2503C52.0909 27.2503 49.7805 28.2073 48.0771 29.9108C46.3736 31.6142 45.4166 33.9246 45.4166 36.3337C45.4166 38.7427 46.3736 41.0531 48.0771 42.7565C49.7805 44.46 52.0909 45.417 54.5 45.417C56.909 45.417 59.2194 44.46 60.9228 42.7565C62.6263 41.0531 63.5833 38.7427 63.5833 36.3337C63.5833 33.9246 62.6263 31.6142 60.9228 29.9108C59.2194 28.2073 56.909 27.2503 54.5 27.2503ZM54.5 59.042C66.6262 59.042 90.8333 65.0824 90.8333 77.2087V90.8337H18.1666V77.2087C18.1666 65.0824 42.3737 59.042 54.5 59.042ZM54.5 67.6712C41.0112 67.6712 26.7958 74.302 26.7958 77.2087V82.2045H82.2041V77.2087C82.2041 74.302 67.9887 67.6712 54.5 67.6712Z',
                ],
                [
                    'title' => 'POLÍTICA',
                    'svg' =>
                        'M10.4458 92.1044L54.0458 48.5044L47.6875 42.0552L44.4175 45.2798C42.6462 47.051 39.785 47.051 38.0137 45.2798L34.7891 42.0552C33.0179 40.284 33.0179 37.4227 34.7891 35.6515L60.495 9.94562C62.2662 8.17438 65.1275 8.17438 66.8987 9.94562L70.1233 13.1702C71.8946 14.9415 71.8946 17.8027 70.1233 19.574L66.8987 22.7077L73.3479 29.2023C75.1191 27.431 77.9804 27.431 79.7516 29.2023C81.5229 30.9735 81.5229 33.8802 79.7516 35.6515L86.1554 42.0552L89.38 38.8306C91.1512 37.0594 94.0579 37.0594 95.8291 38.8306L99.0083 42.0552C100.78 43.8265 100.78 46.7331 99.0083 48.5044L73.3479 74.1648C71.5766 75.936 68.67 75.936 66.8987 74.1648L63.7196 70.9856C61.9029 69.2144 61.9029 66.3077 63.7196 64.5365L66.8987 61.3119L60.495 54.9081L16.8496 98.5535C15.0783 100.325 12.2171 100.325 10.4458 98.5535C8.67456 96.7823 8.67456 93.8756 10.4458 92.1044ZM90.8333 86.291C93.2424 86.291 95.5527 87.248 97.2562 88.9515C98.9596 90.6549 99.9166 92.9653 99.9166 95.3744V99.916H54.5V95.3744C54.5 92.9653 55.457 90.6549 57.1604 88.9515C58.8639 87.248 61.1743 86.291 63.5833 86.291H90.8333Z',
                ],
                [
                    'title' => 'ELEIÇÕES',
                    'svg' =>
                        'M77.2083 95.375L64.7188 81.75L69.9871 76.4817L77.2083 83.7029L93.5129 67.3983L98.7812 73.8021M58.1333 95.375H22.7083C17.6671 95.375 13.625 91.3329 13.625 86.2917V22.7083C13.625 17.6671 17.6671 13.625 22.7083 13.625H86.2917C91.3329 13.625 95.375 17.6671 95.375 22.7083V58.1333C92.6046 56.5438 89.5617 55.4083 86.2917 54.8633V22.7083H22.7083V86.2917H54.8633C55.4083 89.5617 56.5438 92.6046 58.1333 95.375ZM54.5 77.2083H31.7917V68.125H54.5M66.6717 59.0417H31.7917V49.9583H77.2083V54.8633C73.3479 55.4992 69.8054 56.9525 66.6717 59.0417ZM77.2083 40.875H31.7917V31.7917H77.2083',
                ],
            ];
        @endphp

        <div class="container col-xxl-9 my-4 my-5-lg">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-6 col-xxl-7 align-items-center justify-content-evenly">
                    <h2 class="display-5 fw-bold text-light-primary mt-0">
                        {{ $formando->title }}
                    </h2>

                    <p class="lead fw-semibold mt-1 mb-4">
                        {{ $formando->subtitle }}
                    </p>

                    <div class="row row-cols-2 g-3 px-3 mt-0 mb-3 d-lg-none d-flex">
                        @foreach ($boxes as $el)
                            <div class="col">
                                <div class="card text-bg-secondary-light text-center h-100 justify-content-center">
                                    <div class="card-img-top mt-2">
                                        <svg width="50px" height="50px" fill="none" viewBox="0 0 109 109"
                                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                            <path d=" {{ $el['svg'] }} " fill="white" />
                                        </svg>
                                    </div>
                                    <div class="card-body flex-grow-0 p-2">
                                        <div class="card-title fs-6 fs-sm-5 fs-md-4 fs-xl-3 fw-bold text-white m-0">
                                            {{ $el['title'] }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <p class="lead">
                        {!! $formando->text !!}
                    </p>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-around justify-content-lg-start">
                        <a class="btn btn-secondary-light btn-lg px-4 me-md-2 d-flex align-items-center justify-content-evenly"
                            href="{{ route('geracao.caravana') }}">
                            <span>CARAVANA DA CIDADANIA</span>
                        </a>
                        <a class="btn btn-primary-light btn-lg px-4 me-md-2 d-flex align-items-center justify-content-evenly"
                            href="{{ route('geracao.projeto') }}">
                            <span>INSCRIÇÃO</span>
                        </a>
                    </div>
                </div>


                <div class=" d-none d-lg-flex col-12 col-lg-6 col-xxl-5 row row-cols-2 g-3 px-3 mt-0 mb-3">
                    @foreach ($boxes as $el)
                        <div class="col">
                            <div class="card text-bg-secondary-light text-center h-100 justify-content-center">
                                <div class="card-img-top mt-2">
                                    <svg width="109px" height="109px" fill="none" viewBox="0 0 109 109"
                                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                        <path d=" {{ $el['svg'] }} " fill="white" />
                                    </svg>
                                </div>
                                <div class="card-body flex-grow-0 px-2">
                                    <div class="card-title fs-6 fs-sm-5 fs-md-4 fs-xl-3 fw-bold text-white m-0">
                                        {{ $el['title'] }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="container  px-4 my-3 my-5-lg">
            <div class="row text-center align-items-center">
                <h2 class="col fw-bold text-light-primary fs-1">ETAPAS</h2>
            </div>
            <div class="row row-cols-1 row-cols-lg-2 g-1">
                @foreach ($cards as $el)
                    <div class="col">
                        <div class="card h-100">
                            <div class="card-body">
                                <h3 class="card-title mb-2 "><span class="fw-bold fs-3">{{ $el->inci }}</span><span
                                        class="fs-6 fw-semibold">
                                        @if ($el->title_url)
                                            <a href="{{ $el->title_url }}">{{ $el->title }}</a>
                                        @else
                                            {{ $el->title }}
                                        @endif
                                    </span> </h5>
                                    <p class="card-text"> {!! $el->mainText !!} </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div style="max-width: 30em" class="container-lg px-4 py-3">
                <div class="row text-center align-items-center">
                    <a class="btn btn-primary-light btn-lg" href=" {{ route('geracao.cronograma') }}"
                        role="button">
                        ACESSE O
                        <span class="fw-bold">CRONOGRAMA</span></a>
                </div>
            </div>
        </div>

        <div id="guia" class="color3-highlight">
            <div class="text-center container py-3" style="max-width: 60em">
                <h2 class="fw-bold text-light-primary fs-1">{{ $guia->titulo }}</h2>
                {!! $guia->texto !!}
                <a class="btn btn-color4 btn-lg fw-bold" target="_blank" href=" {{ route('geracao.guiapdf') }}"
                    role="button">
                    <svg width="32" height="32" fill="currentColor" class="bi bi-filetype-pdf m-1 text-start"
                        viewBox="0 0 16 16">
                        <use href="#filetype-pdf" />
                    </svg>BAIXAR GUIA</a>
            </div>
        </div>

        <h2 class="fw-bold text-light-primary fs-1 mt-3 text-center text-uppercase">Vídeos Explicativos</h2>
        @php
            $acc = '';
            foreach ($explicativos as $el) {
                $acc .= $el->code . ',';
            }
            $url =
                'https://www.youtube-nocookie.com/embed/' .
                $explicativos[0]->code .
                '?rel=0&showinfo=0&playlist=' .
                $acc;
        @endphp
        <div class="container mt-2 mb-3">
            <div class="d-block d-xl-none">
                <div class="row justify-content-center">
                    <div class="accordion accordion-flush col-xxl-8" id="explicativoAccordion">
                        @foreach ($explicativos as $el)
                            @php
                                $flush = 'flush-collapse' . ((string) $loop->index);
                            @endphp
                            <div class="accordion-item">
                                <h2 class="accordion-header ">
                                    <button
                                        class="accordion-button {{ $loop->first ? 'show' : 'collapsed' }} fw-semibold fs-5 text-light-primary"
                                        type="button" data-bs-toggle="collapse"
                                        data-bs-target="{{ '#' . $flush }}"
                                        aria-expanded="{{ $loop->first ? 'true' : 'false' }}"
                                        aria-controls="{{ '#' . $flush }}">
                                        {{ $el->title }}
                                    </button>
                                </h2>
                                <div id="{{ $flush }}"
                                    class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                                    data-bs-parent="#explicativoAccordion">
                                    <div class="accordion-body ratio ratio-16x9 bg-dark-subtle">
                                        <iframe width="640" height="480" class="ytiframeaccordion"
                                            src="{{ 'https://www.youtube-nocookie.com/embed/' . $el->code . '?rel=0&enablejsapi=1&playlist=' . $acc }}"
                                            title="{{ $el->title }}" frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                    </div>
                                </div>
                            </div>
                            <script>
                                'use strict';
                                const collapsible{{ $loop->index }} = document.getElementById("{{ $flush }}");
                                collapsible{{ $loop->index }}.addEventListener('shown.bs.collapse', event => {
                                    collapsible{{ $loop->index }}.scrollIntoView({
                                        'block': 'nearest'
                                    });
                                });
                                const iframe{{ $loop->index }} = collapsible{{ $loop->index }}.querySelector('iframe');
                                collapsible{{ $loop->index }}.addEventListener('hide.bs.collapse', event => {
                                    const message = JSON.stringify({
                                        "event": "command",
                                        "func": "pauseVideo",
                                        "args": ""
                                    });
                                    iframe{{ $loop->index }}.contentWindow.postMessage(
                                        message, '*')
                                });
                            </script>
                        @endforeach
                    </div>

                </div>
            </div>

            <div class="d-none d-xl-block">
                <div class="row">
                    <div class="col-4 d-grid gap-3" role="group" aria-label="Seletor vídeo explicativo">
                        @foreach ($explicativos as $el)
                            <input type="radio" class="btn-check" name="vbtn-radio"
                                id="vbtn-radio-{{ $loop->index }}" autocomplete="off" value="{{ $el->code }}"
                                @if ($loop->first) checked @endif>
                            <label
                                class="btn btn-outline-primary-light align-items-center justify-content-between d-flex"
                                for="vbtn-radio-{{ $loop->index }}">
                                <p class="fs-4 fw-semibold text-center m-0 flex-grow-1">
                                    {{ $el->title }}
                                </p>
                                <svg width="24" height="24" fill="currentColor"
                                    class="bi bi-play-btn justify-self-end flex-shrink-0" viewBox="0 0 16 16">
                                    <title>Tocar vídeo</title>
                                    <use href="#play-btn" />
                                </svg>
                            </label>
                            <script>
                                'use strict';
                                const radio{{ $loop->index }} = document.getElementById('vbtn-radio-{{ $loop->index }}');
                                radio{{ $loop->index }}.addEventListener("click", function(event) {
                                    const message = JSON.stringify({
                                        "event": "command",
                                        "func": "playVideoAt",
                                        "args": [{{ $loop->index }}],
                                    });
                                    document.getElementById('tabVideoExplicativo').contentWindow.postMessage(message, '*');
                                });
                            </script>
                        @endforeach
                    </div>

                    <div class="col-8">
                        <div class="ratio ratio-4x3 bg-dark-subtle">
                            <iframe id="tabVideoExplicativo" width="640" height="480"
                                src="{{ 'https://www.youtube-nocookie.com/embed/' . $explicativos[0]->code . '?rel=0&enablejsapi=1&playlist=' . $acc }}"
                                title="Explicativos" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <script>
            'use strict';

            window.addEventListener("resize", (event) => {
                console.log(window.innerWidth);
                const message = JSON.stringify({
                    "event": "command",
                    "func": "pauseVideo",
                    "args": ""
                });
                if (window.innerWidth >= 1200) {
                    // pause accordions yt
                    for (const el of document.getElementsByClassName('ytiframeaccordion')) {
                        el.contentWindow.postMessage(message, '*');
                    }
                } else {
                    // pause tab yt
                    document.getElementById('tabVideoExplicativo').contentWindow.postMessage(message, '*');
                }
                return;
            });
        </script>

    </main>

</x-geracao.layout>