<!doctype html>
<html lang="en-US">
  <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" />
    <meta name="description" content="An Interactive Sorting Visualizer Website For The Curious Nerds " />
    <meta name="keywords" content="sort, visualizer, algorithm, graphic, math, computer science" />
    <title>Sorts Visualizer - <%= title %></title>
    <link rel="icon" href="/icon.svg" />
    <link rel="stylesheet" href="/style.css" media="all" />
    <% if (title.match(/sort/i)) {%>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script><%- data.Algorithm %></script>
    <% } else if (title.match(/custom/i)) {%>
    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.35.4/src-min/ace.min.js"></script>
    <% } %>
  </head>
  <body>
    <nav>
      <section>
        <h2>Comparison Sorts</h2>
        <ul>
          <li><a href="/heap-sort">Heap Sort</a></li>
          <li><a href="/merge-sort">Merge Sort</a></li>
          <li><a href="/tim-sort">Tim Sort</a></li>
          <li><a href="/quick-sort">Quick Sort</a></li>
          <li><a href="/shell-sort">Shell Sort</a></li>
          <li><a href="/bubble-sort">Bubble Sort</a></li>
          <li><a href="/insertion-sort">Insertion Sort</a></li>
          <li><a href="/cocktail-sort">Cocktail Sort</a></li>
          <li><a href="/gnome-sort">Gnome Sort</a></li>
          <li><a href="/pancake-sort">Pancake Sort</a></li>
          <li><a href="/selection-sort">Selection Sort</a></li>
        </ul>
      </section>
      <section>
        <h2>Non-Comparison Sorts</h2>
        <ul>
          <li><a href="/pigeonhole-sort">Pigeonhole Sort</a></li>
          <li><a href="/radix-sort">Radix Sort</a></li>
          <li><a href="/counting-sort">Counting Sort</a></li>
          <li><a href="/bucket-sort">Bucket Sort</a></li>
          <li><a href="/flash-sort">Flash Sort</a></li>
        </ul>
      </section>
      <section>
        <h2>Others</h2>
        <ul>
          <li><a href="/bead-sort">Bead Sort</a></li>
          <li><a href="/spaghetti-sort">Spaghetti Sort</a></li>
          <li><a href="/bitonic-sort">Bitonic Sort</a></li>
          <li><a href="/slow-sort">Slow Sort</a></li>
          <li><a href="/bogo-sort">Bogo Sort</a></li>
        </ul>
      </section>
      <section>
        <h2>Custom</h2>
        <ul>
          <li><a href="/custom">Custom Sort</a></li>
        </ul>
      </section>
    </nav>
    <header>
      <a href="/" id="logo">
        <img src="/icon.svg" alt="Sorts Visualizer Icon" />
        <h1>Sorts Visualizer</h1>
      </a>
      <div id="links">
        <a href="/">Home</a>
        <a id="algo-selector" style="cursor: pointer">Algorithms</a>
        <a href="https://github.com/RedeemedSpoon/Sorts-Visualizer">Source Code</a>
      </div>
    </header>
