{% if postos | length > 0 %}
    {% for posto in postos %}
        <div class="row">
            {% if posto.root_post %}
            <div class="card s5 deep-orange accent-4 darken-1">
            {% else %}
            <div class="card s5 blue-grey darken-1">
            {% endif %}
            
                <div class="card-content white-text">
                    <span class="new badge yellow" data-badge-caption="">
                        <a class="purple-text" href="#post-{{ posto._key }}"> #{{ posto._key }} </a>
                    </span>
                    <span class="new badge blue"  data-badge-caption="">Ответов: {{ posto.answers_num }}</span>
                    <span class="new badge red"   data-badge-caption="">Длина треда: {{ posto.children_num }}</span>
                </div>
                <div class="row" id="post-{{ posto._key }}">
                        
                    {% if posto.images[0] | length > 0 %} 
                    <div class="col s4">
                        <div class="card-image">
                            <!-- <div class="hex-main">
                                <div class="hex-container">
                                    <a href="https://loremflickr.com/g/320/240/paris"  target="_blank" "> 
                                        <img src="https://loremflickr.com/g/320/240/paris">
                                    </a>
                                </div>
                            </div>  -->
                            <div class="card-image" style=" margin:10px; ">
                              <img src="https://loremflickr.com/g/320/240/paris">
                              <span class="card-title"><a class="link" href="#post-{{ posto.parent_post }}"> >>{{ posto.parent_post }} </a> </span>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    <!-- <div class="col s8">
                        <div class="card-content white-text">
                            <span class="card-title">#{{ posto._key }}
                                <span class="new badge blue"  data-badge-caption="">Ответов: {{ posto.answers_num }}</span>
                                <span class="new badge red"   data-badge-caption="">Длина треда: {{ posto.children_num }}</span>
                            </span>
                            
                            {% if posto.parent_post %} 
                            <a class="link orange-text purple" href="#post-{{ posto.parent_post }}"> >>{{ posto.parent_post }} </a> 
                            {% endif %}
                            <p>{{ posto.texto }}</p> 
                        </div>
                    </div> -->
                    <div class="col s12  card-content white-text">
                        <p>{{ posto.texto }}</p> 
                        <div class="card-action right">
                            <!-- <a href="#" hx-post="/post_my_post/{{ posto._key }}" hx-target="#neu-posts" >Answer me!</a>  -->
                            <a href="#answer-post" hx-post="/answer_post/{{ posto._key }}" hx-target="#answer-post" >Ответить этому.</a> 
                        </div>
                    </div>
                    <div class="col s12  card-content white-text">
                        <!-- TODO !подгрузка следующего поста в конец треда без перезагрузки всего треда! -->
                        <div class="left">
                            <!-- <a href="#" hx-post="/post_my_post/{{ posto._key }}" hx-target="#neu-posts" >Answer me!</a>  -->
                            {% if posto.answers_list[0] | length > 0 %} 
                            <p>Ответы:</p> 
                            {% for ans in posto.answers_list[0] %} 
                                {% if (posto.answers_list[1])[loop.index-1] > 0 %}  
                                    {% if (posto.answers_list[2])[loop.index-1] > 0 %} 
                                        <a href="#post-{{ (posto.answers_list[0])[loop.index-1] }}" class="lime-text red collection-item" style="padding: 2px 2px;">>>{{ (posto.answers_list[0])[loop.index-1] }} (ответов {{ (posto.answers_list[1])[loop.index-1] }}, длина {{ (posto.answers_list[2])[loop.index-1] }})</a>
                                    {% else %}
                                        <a href="#post-{{ (posto.answers_list[0])[loop.index-1] }}" class="lime-text red collection-item" style="padding: 2px 2px;">>>{{ (posto.answers_list[0])[loop.index-1] }} (ответов {{ (posto.answers_list[1])[loop.index-1] }})</a>
                                    {% endif %} 
                                {% else %}
                                    <a href="#post-{{ (posto.answers_list[0])[loop.index-1] }}" class="lime-text red collection-item" style="padding: 2px 2px;">>>{{ (posto.answers_list[0])[loop.index-1] }}</a>
                                {% endif %} 
                            {% endfor %} 
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    {% endfor %}
{% endif %}