<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <link href="{{base}}/css/styles.css" rel="stylesheet" />
    <link rel="stylesheet" href="{{base}}/css/memory.css">
    <link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
</head>
<body>
{% include 'navBar.twig' %}
<div class="content">
    <h1><u>Memory Game:</u> <i>{{ name }}</i></h1>
    <div id="memory-game">
        {% for word in wordShuffle %}
        <div class="card center-text flipped" data-word="{{ word }}">
            <span>{{ word }}</span>
        </div>
        {% endfor %}
    </div>
</div>

<script>
    var pairs = JSON.parse('{{ pairs | raw }}');
</script>

<script src="{{base}}/js/memory.js"></script>
</body>
</html>