<turbo-stream action="replace" target="homepage">
    <template>
        <div id="homepage" class="container" data-controller="page-editor">
            <style>
                .btn-edit {
                 display: none;
                                }

                .btn-admin {
                 display: none;
                                }

                #ventures.dragging-mode {
                    display: flex;
                    flex-direction: column;
                }

                .venture-item.dragging {
                    opacity: 0.5;
                }

                #ventures.edit-mode {
                    display: flex;
                    flex-direction: column;
                }
                .venture-item.dragging {
                    opacity: 0.5;
                }
                /* Halo au hover pour tous les modes */
                .venture-item .card:hover {
                    box-shadow: 0 0 15px var(--color-secondary); /* cyan */
                    transition: box-shadow 0.2s ease-in-out;
                }

                /* Halo plus visible en edit mode */
                #ventures.edit-mode .venture-item .card:hover {
                    box-shadow: 0 0 20px var(--color-primary); /* jaune */
                }

            </style>

            <div class="row">
                <div class="col-12 d-flex justify-content-center">
                    <a href="/" data-turbo="false" class="glitch-btn text-white m-5"
                       data-text="BACK">Back</a>

                                            <a href="/home/venture/edit"
                           class="glitch-btn text-white m-5 btn-admin"
                           data-text="EDIT">Edit</a>
                    
                    <a href="/home/venture"
                       class="glitch-btn text-white m-5 btn-edit"
                       data-text="CONFIRM">Confirm</a>
                </div>
            </div>

                        <div id="ventures" class="row row-cols-2 row-cols-md-3 g-4 ">
                                    <div class="col venture-item" data-id="32">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/2967950/The_Witchs_Bakery/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 1">

                                <img src="/upload/venture32/8e4d2aed923d0dda90f88cb78787b897.jpg"
                                     alt="The Witch&#039;s Bakery (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">The Witch&#039;s Bakery (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="31">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/4131500/Childwood/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 2">

                                <img src="/upload/venture31/defc0b13f5f7048868d6a6c8e5393390.jpg"
                                     alt="Childwood (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Childwood (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="28">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/4393140/AlulA/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 3">

                                <img src="/upload/venture28/5e40849144c4a72528227ffc1e81cdaf.png"
                                     alt="Al&#039;ula (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Al&#039;ula (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="24">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://app.eva.gg/fr-FR/after-h-battle-arena"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 4">

                                <img src="/upload/venture24/b84665a0f8608ef0564021995ebd4bbb.jpg"
                                     alt="Eva BattleArena (VR Arena)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Eva BattleArena (VR Arena)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="29">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/2435870/Blood_Rush/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 5">

                                <img src="/upload/venture29/57a5eca7634d50b6949e6a6e6fad1dce.jpg"
                                     alt="BloodRush (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">BloodRush (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="30">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/3601060/TaVRns_Takedown__Naheulbeuk/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 6">

                                <img src="/upload/venture30/cc89f906c00e4e83773ede5cde9dbade.jpg"
                                     alt="Naheulbeuk TaVRn&#039;s Takedown (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Naheulbeuk TaVRn&#039;s Takedown (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="25">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/3823450/Terminus/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 7">

                                <img src="/upload/venture25/10a8aa052dcf3481f8f7f576a104bc1d.jpg"
                                     alt="Terminus (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Terminus (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="26">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://vrwellproject.itch.io/dont-look-down"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 8">

                                <img src="/upload/venture26/d8f5e826c9d66cf52c83808941758bfa.png"
                                     alt="Don&#039;t Look Down (on itch.io)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Don&#039;t Look Down (on itch.io)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="27">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/3239650/Garfield_Kart_2__All_You_Can_Drift/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 9">

                                <img src="/upload/venture27/6e4741ff2cc5208a1cce9fdc196a786a.jpg"
                                     alt="Garfield Kart 2 (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Garfield Kart 2 (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="22">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://store.steampowered.com/app/3398370/Obscura/"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 10">

                                <img src="/upload/venture22/f91e58e2e117b7a2820a6c03325e33b7.jpg"
                                     alt="Obscura (on Steam)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Obscura (on Steam)</p>

                                                                    </div>

                            </div>
                        </div>
                    </div>
                                    <div class="col venture-item" data-id="23">
                        <div class="ui-frame is-visible position-relative">

                                                        <a href="https://tami14994.itch.io/out-of-controll"
                               target="_blank"
                               class="stretched-link"></a>

                            <div class="ui-frame-body text-center"
                                 style="min-height: 200px; --i: 11">

                                <img src="/upload/venture23/522195bd2d8a4665d1eb33a627f89992.png"
                                     alt="Out of contROLL! (on itch.io)"
                                     class="img-fluid rounded"
                                     style="max-height: 200px; object-fit: cover;">

                                <div class="justify-content-between align-items-center text-center mt-2">
                                    <p style="font-family: 'Teko', sans-serif !important;font-size: 1.5rem;" class="text-center">Out of contROLL! (on itch.io)</p>

                                                                    </div>

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

            <div class="row">
                <a href="/home/venture/edit/add"
                   class="btn btn-outline-dark glitch-btn text-white mx-2 btn-edit btn-admin mt-5"
                   data-text="Technical demo">Add</a>
            </div>

            
            <div class="col-12 d-flex justify-content-center">
                <a href="/" data-turbo="false" class="glitch-btn text-white m-5"
                   data-text="BACK">Back</a>
            </div>
        </div>
    </template>
</turbo-stream>
