{{ define "product" }}
<section class="breadcrumb-section pb-3 pt-3">
    <div class="container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/products">Products</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ .product.Name}}</li>
        </ol>
    </div>
</section>
<section class="product-page pb-4 pt-4">
    <div class="container">
        <div class="row product-detail-inner">
            <div class="col-lg-6 col-md-6 col-12">
                <div id="product-images" class="carousel slide" data-ride="carousel">
                    <!-- slides -->
                    <div class="carousel-inner">
                        {{ range $i, $productImage := .product.ProductImages }}
                        {{ if eq $i 0 }}
                        <div class="carousel-item active"><img src="{{ $productImage.Path }}" alt="Product 1">
                        </div>
                        {{ else }}
                        <<div class="carousel-item"><img src="{{ $productImage.Path }}" alt="Product 2"></div>
                        {{ end }}
                        {{ end }}
                    </div> <!-- Left right -->
                    <a class="carousel-control-prev" href="#product-images" data-slide="prev"> <span
                            class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next"
                                                                               href="#product-images" data-slide="next">
                    <span class="carousel-control-next-icon"></span> </a><!-- Thumbnails -->
                    <ol class="carousel-indicators list-inline">
                        {{ range $i, $productImage := .product.ProductImages }}
                        {{ if eq $i 0 }}
                        <li class="list-inline-item active"><a id="carousel-selector-{{ $i }}" class="selected"
                                                               data-slide-to="{{ $i }}" data-target="#product-images">
                            <img src="{{ $productImage.Path }}" class="img-fluid"> </a></li>
                        {{ else }}
                        <li class="list-inline-item"><a id="carousel-selector-{{ $i }}" data-slide-to="{{ $i }}"
                                                        data-target="#product-images"> <img
                                src="{{ $productImage.Path }}" class="img-fluid"> </a></li>
                        {{ end }}
                        {{ end }}
                    </ol>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-12">
                <div class="product-detail">
                    <h2 class="product-name">{{ .product.Name }}</h2>
                    <div class="product-price">
                        <span class="price">IDR {{ .product.Price }}</span>
                    </div>
                    {{ if .success }}
                    <div class="alert alert-success">
                        {{ range $i, $msg := .success }}
                        {{ $msg }}<br/>
                        {{ end }}
                    </div>
                    {{ end }}
                    {{ if .error }}
                    <div class="alert alert-danger">
                        {{ range $i, $msg := .error }}
                        {{ $msg }}<br/>
                        {{ end }}
                    </div>
                    {{ end }}
                    <div class="product-short-desc">
                        <p>{{ .product.ShortDescription }}</p>
                    </div>
                    <div class="product-select">
                        <form method="POST" action="/carts">
                            <input type="hidden" name="product_id" value="{{ .product.ID }}"/>
                            <div class="row">
                                <div class="col-md-3">
                                    <input type="number" name="qty" class="form-control" value="1"/>
                                </div>
                                <div class="col-md-5">
                                    <button type="submit" class="btn btn-primary btn-block">Add to Cart</button>
                                </div>
                                <div class="col-md-4">
                                    <a href="#" class="btn btn-secondary"><i class="fa fa-heart-o"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--
                    <div class="product-categories">
                        <ul>
                            <li class="categories-title">Categories :</li>
                            <li><a href="#">fashion</a></li>
                            <li><a href="#">electronics</a></li>
                            <li><a href="#">toys</a></li>
                            <li><a href="#">food</a></li>
                            <li><a href="#">jewellery</a></li>
                        </ul>
                    </div>
                    -->
                    <!--<div class="product-tags">
                        <ul>
                            <li class="categories-title">Tags :</li>
                            <li><a href="#">fashion</a></li>
                            <li><a href="#">electronics</a></li>
                            <li><a href="#">toys</a></li>
                            <li><a href="#">food</a></li>
                            <li><a href="#">jewellery</a></li>
                        </ul>
                    </div>
                    -->
                    <!--
                    <div class="product-share">
                        <ul>
                            <li class="categories-title">Share :</li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        </ul>
                    </div>
                    -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="product-details">
                    <div class="nav-wrapper">
                        <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab"
                                   href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1"
                                   aria-selected="true">Beschreibung</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab"
                                   href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2"
                                   aria-selected="false">Reviews</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel"
                                     aria-labelledby="tabs-icons-text-1-tab">
                                    <p>{{ .product.Description }}</p>
                                </div>
                                <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel"
                                     aria-labelledby="tabs-icons-text-2-tab">
                                    <div class="review-form">
                                        <h3>Write a review</h3>
                                        <form>
                                            <div class="form-group">
                                                <label>Your Name</label>
                                                <input type="text" class="form-control"/>
                                            </div>
                                            <div class="form-group">
                                                <label>Your Review</label>
                                                <textarea cols="4" class="form-control"></textarea>
                                            </div>
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}