{% extends "layout.html" %}

{% block title %}News{% endblock %}

  {% block content %}
  
<div class="container">
<div class="display-4 text-center mb-0">News</div>
<hr>

	<!-- Popular movie section  -->
       
        {% for article_row in headlines['articles'] | batch(3)%}

	        <div class="row">
	       
		        {% for article in article_row %}

		        	<div class="col-md-4 mb-3">

                    <div class="card">
                     <a href="{{article['url']}}" target="_blank">   <img src="{{article['urlToImage']}}"  class="card-img-top img-thumbnail" alt="{{article['title'] | truncate(20)}}"></a>
                        <div class="card-body">
                        <p class="card-title font-weight-bold text-left"  style="font-size: 12px"> <a href="{{article['url']}}" target="_blank">  {{article['title'] | truncate(150) if article['title'] != None else 'Title Unknown' }} </a></p>
                        <p class="font-weight-light text-left" style="font-size: 10px">{{ article['description'] | truncate(300, True) if article['description'] != None else 'Description Not available for the headlines' }} </p>
                        <a href="{{article['url']}}" class="btn btn-primary btn-sm" target="_blank">Read More</a>   
                                     
                        </div>
                    </div>
             	</div>
			     	
		        {% endfor %}
	        
	        </div>
         
        {% endfor %}
        
	
</div>



    
{% endblock %}