<!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="static/stylesheet/bootstrap.min.css" />
    <link rel="stylesheet" href="static/stylesheet/style.css" />
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">
        <img
          src="static/images/fabric-logo-gif.gif"
          alt="Fabric Logo"
          height="40"
        />
      </a>
      <button id="configButton" class="btn btn-outline-success my-2 my-sm-0">
        Config
      </button>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarCollap  se"
        aria-controls="navbarCollapse"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <button
        id="updatePatternsButton"
        class="btn btn-outline-success my-2 my-sm-0"
      >
        Update Patterns
      </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"
          placeholder="start typing or drag a file (.txt, .svg, .pdf and .doc are currently supported)"
        ></textarea>
        <button class="btn btn-primary" id="submit">Submit</button>
      </div>
      <div id="configSection" class="container hidden">
        <input
          type="text"
          id="apiKeyInput"
          placeholder="Enter OpenAI API Key"
          class="form-control"
        />
        <button id="saveApiKey" class="btn btn-primary">Save API Key</button>
      </div>
      <div class="container hidden" id="responseContainer"></div>
    </main>
    <script src="static/js/jquery-3.0.0.slim.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/index.js"></script>
  </body>
</html>