{% set comments = __SELF__.comments %}
<!-- Breadcumb Area -->
<div class="breadcumb_area">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <h5>Teswirlerim</h5>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
                    <li class="breadcrumb-item active">Teswirler</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- Breadcumb Area -->

<!-- Wishlist Table Area -->
<div class="wishlist-table section_padding_100 clearfix">
    <div class="container">
    
    {% if comments.count() == 0 %}
        <div class="container mb-5">
            <div class="row d-block justify-content-center align-items-center">
                <div class="col-6 d-block mx-auto">
                   <div class="text-center">
                      <img src="{{ 'assets/img/core-img/no-products.png'|theme }}" alt="Gurluşyk, Gurluşyk platform, bezeg gurluşyk, gipsler merkezi">
                  </div>
                </div>
                <div class="col-6 d-block mx-auto">
                   <div class="text-center">
                      <p>Şu wagtlykça teswir ýok</p>
                  </div>
                </div>
              </div>
        </div>
    {% else %}
        <div class="row">
            <div class="col-12">
                <div class="cart-table wishlist-table">
                    <div class="table-responsive">
                        <table class="table table-bordered mb-30">
                            <thead>
                                <tr>
                                    <th scope="col">Surat</th>
                                    <th scope="col">Haryt ady</th>
                                    <th scope="col">Teswir</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>

                                {% for comment in comments %}
                                    <tr>
                                        <td>
                                            <a href="{{ 'product'|page({id: comment.product.id}) }}">
                                                <img src="{{ comment.product.images[0].thumb(60,60, { mode: 'crop' }) }}" alt="Product">
                                            </a>
                                        </td>
                                        <td>
                                            <a href="{{ 'product'|page({id: comment.product.id}) }}">{{ comment.product.name }}</a>
                                        </td>
                                        <td>
                                            {{ comment.comment }} |

                                            <i class="fa fa-star {{ (comment.rating == 1 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                            <i class="fa fa-star {{ (comment.rating == 2 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                            <i class="fa fa-star {{ (comment.rating == 3 or comment.rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                            <i class="fa fa-star {{ (comment.rating == 4 or comment.rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                            <i class="fa fa-star {{ (comment.rating == 5 or comment.rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                        </td>
                                        <td><a href="{{ 'product'|page({id: comment.product.id}) }}" class="btn btn-primary btn-sm">Harydy görmek</a></td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>


                        {% if comments.hasPages %}
                            <div class="shop_pagination_area mt-30">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination pagination-sm justify-content-center">
                                        {% if comments.currentPage > 1 %}
                                            <li class="page-item"><a class="page-link" href="{{ comments.previousPageUrl }}">Öňki</a></li>
                                        {% endif %}

                                        {% for page in range(1, comments.lastPage) %}
                                            <li class="page-item"><a class="page-link" href="{{ comments.url(page) }}">{{ page }}</a></li>
                                        {% endfor %}

                                        {% if comments.lastPage > comments.currentPage %}
                                            <li class="page-item"><a class="page-link" href="{{ comments.nextPageUrl }}">Indiki</a></li>
                                        {% endif %}
                                    </ul>
                                </nav>
                            </div>
                        {% endif %}


                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    </div>
</div>