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

{% block title %}{{ product.name }}{% endblock %}

{% block body %}
    {# TODO: dokoncit breadcrumbs #}
    {#
    <div class="container">
        <section class="page-top">
            <div class="col-lg-12">
                <ul class="breadcrumb">
                    <li><a href="homepage.html">Buyfree.cz </a></li>
                    <li><a href="category.html"> Elektronika</a></li>
                    <li><a href="category2.html">Televizory</a></li>
                    <li><a class="active" href="product-detail">Sony Bravia KD-55XF7005</a></li>
                </ul>
            </div>
        </section>
    </div>
    #}

    <section class="productdetail">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="productdetail__imgwrapper">
                        <div class="slider1 js_percentage">
                            <div class="frame js_frame">
                                <ul class="slides js_slides"
                                    style="transition-duration: 0ms; transform: translateX(-530px);">
                                    <li class="js_slide">
                                        <div class="productdetail__img">
                                            <img src="{{ asset('build/images/product27.png') }}" alt="">
                                        </div>
                                    </li>
                                    <li class="js_slide active">
                                        <div class="productdetail__img">
                                            <img src="{{ asset('build/images/product29.png') }}" alt="">
                                        </div>
                                    </li>
                                    <li class="js_slide">
                                        <div class="productdetail__img">
                                            <img src="{{ asset('build/images/product28.png') }}" alt="">
                                        </div>
                                    </li>
                                    <li class="js_slide">
                                        <div class="productdetail__img"><img src="{{ asset('build/images/images/product27.png') }}" alt="">
                                        </div>
                                    </li>
                                    <li class="js_slide">
                                        <div class="productdetail__img"><img src="{{ asset('build/images/images/product29.png') }}" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <span class="js_prev prev"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                                                            viewBox="0 0 501.5 501.5"><g><path fill="#2E435A"
                                                                                               d="M302.67 90.877l55.77 55.508L254.575 250.75 358.44 355.116l-55.77 55.506L143.56 250.75z"></path></g></svg></span><span
                                class="js_next next"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                                                          viewBox="0 0 501.5 501.5"><g><path fill="#2E435A"
                                                                                             d="M199.33 410.622l-55.77-55.508L247.425 250.75 143.56 146.384l55.77-55.507L358.44 250.75z"></path></g></svg></span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="productdetail__detail"><h2 class="productdetail__detail--heading">{{ product.name }}</h2>
                        <div class="productdetail__ratingbox">
                            <div class="starrating">
                                <div class="star active"></div>
                                <div class="star active"></div>
                                <div class="star active"></div>
                                <div class="star active"></div>
                                <div class="star"></div>
                            </div>
                            <p> 98%</p><a href="#">Přidat recenzi</a></div>
                        <div class="productdetail__box">
                            <div class="row">
                                <div class="col-md-3 col-sm-6"></div>
                                <div class="col-md-3 col-sm-6">
                                    <div class="productdetail__box--text"><h5>CENA</h5>
                                        <p> 14 560 Kč</p>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6"></div>
                                <div class="col-md-3 col-sm-6">
                                    <input class="btn btn--secondary-width" type="submit"
                                                                      value="Porovnat ceny">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="auction">
        <div class="auction__navigation">
            <div class="container">
                <ul>
                    <li> <a class="active" href="#">OSTATNÍ AUKCE </a></li>
                    <li> <a href="#">POPIS VÝROBKU   </a></li>
                    <li> <a href="#">HODNOCENÍ</a></li>
                </ul>
            </div>
        </div>
        {# content #}
        <div class="auction__content">
            <div class="container">
                <div class="auction__content-sm">
                    <div class="textblock">
                        <h2>Popis výrobku </h2>
                        <p class="textblock--maintext">
                            {{ product.description }}
                        </p>
                        <h3> Parametry produktu </h3>
                        <div class="textblock__table">
                            {% for productParameter in product.productParameters %} }}
                                <div class="textblock__table--item">
                                    <h5>{{ productParameter.name }}</h5>
                                    <p>{{ productParameter.value }}</p>
                                </div>
                            {% endfor %}
                            {# len pre ukazku #}
                            <div class="textblock__table--item">
                                <h5>Barva</h5>
                                <p>Černá</p>
                            </div>
                            {# len pre ukazku #}
                        </div>
                    </div>
                    {# TODO: dokoncit galeriu #}
                    {# gallery #}
                    {% include('frontend/product/partials/gallery.html.twig') %}
                </div>
            </div>
        </div>
    </section>
    {# rating #}
    <section class="rating">
        <div class="container">
            <div class="rating__content-md">
                <h2 class="heading-sm-slim rating__heading">Hodnocení</h2>
                <div class="rating__box">
                    <div class="row">
                        <div class="col-lg-4 col-md-4">
                            <div class="rating__content">
                                <div class="rate"> <input id="star5" type="radio" name="rate" value="5" /><label for="star5" title="text">5 stars</label><input id="star4" type="radio" name="rate" value="4" /><label for="star4" title="text">4 stars</label><input id="star3" type="radio"
                                                                                                                                                                                                                                                                      name="rate" value="3" /><label for="star3" title="text">3 stars</label><input id="star2" type="radio" name="rate" value="2" /><label for="star2" title="text">2 stars</label><input id="star1" type="radio" name="rate" value="1"
                                    /><label for="star1" title="text">1 star</label></div>
                                <h5>0%</h5>
                                <p> 0 uživatelských recenzií</p>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-8">
                            <div class="rating__content">
                                <div class="rating__rating">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="rating__rating--side">
                                                <div class="star active"></div>
                                                <div class="star active"> </div>
                                                <div class="star active"> </div>
                                                <div class="star active"> </div>
                                                <div class="star active"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="rating__rating--middle">
                                                <div class="bar-container">
                                                    <div class="bar bar-1" style="width: 0"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="rating__rating--right">
                                                <p>0x</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rating__rating">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="rating__rating--side">
                                                <div class="star active"></div>
                                                <div class="star active"> </div>
                                                <div class="star active"> </div>
                                                <div class="star active"> </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="rating__rating--middle">
                                                <div class="bar-container">
                                                    <div class="bar bar-2" style="width: 0"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="rating__rating--right">
                                                <p> 0x</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rating__rating">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="rating__rating--side">
                                                <div class="star active"></div>
                                                <div class="star active"> </div>
                                                <div class="star active"> </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="rating__rating--middle">
                                                <div class="bar-container">
                                                    <div class="bar bar-3"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="rating__rating--right">
                                                <p> 0x</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rating__rating">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="rating__rating--side">
                                                <div class="star active"></div>
                                                <div class="star active"> </div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="rating__rating--middle">
                                                <div class="bar-container">
                                                    <div class="bar bar-4"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="rating__rating--right">
                                                <p> 0x</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="rating__rating">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="rating__rating--side">
                                                <div class="star active"></div>
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="rating__rating--middle">
                                                <div class="bar-container">
                                                    <div class="bar bar-5" style="width: 0"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="rating__rating--right">
                                                <p>0x</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-12 d-flex sm-justify-end sm-center">
                            <div class="rating__content"> <input class="btn btn--secondary-width" type="submit" value="PŘIDAT RECENZI" /></div>
                        </div>
                    </div>
                </div>
                <div class="rating__comments">
                    <div class="rating__comments--comment">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="rating__comments--content"> <a href="#"> PetrPan</a>
                                    <div class="starrating">
                                        <div class="star active"></div>
                                        <div class="star active"></div>
                                        <div class="star active"></div>
                                        <div class="star active"> </div>
                                        <div class="star"></div>
                                    </div><span>   8.listopadu 2019</span></div>
                            </div>

                            {% for productReview in product.reviews %}
                            <div class="col-md-8">
                                <div class="rating__comments--content">
                                    <p class="rating__comments--positive">{{ productReview.positive_text }}</p>
                                    <p class="rating__comments--negative">{{ productReview.negative_text }}</p>
                                </div>
                            </div>
                            {% endfor %}
                            {# len na ukazku #}
                            <div class="col-md-8">
                                <div class="rating__comments--content">
                                    <p class="rating__comments--positive"> Lorem ipsum dolor sit amet, consectur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio.</p>
                                    <p class="rating__comments--negative"> eiusmod tempor incidunt ut labore</p>
                                </div>
                            </div>
                            {# end len na ukazku #}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}