{{ define "home" }}
<section class="slider-section pt-4 pb-4">
    <div class="container">
        <div class="slider-inner">
            <div class="row">
                <div class="col-md-3">
                    <nav class="nav-category">
                        <h2>Spiele</h2>
                        <ul class="menu-category">
                            {{ range $i, $section := .sectionen }}
                            <li><a href="/section/{{ $section.ID }}">{{ $section.Name }}</a></li>
                            {{ end }}
                        </ul>
                    </nav>
                </div>
                <div class="col-md-9">
                    <div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
                        <ol class="carousel-indicators">
                            {{ range $i, $section := .sectionen }}
                            <li data-target="#carouselExampleIndicators" data-slide-to="{{ $i }}" {{ if eq $i 0 }} class="active" {{ end }} ></li>
                            {{ end }}
                        </ol>
                        <div class="carousel-inner shadow-sm rounded">

                            {{ range $i, $section := .sectionen }}
                            <div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
                                <img class="d-block w-100" src="/public/img/slides/slide1.jpg" alt="First slide">
                                <div class="carousel-caption d-none d-md-block">
                                    <h5>{{ $section.Name }}</h5>
                                </div>
                            </div>
                            {{ end }}
                        </div>
                    </div>
                    <!-- End Slider -->
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services -->
<section class="pt-5 pb-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="media">
                    <div class="iconbox iconmedium rounded-circle text-info mr-4">
                        <i class="fa fa-truck"></i>
                    </div>
                    <div class="media-body">
                        <h5>Schnelles Versenden</h5>
                        <p class="text-muted">
                            All Ihre Sachen werden Schnell versendet, besser als bei Michael Brauer
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="iconbox iconmedium rounded-circle text-purple mr-4">
                        <i class="fa fa-credit-card-alt"></i>
                    </div>
                    <div class="media-body">
                        <h5>Online Payment</h5>
                        <p class="text-muted">
                            All you have to do is to bring your passion. We take care of the rest.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="media">
                    <div class="iconbox iconmedium rounded-circle text-warning mr-4">
                        <i class="fa fa-refresh"></i>
                    </div>
                    <div class="media-body">
                        <h5>Free Return</h5>
                        <p class="text-muted">
                            All you have to do is to bring your passion. We take care of the rest.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End Services -->
<section class="products-grids trending pb-4">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-title">
                    <h2>Tolle Sachen</h2>
                </div>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                <div class="single-product">
                    <div class="product-img">
                        <a href="product-detail.html">
                            <img src="https://lastdraw.s3.amazonaws.com/files/images/shop/products/large/c61021b14fc3677d1638c4d938281b29.jpg" class="img-fluid" />
                        </a>
                    </div>
                    <div class="product-content">
                        <h3><a href="product-detail.html">Cool &amp; Awesome Item</a></h3>
                        <div class="product-price">
                            <span>$57.00</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                <div class="single-product">
                    <div class="product-img">
                        <a href="product-detail.html">
                            <img src="https://lastdraw.s3.amazonaws.com/files/images/shop/products/large/1ca7bb03d921c58576cd9cac69f75fa5.jpg" class="img-fluid" />
                        </a>
                    </div>
                    <div class="product-content">
                        <h3><a href="product-detail.html">Cool &amp; Awesome Item</a></h3>
                        <div class="product-price">
                            <span>$57.00</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                <div class="single-product">
                    <div class="product-img">
                        <a href="product-detail.html">
                            <img src="https://lastdraw.s3.amazonaws.com/files/images/shop/products/medium/f3df570535e6908a964e0efecde6a5ea.jpg" class="img-fluid" />
                        </a>
                    </div>
                    <div class="product-content">
                        <h3><a href="product-detail.html">Cool &amp; Awesome Item</a></h3>
                        <div class="product-price">
                            <span>$57.00</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                <div class="single-product">
                    <div class="product-img">
                        <a href="product-detail.html">
                            <img src="https://lastdraw.s3.amazonaws.com/files/images/shop/products/medium/df2f282af73cd672ac1d97709b576328.jpg" class="img-fluid" />
                        </a>
                    </div>
                    <div class="product-content">
                        <h3><a href="product-detail.html">Cool &amp; Awesome Item</a></h3>
                        <div class="product-price">
                            <span>$57.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--<section class="mobile-apps pt-5 pb-3 border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3>Download apps</h3>
                <p>Get an amazing app to make Your life easy</p>
            </div>
            <div class="col-md-6 text-md-right">
                <a href="#"><img src="/public/img/appstore.png" height="40"></a>
                <a href="#"><img src="/public/img/appstore.png" height="40"></a>
            </div>
        </div> <!-- row.// -->
    <!--</div><!-- container // -->
<!--</section>-->
{{ end }}