<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <link rel="stylesheet" href="/templates/modern/style.css">
        <link rel="stylesheet" href="/templates/main.css">
        <script defer src="/templates/helper.js"></script>
        <title>{{ pageName }} :: Home</title>
    </head>
    <body>
        <nav>
            <a href="/templates">Back to templates</a> | 
            <a class="home">Home</a> |
            <a>Tickets</a> |
            <a>Cart</a> |
            <a>Account</a> |
            <button onclick="changeTheme();" id="themeSelector">&#9789;</button>
        </nav>
        <div class="content">
            <div class="title">
                <img src="/assets/logo.png" alt="libreevent logo" class="logo">
                <div class="title-text">
                    <h1>YOUR PAGE TITLE GOES HERE</h1>
                    <footer>You may add a subtitle as well and you may customize the background as well</footer>
                </div>
            </div>
            <p>Here you can add a description, however long you might want it to be.</p>
            <a class="button">Buy tickets</a>
        </div>
    </body>
</html>