<?php /* Template Name: Front Page Template */ get_header(); 
include get_template_directory() . '/inc/menus/menu.php';
?>
		<main role="main">
		 <?php
        include get_template_directory() . '/inc/slides/ken-burns-slides.php';
        ?>

			<section>
		<?php if (have_posts()): while (have_posts()) : the_post(); ?>

			<!-- article -->
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

				<?php the_content(); ?>
		<section class="ngo_media">
		    <div class="container">
		        <div class="row">
		            <div class="col-md-12"><h1>MEDIA CENTRE</h1></div>
		        </div><!-- title row !-->
		        <div class="row">
		            <div class="col-md-12 col-sm-12 col-12">
                        <ul class="nav nav-pills flex-column flex-sm-row" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="flex-sm-fill text-sm-center nav-link descr">Select a Tab <i class="bi bi-arrow-right"></i></a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="flex-sm-fill text-sm-center nav-link active" id="news-tab" data-bs-toggle="pill" href="#news-tab-pane" role="tab" aria-controls="news-tab-pane" aria-selected="true">Latest News</a>
                            </li><!-- News Tab !-->
                            <li class="nav-item" role="presentation">
                                <a class="flex-sm-fill text-sm-center nav-link" id="events-tab" data-bs-toggle="pill" href="#events-tab-pane" role="tab" aria-controls="events-tab-pane" aria-selected="false">Upcoming Events</a>
                            </li><!-- Events Tab !-->
                            
                            <li class="nav-item" role="presentation">
                                <a class="flex-sm-fill text-sm-center nav-link" id="social-tab" data-bs-toggle="pill" href="#social-tab-pane" role="tab" aria-controls="social-tab-pane" aria-selected="false">Social Media</a>
                            </li><!-- Social Tab !-->
                        </ul><!-- End Tabs !-->
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active py-3" id="news-tab-pane" role="tabpanel" aria-labelledby="news-tab">
                                <?php
                                 include get_template_directory() . '/inc/news_front.php'; 
                                 ?>
                            </div><!-- News Display !-->
                            <div class="tab-pane fade p-2" id="events-tab-pane" role="tabpanel" aria-labelledby="events-tab">
                                 <?php
                                 include get_template_directory() . '/inc/events_front.php'; 
                                 ?> 
                            </div><!-- Events Display !-->
                            <div class="tab-pane fade p-2" id="social-tab-pane" role="tabpanel" aria-labelledby="social-tab">
                                <div class="row">
                                    <div class="col-lg-7 col-md-7 col-sm-8">
                                        <iframe width="100%" height="415" src="https://www.youtube.com/embed/2YaVai-Kk18?si=TjCkd5BSz3RRbUUD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                                    </div><!-- Youtube Div !-->
                                    <div class="col-lg-5 col-md-5 col-sm-4">
                                        <a class="twitter-timeline"  data-height="400" href="https://twitter.com/ngoforum?ref_src=twsrc%5Etfw">Tweets by ngoforum</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
                                    </div><!-- X Feed !-->
                                </div><!-- row !-->
                                
                            </div><!-- Social media Display !-->
                        </div><!-- Flex Tab Content Display Div !-->
		            </div><!-- Tabs Col !-->
		        </div><!-- Tabs Row !-->
		    </div><!-- container !-->
		</section><!-- news !-->
		<section class="newsletter">
		    <div class="container">
		        <div class="row newsletter-form">
		            <div class="col text-center">
		                <h1>STAY UPDATED</h1>
		                <p class="newsletter-desc">Signup for our newsletter to stay updated on the latest news and events.</p>
		                <form method="POST" action="#">
		                    <div class="row g-2"style="width:55%;margin:0 auto">
		                        <div class="col-sm-5">
		                            <input type="text" class="form-control" name="name" placeholder="First Name & Last Name"/>
		                        </div>
		                        <div class="col-sm-5">
		                            <input type="email" class="form-control" name="email" placeholder="Email Address" required/>
		                        </div>
		                        <div class="col-sm-2">
		                            <button type="submit" class="btn btn-info">Submit</button>
		                        </div>
		                    </div>
		                </form>
		            </div>
		        </div><!-- Row !-->
		    </div><!-- container !-->
		</section><!-- Newsletter !-->

	</article>
			<!-- /article -->

		<?php endwhile; ?>

		<?php else: ?>

			<!-- article -->
			<article>

				<h2><?php _e( 'Sorry, nothing to display.', 'kipya' ); ?></h2>

			</article>
			<!-- /article -->

		<?php endif; ?>
		</section>
		<span class="clear">
			<?php edit_post_link(); ?>
    </main> <!-- Main Area !-->
<?php get_footer(); ?>

