<%- include('./includes/header.ejs') %>
</head>
<body>
<%- include('./includes/navigation.ejs') %>
    <div class="container">
        <br>
        <div class="card">
            <div class="card-body">
                <div id="carouselExampleCaptions" class="carousel slide">
                    <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                    </div>
                    <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/photos/carousel1.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                        <h3 class="text-success">Stay Healthy, Stay Safe</h3>
                        <p class="text-success">Follow these 8 precausions</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/photos/carousel2.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                        <h3 class="text-success">Stay Cautious, Avoid Close Contact</h3>
                        <p class="text-success">Be strict to get rid of unpleasant consequences</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/photos/carousel3.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block"></div>
                    </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>
       <br>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <% if(announcements.length > 0){ %> 
                        <% for (ann of announcements) { %>
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row g-0">
                                <div class="col-md-4">
                                    <img src="/photos/<%=ann.featured_url%>" class="img-fluid rounded-start" alt="<%=ann.title%>">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title"><%=ann.title%></h5>
                                        <p class="card-text text-truncate"><%=ann.content%></p>
                                        <p class="card-text"><small class="text-body-secondary"><%=ann.publicationDate%></small></p>
                                    </div>
                                </div>
                                </div>
                            </div>
                        <% } %>
                        <% } else { %>
                            <h1 class="text-warning">Nothing is announced till now.</h1>
                        <% } %>
                   </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="card text-bg-warning mb-6">
                                    <div class="card-header">Pandemic information Worldwide</div>
                                    <div class="card-body">
                                        <h5 class="card-title">All Country Cases</h5>
                                        <h6 class="card-title">Date: <%=singleDay.datestr%></h6>
                                        <p class="card-text"><b>Total Confirmed: </b> <%=singleDay.confirmed%></p>
                                        <p class="card-text"><b>Total Death: </b> <%=singleDay.death%></p>
                                        <p class="card-text"><b>Total Recovered: </b> <%=singleDay.recovered %></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <br>
    </div>
<%- include('./includes/footer.ejs') %>