<head>
    <style>
        .carousel-inner {
            height: 500px;
            border: solid 2px black;
            border-radius: 15px;
        }

        .carousel-image {
            width: 500px;
            height: 500px;
            object-fit: cover;
        }

        .text-overlay {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            /* Fundo preto com 50% de transparência */
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-size: 25px;
        }

        body {
            min-height: 100vh;
            overflow-x: hidden;
        }
    </style>
</head>

<div class="d-flex gap-3 container my-5">

    <aside>
        <ul class="list-group list-group-flush m" id="editais">
            <span class="list-group-item rounded-top" style="background-color: #64375E; color: white;">
            </span>
            <li class="list-group-item list-group-item-secondary rounded-bottom" aria-current="true">
                <h5><b>Editais recentes</b></h5>
            </li>
            <% if (editais.length===0) { %>
                <li class="list-group-item">
                    <p>Nenhum edital encontrado</p>
                </li>
            <% } else { %>
                <% for (let i = 0; i < editais.length; i++) { %>
                    <% if (i > 6) { %>
                        <li class="list-group-item list-group-item-secondary rounded-top" aria-current="true">
                            <h6><a href="/edital" style="color: black; text-decoration: none; cursor: pointer;">Acesse outros editais <i class="bi bi-arrow-right"></i></a></h6>
                        </li>
                        <ul class="list-group list-group-flush m">
                            <span class="list-group-item rounded-bottom"
                                style="background-color: #64375E; color: white;">
                            </span>
                        </ul>
                        <% break; %>
                    <% } %>
                    <li class="list-group-item">
                        <p> Edital n° <%= editais[i].id %>
                        </p>
                    </li>
                <% } %>
            <% } %>
        </ul>
    </aside>
    <div class="container w-75 mx-1">
        <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
            <p class="text-center h2 mb-3 rounded shadown-md"
                style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; background-color: #64375E; color: white; padding: 5px;">Destaques</p>
    
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://s2.glbimg.com/j9IPxkwSEAQK9wYk47z924XIsRo=/e.glbimg.com/og/ed/f/original/2020/09/15/img_0471_1.jpg"
                        class="d-block w-100 carousel-image" alt="...">
                    <div class="text-overlay">Homem ganha premio de artista do ano no paraná</div>
                </div>
                <div class="carousel-item">
                    <img src="https://s2-g1.glbimg.com/FhhRfdJUMIIDIFSH5M-HDLSxerE=/0x0:2500x1667/924x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2022/N/K/zcl28bQ1WCI0F00hPOHw/mita-2022-luedji-luna-220514-ariel-676.jpg"
                        class="d-block w-100 carousel-image" alt="...">
                    <div class="text-overlay">Mulher ganha premio de cantora do ano no paraná</div>
                </div>
                <div class="carousel-item">
                    <img src="https://portalsoteropreta.com.br/wp-content/uploads/2024/02/Dja-Luz-credito_-Tacio-Moreira_Easy-Resize.com_.jpg"
                        class="d-block w-100 carousel-image" alt="...">
                    <div class="text-overlay">Cantor de rock viraliza nas redes</div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>
<script>

</script>