{% extends 'base/main.html' %}
{% load static %}
{% block content %}

<style type="text/css">
    .tag{
        display: inline-block;
        color:#fff;
        background-color: #888;
        border-radius : 6px;
        margin : 2px;
        padding : 2px 5px ;
        font-size: 12px;
    }
    
</style>

<div class="main-container">
    <h1>Posts</h1>
    <div class="post-wrapper">

        {% for post in posts %}

        <div>
            <div class="post">
                <img class="thumbnail" src="{{post.thumbnail.url}}">
                <div class="post-preview">
                    <h6 class="post-title">{{post.headline}}</h6>
                    <p class="post-intro">{{post.sub_headline}}</p>
                    <a href="{% url 'post' post.slug %}">Read More</a>

                    {% if request.user.is_authenticated %}
                    
                    | <a href="{% url 'update_post' post.slug %}">Edit</a>
                    | <a href="{% url 'delete_post' post.slug %}">Delete</a>
                    {% endif %}


                    <hr>
                    {% for tag in post.tags.all %}
                        <span class="tag">{{tag}}</span>
                    {% endfor %}
                   
                </div>
            </div>
        </div>
        {% empty %}
            <h3>No posts found....</h3>
        {% endfor %}  
    </div> 
      
</div>

{% endblock content %}