<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <title>Post - <%= post.Quote %></title>
  </head>
  <body class="post <%= post.Tags %>">
    <header>
      <a href="/"><i class='bx bx-home' ></i></a>

      <div class="toggle-switch">
				<input aria-labelledby="toggle-label"
				       class="toggle-checkbox"
				       id="darkModeToggle"
				       type="checkbox">
				<label class="toggle-label"
				       for="darkModeToggle"
				       id="toggle-label"
				       tabindex="0">
					<span class="visually-hidden">Toggle Dark Mode</span>
				</label>
			</div>
    </header>

    <main>
      <div class="scroll-watcher"></div>
      <section class="socials">
        <a href="<%= post.Social %>" target="_blank"><i class='bx bxl-linkedin' ></i></a>
        <a href="mailto:<%= post.Mail %>" target="_blank"><i class='bx bxs-envelope' ></i></a>
      </section>

      <section class="metadata">
        <article class="Titel">
          <div class="image-container">
          <img src="<%= post.image %>" alt="image of post" />
        </div>
          <h1><%= post.Gastnaam %></h1>
          <p><%= post.FunctieGast %></p>
        </article>

        <article class="info-box">
          <img src="<%= post.image %>" alt="image of post" />

          <ul class="info-metabox">
            <li><i class='bx bxs-time-five' ></i> <%= post.GastlesDatum %></li>
            <li><i class='bx bx-world' ></i> <%= post.Bedrfijfsurl %></li>
            <li><i class='bx bxs-magic-wand' ></i> <%= post.Skills %></li>
            <li><i class='bx bxs-brush' ></i> <%= post.GastlesThema %></li>
            <li><i class='bx bx-code-curly' ></i> <%= post.Tags %></li>
          </ul>

        </article>
      </section>

      <section class="content">
        <div class="container">
          <p><%- post.Content %></p>
      </div>

      <%- include('../components/features') %>
      </section>
    </main>

    <footer><%- include('../partials/footer'); %></footer>
  </body>
</html>
