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

{% block body %}
<div class="jumbotron-img p-2 mb-2">
    <div class="container">
        <h1 class="display-4">Your Questions Answered</h1>
        <div class="lead">And even answers for those questions you didn't think to ask!</div>
    </div>
</div>
<div class="container">
    <div class="row mb-3">
        <div class="col">
            <button class="btn btn-question">Ask a Question</button>
        </div>
    </div>
    <div class="row">
        {% for question in pager %}
        <div class="col-12 mb-3">
            <div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);">
                <div class="q-container p-4">
                    <div class="row">
                        <div class="col-2 text-center">
                            <img src="{{ asset('images/tisha.png') }}" width="100" height="100"  alt="Tisha avatar">
                            <div class="vote-arrows vote-arrows-alt flex-fill pt-2" style="min-width: 90px;">
                                <span>{{ question.votesString}} votes</span>
                            </div>
                            {% for questionTag in question.questionTags %}
                                <span class="badge rounded-pill bg-light text-dark">{{ questionTag.tag.name }}</span>
                            {% endfor %}
                        </div>
                        <div class="col">
                            <a class="q-title" href="{{ path('app_question_show', { slug: question.slug }) }}"><h2>{{ question.name }}</h2></a>
                            <div class="q-display p-3">
                                <i class="fa fa-quote-left mr-3"></i>
                                <p class="d-inline">{{ question.question|parse_markdown }}</p>
                                <p class="pt-4"><strong>--Tisha</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="answer-link" href="{{ path('app_question_show', { slug: question.slug }) }}" style="color: #fff;">
                    <p class="q-display-response text-center p-3">
                        <i class="fa fa-magic magic-wand"></i> {{ question.approvedAnswers|length}} answers
                    </p>
                </a>
            </div>
        </div>
        {% endfor %}

        {{ pagerfanta(pager) }}
    </div>
</div>
{% endblock %}

