<div id="homepage" v-cloak>

    <img src="/images/hero-bg-1.jpg" alt="I am an image" style="position: absolute; z-index: -99; opacity: 20%;">

    <section id="none" v-if="mainChurch.shortName.length < 1">
        <div class="alert alert-warning fw-bold text-center m-2">
            <h3><%=__(`Welcome`)%> <%=__(`to`)%> Cuidado Cristao</h3>
            <%= __('It sounds like you have never been here before!') ;%> <br>
            <%= __(`If you are a developer, please run the 'cria-dados-para-teste' script.`) ;%> <br>
            <%= __(`If this is the first time you are running it for production, `) ;%> <a class="text-dark-emphasis"
                    href="/faq"><%= __(`Click here`) ;%></a>
        </div>
    </section>

    <div v-if="mainChurch.shortName.length > 0">
        <% /* Somente se os dados iniciais foram carregados */ %>

        <section id="home">

            <div class="container">

                <div class="btn-group">
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#home'"><%= __('Home') ;%></button>
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#service'"><%= __('Services') ;%></button>
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#groups'"><%= __('Groups') ;%></button>
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#sermons'"><%= __('Sermons') ;%></button>
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#social'"><%= __('Social') ;%></button>
                    <button class="btn btn-lg btn-outline-primary m-5"
                            onclick="window.location.href='#contacts'"><%= __('Contacts') ;%></button>
                </div>
            </div>

            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                            class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="display-2 text-center fw-bolder"><%= __('God is good') ;%></div>
                        <div class="text-center">
                            <button class="btn btn-lg btn-outline-primary m-5"
                                    onclick="window.location.href='/map/map-search'"><%= __('Go to') ;%></button>
                        </div>
                        <div class="text-center text-dark-emphasis">
                            <%= __('Visit your local church and become a part of the flock by contributing to the community in any way you possibly can.') ;%>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="display-2 text-center fw-bolder"><%= __('Join the prayer') ;%></div>
                        <div class="text-center">
                            <button class="btn btn-lg btn-outline-primary m-5"
                                    onclick="window.location.href='/map/map-search'"><%= __('Go to') ;%></button>
                        </div>
                        <div class="text-center text-dark-emphasis">
                            <%= __('Visit your local church and become a part of the flock by contributing to the community in any way you possibly can.') ;%>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="display-2 text-center fw-bolder"><%= __('Visit us') ;%></div>
                        <div class="text-center">
                            <button class="btn btn-lg btn-outline-primary m-5"
                                    onclick="window.location.href='/map/map-search'"><%= __('Go to') ;%></button>
                        </div>
                        <div class="text-center text-dark-emphasis">
                            <%= __('Visit your local church and become a part of the flock by contributing to the community in any way you possibly can.') ;%>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                        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="#carouselExampleIndicators"
                        data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden"><%= __('Next') ;%></span>
                </button>
            </div>


            <div class="h-25"></div>

            <div class="card-group mt-5">
                <div style="height: 20rem" class="card text-primary text-center p-3">
                    <div class="display-6"><%= __('Our Community') ;%></div>
                    <hr>
                    <p>
                        <%= mainChurch.ourCommunityText ;%>
                    </p>
                </div>
                <div class="card text-primary text-center p-3">
                    <div class="display-6"><%= __('Church Mission') ;%></div>
                    <hr>
                    <p>
                        <%= mainChurch.churchMissionText ;%>
                    </p>
                </div>
                <div class="card text-primary text-center p-3">
                    <div class="display-6"><%= __('Join a Group') ;%></div>
                    <hr>
                    <p>
                        <%= mainChurch.joinToGroupText ;%>
                    </p>
                </div>
                <div class="card text-primary text-center p-3">
                    <div class="display-6"><%= __('Church Beliefs') ;%></div>
                    <hr>
                    <p>
                        <%= mainChurch.churchBeliefsText ;%>
                    </p>
                </div>
            </div>
        </section>

        <hr>

        <section id="service">

            <div class="display-4 text-center"><%= __('Services') ;%></div>
            <div class="container">
                <div class="card-group">

                    <div class="card m-3">
                        <div class="card-header">
                            <img src="/images/hero-bg-3.jpg" alt=church"" class="card-img">
                        </div>
                        <div class="card-body">
                            <div class="display-6"><%= __('Church Facilities') ;%></div>
                            <ul>
                                <li v-for="facilitie in mainChurch.churchFacilities">{{facilitie}}</li>
                            </ul>
                        </div>
                        <div class="card-footer">
                            <a href="/contact"><%= __('Contact us') ;%></a>
                        </div>
                    </div>

                    <div class="card m-3">
                        <div class="card-header">
                            <img src="/images/hero-bg-3.jpg" alt=church"" class="card-img">
                        </div>
                        <div class="card-body">
                            <div class="display-6"><%= __('Learning') ;%></div>
                            <ul>
                                <li v-for="learning in mainChurch.churchLearnings">{{learning}}</li>

                            </ul>
                        </div>
                        <div class="card-footer">
                            <a href="/contact"><%= __('Contact us') ;%></a>
                        </div>
                    </div>

                    <div class="card m-3">
                        <div class="card-header">
                            <img src="/images/hero-bg-3.jpg" alt=church"" class="card-img">
                        </div>
                        <div class="card-body">
                            <div class="display-6"><%= __('Meetings') ;%></div>
                            <ul>
                                <li v-for="meeting in mainChurch.churchMeetings">{{meeting}}</li>

                            </ul>
                        </div>
                        <div class="card-footer">
                            <a href="/contact"><%= __('Contact us') ;%></a>
                        </div>
                    </div>

                </div>
            </div>

        </section>

        <hr>

        <section id="groups">
            <div class="display-5 text-center"><%= __('Groups') ;%></div>

            <div class="container">
                <div class="card-group">
                    <div class="card m-2">
                        <div class="card-header">
                            <img class="card-img" src="images/divider-img-2.jpg" alt="">
                        </div>
                    </div>
                    <div class="card m-2">
                        <div class="card-body">
                            <p class="display-6">Search for and Join to</p>
                            <ul>
                                <li v-for="classroom in classRooms">{{classroom.name}}</li>
                            </ul>
                            <div class="text-center">
                                <a href="/classe/search-classe" class="btn btn-primary"><%= __('Join us') ;%></a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <hr>

        <section id="sermons">

            <div class="display-5 text-center"><%= __('Sermons') ;%></div>
            <div class="card-group mt-2">
                <div class="card" v-for="sermon in sermons">
                    <div class="card-body">
                        <iframe width="560" height="315"
                                :src="sermon.videoUrl"
                                :title="sermon.titulo" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                allowfullscreen></iframe>
                    </div>
                    <div class="card-footer">
                        <em class="text-muted">{{sermon.comentario}}</em>
                        <a href="https://www.youtube.com/watch?v=oxmA4NtqR7s" target="_blank"><%= __('Go to') ;%></a>
                    </div>
                </div>

            </div>

        </section>

        <hr>

        <section id="social">

            <div class="display-5 text-center"><%= __('Social') ;%></div>
            <div class="card-group mt-2 container">
                <div class="card card-body m-2">
                    <div class="display-6"><%= __('We help our neighborhood with') ;%></div>
                    <ul>
                        <li v-for="social in socialServices">{{social.nome}}</li>
                    </ul>

                    <a class="btn btn-primary" href="/social/social-search"><%= __('Go to') ;%></a>
                </div>
                <div class="card card-body m-2">
                    <img src="/images/divider-img.jpg" alt="social">
                </div>
            </div>

        </section>

        <hr>

        <section id="contacts">

            <div class="display-5 text-center"><%= __('Contact') ;%></div>

            <div class="container">
                <p class="display-6 text-dark-emphasis">
                    <%= __('We really appreciate hearing from you about needs and worriers. Contact us ') ;%>
                </p>
            </div>

        </section>

    </div>
</div>

<div class="fixed-bottom text-end p-5 m-5">
    <a href="#home">
        <em class="fa fa-home border-1 border border-primary p-3"></em>
    </a>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser(); %>
