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

{% block body %}
<div class="jumbotron-img jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">Your Questions Answered</h1>
        <p class="lead">And even answers for those questions you didn't think to ask!</p>
    </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">
        <div class="col-12">
            <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">
                            <div class="d-block mt-3 vote-arrows">
                                <a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
                                <a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
                            </div>
                        </div>
                        <div class="col">
                            <a class="q-title" href="{{ path('app_question_show', { slug: 'reversing-a-spell' }) }}"><h2>Reversing a Spell</h2></a>
                            <div class="q-display p-3">
                                <i class="fa fa-quote-left mr-3"></i>
                                <p class="d-inline">I've been turned into a cat, any thoughts on how to turn back? While I'm adorable, I don't really care for cat food.</p>
                                <p class="pt-4"><strong>--Tisha</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="answer-link" href="{{ path('app_question_show', { slug: 'reversing-a-spell' }) }}" style="color: #fff;">
                    <p class="q-display-response text-center p-3">
                        <i class="fa fa-magic magic-wand"></i> 6 answers
                    </p>
                </a>
            </div>
        </div>

        <div class="col-12 mt-3">
            <div class="q-container p-4">
                <div class="row">
                    <div class="col-2 text-center">
                        <img src="{{ asset('images/magic-photo.png') }}" width="100" height="100">
                        <div class="d-block mt-3 vote-arrows">
                            <a class="vote-up" href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
                            <a class="vote-down" href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
                        </div>
                    </div>
                    <div class="col">
                        <a class="q-title" href="{{ path('app_question_show', { slug: 'pausing-a-spell' }) }}"><h2>Pausing a Spell</h2></a>
                        <div class="q-display p-3">
                            <i class="fa fa-quote-left mr-3"></i>
                            <p class="d-inline">I mastered the floating card, but now how do I get it back to the ground?</p>
                            <p class="pt-4"><strong>--Jerry</strong></p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="answer-link" href="{{ path('app_question_show', { slug: 'pausing-a-spell' }) }}" style="color: #fff;">
                <p class="q-display-response text-center p-3">
                    <i class="fa fa-magic magic-wand"></i> 15 answers
                </p>
            </a>
        </div>
    </div>
</div>
{% endblock %}