<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="application-name" content="OwlBoard">
        <meta name="author" content="Frederick Boniface">
        <meta name="theme-color" content="#00b7b7">
        <link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
        <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
        <link rel="stylesheet" type="text/css" href="./styles/issue.css"/>
        <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
        <link rel="manifest" type="application/json" href="./manifest.json"/>
        <script src="./js/lib.main.js" defer></script>
        <script src="./js/issue.js" defer></script>
        <title>OwlBoard - Report</title>
    </head>
    <body>
      <!-- Loading Box -->
      <div id="loading">
        <div class="spinner">
        </div>
        <p id="loading_desc">Loading</p>
      </div>
      <div id="top_button" class="hide_micro">
        <a href="/">
          <picture aria-label="Home" class="sidebar_control">
            <source srcset="/images/nav/back.svg" type="image/svg+xml">
            <img src="back-40.png" alt="Home">
          </picture>
        </a>
      </div>
      <picture>
        <source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
        <source media="(max-height: 739px)" srcset="/images/logo/logo-full-200.png" type="image/png">
        <source srcset="/images/logo/logo-full-250.png" type="image/png">
        <img class="titleimg" src="/images/logo/logo-full-250.png" alt="OwlBoard Logo">
      </picture>
      <h2>Report an Issue</h2>
        <p>To help diagnosing an issue, data about your browser and device will be
           collected alongside the data that you enter below.</p>
        <p>The data will be available publically in the <a href="https://git.fjla.uk/fred.boniface/owlboard/issues">
           OwlBoard Issue Tracker</a>.  A preview will be shown before the data is sent.</p>
          <label for="subject">Subject:</label><br>
          <input type="text" name="subject" id="subject" class="text-entry"/><br>
          <label for="content">Message:</label><br>
          <textarea name="message" id="message" class="text-entry-long"></textarea><br>
          <input type="submit" name="submit" id="submit" label="Preview" class="lookup-button" onclick="submit()">
      <div id="preflight">
        <h3>Check & Send</h3>
        <h3>---</h3>
        <h4 id="pre_subject"></h4>
        <p id="pre_message"></p>
        <button id="send" class="lookup-button" onclick="send()">Send</button>
        <button id="cancel" class="lookup-button" onclick="cancel()">Cancel</button>
      </div>
    </body>
</html>