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

{% block title %}Catégories de blagues
{% endblock %}

{% block body %}

	<div class="page">

		<div class="title">
			<h1 class="font-title">Catégories de blagues</h1>
		</div>

		<ul class="categories-list col-lg-8 mx-auto">
			<button class="btn-category" onclick="categories.showCategories(value)" value="global" class="global">
				<li>Classique</li>
			</button>
			<button class="btn-category" onclick="categories.showCategories(value)" value="dev" class="dev">
				<li>Dev</li>
			</button>
			<button class="btn-category" onclick="categories.showCategories(value)" value="dark" class="dark">
				<li>Noir</li>
			</button>
			<button class="btn-category" onclick="categories.showCategories(value)" value="limit" class="limit">
				<li>Limite</li>
			</button>
			<button class="btn-category" onclick="categories.showCategories(value)" value="beauf" class="beauf">
				<li>Beauf</li>
			</button>
			<button class="btn-category" onclick="categories.showCategories(value)" value="blondes" class="blondes">
				<li>Blondes</li>
			</button>
		</ul>

		<div class="block col-lg-4 col-10 mx-auto mt-0">

			<div style="visibility: hidden" class="category d-inline-flex p-2">
				<p class="category"></p>
			</div>

			<p class="random text"></p>

			<button class="btn btn-light" onclick="categories.answer()">Réponse</button>
			<p class="response text"></p>

		</div>

		<button class="btn new-joke-btn nextJokeByCategory" onclick="categories.showCategories(value)" value="">Nouvelle blague</button>


	</div>

	<script defer type="text/javascript" src="{{ asset('js/jokes/categories.js') }}"></script>

{% endblock %}