<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabric</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='stylesheet/bootstrap.min.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='stylesheet/style.css') }}"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fabric Mill</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollapse"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse"></div>
      <div class="m1-auto">
        <a class="navbar-brand" id="themeChanger" href="#">Dark</a>
      </div>
    </nav>
    <main>
      <div class="container" id="my-form">
        <select class="form-control" id="patternSelector"></select>
        <textarea rows="5" class="form-control" id="userInput"></textarea>
        <button class="btn btn-primary" id="submit">Submit</button>
      </div>
      <div class="container hidden" id="responseContainer"></div>
    </main>
    <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.0.0.slim.min.js') }}"></script>
  </body>
</html>