{% extends 'base.html' %}

{% block content %}
    <main>
        {% if object_list %}
            {% if category %}
                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">{{ category }} Articles</h3>
                {% if category.introduction %}
                    <div class="flex justify-center mb-4">
                        <p class="sm:w-1/2 lg:w-1/3 mx-8 text-justify">{{ category.introduction }}</p>
                    </div>
                {% endif %}
            {% elif tag %}
                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Articles for tag: {{ tag }}</h3>
            {% else %}
                <h3 class="text-xl sm:text-4xl lg:text-6xl my-4 text-center">Recent Articles</h3>
            {% endif %}
            <hr class="mx-8">
            <div class="grid gap-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 m-8">
                {% for article in object_list %}
                    <div class="pb-8 break-inside-avoid-column">
                        <a class="text-3xl font-semibold hover:text-red-400" href="{{ article.get_absolute_url }}">{{ article.title }}</a>
                        {% if article.subtitle %}
                            <h5 class="text-xl italic font-medium">{{ article.subtitle }}</h5>
                        {% endif %}
                        {% if article.introduction %}
                            <hr class="my-2">
                            <p class="text-justify">{{ article.introduction|linebreaksbr }}</p>
                        {% endif %}
                        <hr class="my-2">
                        <div class="flex justify-between text-neutral-400">
                            <span>
                                <a class="hover:text-red-400" href="{% url 'articles:list_category' category=article.category.slug %}">{{ article.category }} </a>
                                &bull; {{ article.created | date:'jS \o\f F, Y' }}
                            </span>
                            <span>{% include 'articles/includes/display_tags.html' %}</span>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center m-8">
                <h3 class="text-4xl mb-4">Oops!</h3>
                <h5 class="text-lg">It looks like there are no articles for that {% if category %}category{% elif tag %}tag{% endif %} yet.</h5>
                <p class="text-neutral-400">(sorry not sorry)</p>
            </div>
        {% endif %}
        {% if page_obj.has_previous or page_obj.has_next %}
            {% include 'pagination.html' %}
        {% endif %}
    </main>
{% endblock %}