{% extends "base.twig" %}

{% block content %}
<main>
    <section class="hero-page bg-dark-arrows">
        <div class="container">
            <h1 class="hero-page__main-title text-left text-align-left text-uppercase">Testimonials</h1>
        </div>

    </section>
    <div class="container container--narrow">
        {% for testimonial in posts %}            
            <div class="testimonial" id="js-testimonial-{{ testimonial.id }}">
                <span id="{{ testimonial.id }}" class="goto-offset"></span>
                <div class="testimonial__profile">
                    <div class="profile-image">
                        <img src="{{ Image(testimonial.user_photo).src }}" />
                    </div>
                    <div class="profile-text">
                        <h3>{{testimonial.title}}</h3>
                        <h4 class="h5">{{ testimonial.user_role }}</h4>
                    </div>

                </div>
                <div class="testimonial__content">
                    <div class="quote-img">
                    </div>
                    <div class="quote">
                        <p class="h4">{{ testimonial.post_content }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>


{% endblock %}