@extends('layouts.public')

@section('content')

<!--Conteúdo-->
<section id="piadas">
    <div class="container">
        <h1 class="titulo-padrao">Piadas</h1>
        <div class="box-btn-voltar mb-2">
            <a class="btn-voltar" href="javascript:window.history.go(-1)">
                <svg class="svg-voltar-dims">
                    <use xlink:href="sprite-svg/sprite.svg#voltar"></use>
                </svg>
                Voltar
            </a>
        </div>
        <div class="box-piadas">
            @foreach($piadas as $piada)
                <article class="piada">
                    <h1>{{$piada->texto}}</h1>
                    <div class="resposta">
                        <p class="resposta-piada"><span>R:</span>{{$piada->resposta}}</p>
                        <a class="btn-mostrar">Mostrar</a>
                    </div>
                    <!-- <ul class="reacao-piada">
                        <li>
                            <a href="">
                                <svg class="svg-happy-dims">
                                    <use xlink:href="sprite-svg/sprite.svg#happy"></use>
                                </svg>
                            </a>
                            <span class="contador-reacao">15</span>
                        </li>
                        <li>
                            <a href="">
                                <svg class="svg-sad-dims">
                                    <use xlink:href="sprite-svg/sprite.svg#sad"></use>
                                </svg>
                            </a>
                            <span class="contador-reacao">15</span>
                        </li>
                    </ul> -->
                </article>
            @endforeach
        </div>
        {{$piadas->render()}}
    </div>
</section>
<!--Fim Conteúdo-->

@endsection