{% include 'header.html' %}
      <div class="mostpopular">

           <div class="container-full">
             <div class="row">
                 <h2>Most Popular Animes</h2>
             </div>
             <div class="row">
                {% for cartoon in cartoons%}
               <div class="cart" style="background-image: url('{{cartoon.image}}');">
                    <a href="/cartoon/{{cartoon.id}}/{{cartoon.name.split|join:'_'| lower}}">
                    <div class="desc">
                      <h3>{{cartoon.name}}</h3>
                      <p>
                        {% if cartoon.name|length|get_digit:"-1" > 20 %}
                            {{cartoon.description|truncatechars:80 }}
                        {% else %}
                            {{cartoon.description|truncatechars:120 }}
                        {% endif %}
                        </p>
                        <button>Learn More</button>
                    </div>
                    </a>

              </div><!--end cart -->
                {% endfor %}
             <div class="row">
               <a href="/category/anime/all" class="viewmore">View all animes <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
             </div>

           </div>





       </div>
      </div>
      <!-- end of most popular -->

      <div class="popularsong">
        <div class="container-full">
             <div class="row">
                 <h3>Best Anime Opening Song videos</h3>
             </div>
             <div class="row">
                {% for cartoon in cartoon_videos %}
                    {% if forloop.first %}
                       <div class="video col-sm-6 v_top1">
                          {% for video in cartoon.videos.all %}
                          <a href="/video/{{video.id}}/{{cartoon.name.split|join:'_'| lower}}">
                             <div class="img" style="background-image: url('{{cartoon.image}}');">
                              <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                             </div>
                             <div class="desc">
                               <h4>{{cartoon.name}}</h4>
                               <p>{{cartoon.description |truncatechars:140 }}</p>
                             </div>
                           </a>
                           {% endfor %}
                       </div>

                    {% endif %}
                {% endfor %}
               <!-- end video -->
               <div class="col-sm-6">
                {% for cartoon in cartoon_videos %}
                    {% if not forloop.first  %}
                     {% for video in cartoon.videos.all %}
                       <div class="video col-sm-6">
                          <a href="/video/{{video.id}}/{{cartoon.name.split|join:'_'| lower}}">
                             <div class="img" style="background-image: url('{{cartoon.image}}');">
                              <i class="fa fa-play-circle-o" aria-hidden="true"></i>
                             </div>
                             <div class="desc">
                               <h4>{{cartoon.name}}</h4>
                               <p>{{cartoon.description | truncatechars:60}}</p>
                             </div>
                           </a>
                       </div>
                       <!-- end video -->
                      {% endfor %}
                     {% endif %}
                {% endfor %}

               </div>
               <div class="row">
                  <a href="/anime/videos" class="viewmore">View all Anime Opening song videos <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
               </div>





             </div>
        </div>
      </div>
      <!-- end of popular song -->
    </div>
    <!-- end of page -->

{% include 'footer.html' %}