{% extends "_layout/main" %}

{% block main %}


<!-- wrapper -->    
<div id="wrapper">

          <div class="container">
            <div class="row">

              <div class="col-lg-3 col-md-4 mizio-padding-right">
  
                {# Create a category query with the 'group' parameter #}
                {% set myCategoryQuery = craft.categories().group('kategorie') %}
                
                {# Fetch the categories #}
                {% set categories = myCategoryQuery.all() %}
              
                
                {# Display the navigation #}
                
                <!-- filter -->
                <div class="blogFilter text-center">
                    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">Alles</div>  
                    {% nav category in categories %}
                      <div data-filter=".{{ category.title }}" style="margin-top:10px" class="cbp-filter-item">{{ category.title }}
                      {# Get the count of entries related to `category` #}
                      {% set entryCount = craft.entries.relatedTo(category).total() %}  
                        <span class="portfolio-count">{{ entryCount }}</span>
                          <ul> 
                            {% ifchildren %}
                              {% children %}
                            {% endifchildren %}
                          </ul>
                    </div>
                    {% endnav %}                           
                </div>
                <!-- /filter -->

              </div>

            <div class="col-lg-9 col-md-8">

                <div id="grid-blog" class="cbp">

                 <!-- post 1 -->
                {# Loop through all of the Work section entries #}
                {% for postEntry in craft.entries.section('newsPosts').all() %} 
                {% set relatedCategories = postEntry.postKategorie %}
                  <div class="cbp-item {% for rel in relatedCategories %} {{ rel.title }} {% endfor %}">
                     <article class="post">
                         <div class="entry-header">
                            <div class="post-intro">
                               <a href="{{ postEntry.url }}">
                                  <div class="image-box circle-drag" data-circle="js-circle-1">
                                     <div class="mizio-circle js-circle-1"><span>NEU!</span></div>
                                    {% set image = postEntry.featuredImage.inReverse().one() %}
                                      {% if image %}
                                     <img src="{{ image.getUrl('featuredImage') }}" alt="{{ image.title }}">
                                  {% endif %}
                                 </div>
                               </a>
                            </div>
                            <div class="post-details">
                              {% set relatedCategories = postEntry.postKategorie %}
                               <div class="post-categories">
                                    {% for rel in relatedCategories %} 
                                      {{ rel.title }} <span>—</span>
                                    {% endfor %} 
                               </div>
                               <div class="post-date">
                                  gepostet am: {{ postEntry.postDate | date("d. M, Y") }}
                               </div>
                            </div>
                            <h2 class="entry-title">
                               <a href="{{ postEntry.url }}" rel="bookmark">{{ postEntry.headline }}</a>
                            </h2>
    
                            <div class="post-info">
                               <p>{{ postEntry.textContent }}</p>
                               <div class="post-button">
                                  <a href="{{ postEntry.url }}">Read More <span class="arrow"></span></a>
                               </div>
                            </div>
                         </div>
                     </article>
                  </div>
                {% endfor %}  
                 <!-- /post 1 -->

            </div>


            <!-- ajax load button -->
            {# <div class="blog-load-more text-center">
                <a href="ajax-portfolio/blog-loadMore.html" class="cbp-l-loadMore-link" rel="nofollow">
                    <span class="cbp-l-loadMore-defaultText">More</span>
                    <span class="cbp-l-loadMore-loadingText"></span>
                    <span class="cbp-l-loadMore-noMoreLoading">No more</span>
                </a>
            </div> #}
            <!-- /ajax load button -->
                  
            </div>
                

            </div>
          </div>

</div>
<!-- /wrapper -->  




{% endblock %}