{% extends 'base.html.twig' %}

{% block title %}{% if section.metaTitle %}{{ section.metaTitle }}{% else %}{{ section.name }} | universities.com{% endif %}{% endblock %}

{% block meta_description %}{% if section.metaDescription %}{{ section.metaDescription }}{% else %}{{ parent() }}{% endif %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block scripts %}
    {{ parent() }}
{% endblock %}

{% block body %}
    <div class="container mt-3">
        <div class="row">
            <div class="col">
                <div class="section">
                    <h1 id="title" class="fw-light text-primary">{{ section.name }}</h1>

                    <div class="row mb-3">
                        {% if section.posts|length > 0 %}
                            {% for post in section.posts|sort((a, b) => b.published <=> a.published) %}
                                <a href="{{ post_path(post) }}" title="{{ post.title }}" class="col-lg-4 col-md-6 mb-3">
                                    <div class="bg-light shadow-sm card">
                                        {% if post.image %}
                                            <picture>
                                                <source type="image/webp" media="(max-width: 320px)" srcset="{{ post.image.path | imagine_filter('grid_webp_xxs') }}">
                                                <source type="image/webp" media="(max-width: 375px)" srcset="{{ post.image.path | imagine_filter('grid_webp_xs') }}">
                                                <source type="image/webp" media="(max-width: 425px)" srcset="{{ post.image.path | imagine_filter('grid_webp_sm') }}">
                                                <source type="image/webp" media="(max-width: 991px)" srcset="{{ post.image.path | imagine_filter('grid_webp_md') }}">
                                                <source type="image/webp" media="(max-width: 1199px)" srcset="{{ post.image.path | imagine_filter('grid_webp_lg') }}">
                                                <source type="image/webp" media="(max-width: 1399px)" srcset="{{ post.image.path | imagine_filter('grid_webp_xl') }}">
                                                <source type="image/webp" media="(min-width: 1400px)" srcset="{{ post.image.path | imagine_filter('grid_webp_xxl') }}">
                                                <source media="(max-width: 320px)" srcset="{{ post.image.path | imagine_filter('grid_xxs') }}">
                                                <source media="(max-width: 375px)" srcset="{{ post.image.path | imagine_filter('grid_xs') }}">
                                                <source media="(max-width: 425px)" srcset="{{ post.image.path | imagine_filter('grid_sm') }}">
                                                <source media="(max-width: 991px)" srcset="{{ post.image.path | imagine_filter('grid_md') }}">
                                                <source media="(max-width: 1199px)" srcset="{{ post.image.path | imagine_filter('grid_lg') }}">
                                                <source media="(max-width: 1399px)" srcset="{{ post.image.path | imagine_filter('grid_xl') }}">
                                                <img loading="auto" class="card-img-top" style="max-height: 200px; height: 200px; object-fit: cover;" src="{{ post.image.path | imagine_filter('grid_xxl') }}">
                                            </picture>
                                        {% endif %}

                                        <div class="card-body">
                                            <div class="h5 card-title fw-light text-primary">{{ post.title }}</div>
                                            <div class="card-text">
                                                <span class="author text-muted">Written by {{ post.writer.firstName }} {{ post.writer.lastName }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            {% endfor %}
                        {% else %}
                            <div class="col">
                                Sorry, no posts have been published yet.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}