{% extends 'base.html.twig' %}

{% block content %}

    <section class="ab-info-main py-md-5 py-5">
        <div class="container py-md-5 py-5">
            <div class="ab-info-grids pt-md-5">
                <div class="contact-info pt-md-5 pt-3 text-center">
                    <h3 class="tittle text-uppercase text-center mb-lg-5 mb-3 inner-tittle inner-tittle"><span class="sub-tittle">Latest Gallery</span>Photos</h3>
                </div>
            </div>

            <div class="row">
                <ul class="nav nav-pills mt-3" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="showall-tab" data-toggle="pill" href="#showall" role="tab" aria-controls="showall" aria-selected="true">All</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="categorys-tab" data-toggle="pill" href="#categorys" role="tab" aria-controls="categorys" aria-selected="false">Community Service</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="Tab2-Image-tab" data-toggle="pill" href="#Tab2-Image" role="tab" aria-controls="Tab2-Image" aria-selected="false">Facilities</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="Tab3-Image-tab" data-toggle="pill" href="#Tab3-Image" role="tab" aria-controls="Tab3-Image" aria-selected="false">Sports Festival</a>
                    </li>

                </ul>
            </div>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="showall" role="tabpanel" aria-labelledby="showall-tab">
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter5" data-image="img/home/n1.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n1.jpg" alt="Slog" />
                            </a>
                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter6" data-image="img/home/n2.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n2.jpg" alt="Slog" />
                            </a>
                    </div>
                    <div class="portfolio lost">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter7" data-image="img/home/n3.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n3.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter8" data-image="img/home/n4.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n4.jpg" alt="Slog" />
                            </a>
                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter5" data-image="img/home/n5.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n5.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio lost">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter10" data-image="img/home/n6.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n6.jpg" alt="Slog" />
                            </a>
                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter11" data-image="img/home/n7.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n7.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter12" data-image="img/home/n8.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n8.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio lost">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter13" data-image="img/home/n9.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n9.jpg" alt="Slog" />
                            </a>
                    </div>
                </div>
                <div class="tab-pane fade" id="categorys" role="tabpanel" aria-labelledby="categorys-tab">
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter6" data-image="img/home/n2.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n2.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter7" data-image="img/home/n3.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n3.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter8" data-image="img/home/n4.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n4.jpg" alt="Slog" />
                            </a>

                    </div>
                </div>
                <div class="tab-pane fade" id="Tab2-Image" role="tabpanel" aria-labelledby="Tab2-Image-tab">
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter9" data-image="img/home/n5.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n5.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter11" data-image="img/home/n6.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n6.jpg" alt="Slog" />
                            </a>
                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter12" data-image="img/home/n7.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n7.jpg" alt="Slog" />
                            </a>
                    </div>
                </div>
                <div class="tab-pane fade" id="Tab3-Image" role="tabpanel" aria-labelledby="Tab3-Image-tab">
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter9" data-image="img/home/n8.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n8.jpg" alt="Slog" />
                            </a>

                    </div>
                    <div class="portfolio">
                        <a class="thumbnail" href="#" data-toggle="modal" data-target="#exampleModalCenter6" data-image="img/home/n9.jpg" data-target="#image-gallery">
                                    <img class="categoryd-img img-fluid" src="img/home/n9.jpg" alt="Slog" />
                            </a>

                    </div>
                    
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </section>

    <!-- //portfolio -->
    <!--/model-->
    <div class="modal fade" id="exampleModalCenter5" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n1.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter6" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n2.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter7" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n3.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter8" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n4.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter9" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n9.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter10" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n5.jpg" alt="Slog">
                    </div>
                </div>

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

    <div class="modal fade" id="exampleModalCenter11" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n7.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter12" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n8.jpg" alt="Slog">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModalCenter13" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header text-left">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body pb-3">
                    <div class="login px-4 mx-auto mw-100 gal-img pb-3">
                        <img class="img-fluid col-md-12" src="img/home/n6.jpg" alt="Slog">
                    </div>
                </div>

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

    {% endblock %}