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

{% block title %}{{ user.firstName }} {{ user.lastName }} | universities.com{% 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">
                    <div class="row my-5">
                        {% if user.image %}
                        <div class="author-info col-md-3 mb-3 mb-md-0">
                            <div class="fs-3 fw-light text-primary mb-4 text-center">{{ user.firstName }} {{ user.lastName }}</div>
                            <div class="author-image">
                                <picture>
                                    <source type="image/webp" srcset="{{ user.image.path | imagine_filter('author_webp') }}">
                                    <img loading="auto" src="{{ user.image.path | imagine_filter('author') }}" width="95" height="95">
                                </picture>
                            </div>
                        </div>
                        <div class="author-bio col-md-9 d-flex flex-column justify-content-center">
                            <div class="p-4 rounded bg-white shadow-sm">
                                {{ user.data.author_bio|raw }}
                            </div>
                        </div>
                        {% else %}
                        <div class="author-bio col-md-12">
                            <div class="fs-3 fw-light text-primary mb-4">{{ user.firstName }} {{ user.lastName }}</div>
                            <div class="p-4 rounded bg-white shadow-sm">
                                {{ user.data.author_bio|raw }}
                            </div>
                        </div>
                        {% endif %}
                    </div>

                    <h3 class="fw-light mb-4 text-center">All articles by {{ user.firstName }}</h3>
                    <div class="row mb-3">
                        {% if posts|length > 0 %}
                            {% for post in posts %}
                                <a href="{{ post_path(post) }}" title="{{ post.title }}" class="col-lg-4 col-md-6 mb-4">
                                    <div class="bg-light shadow-sm card h-100">
                                        {% 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>
                                    </div>
                                </a>
                            {% endfor %}
                        {% else %}
                            <div class="col">
                                Sorry, no posts have been published yet.
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}