{% extends "master.html" %}
{% load static %}

{% block title %}
Home
{% endblock%}

{% block content %}
<div class="container-lg text-center my-3 p-3 rounded-1" style="background-color: rgb(206, 221, 240);">
    <h3 class="section-title">List Of Blog Categories</h3>
    <div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3">
        {% for category in categories %}
        <div class="col">
            <div class="card mx-auto my-3" style="width: 18rem;">

                <div class="card-body">
                    <h5 class="card-title">{{category.title}}</h5>
                    <p class="card-text">{{category.description|safe}}</p>
                    <p class="card-text">Number of articles: <span class="badge bg-primary rounded-pill">
                            {{category.posts.count }}</span></p>
                    <a href="{% url 'blog:category_posts' category.id %}" class="btn btn-success">
                        View articles
                    </a>

                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}