<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="styles/options.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title data-message="optionsAndSettings"></title>
  </head>
  <body class="wrap">
    <div class="grid">
      <div class="unit whole center-on-mobiles">
        <div class="heading">
          <h1 data-message="extensionName"></h1>
          <p class="lead" data-message="optionsPageSubtitle"></p>
        </div>
      </div>
    </div>

    <section>
      <div class="grid">
        <div class="unit whole center-on-mobiles">
          <div id="msg"></div>
        </div>
      </div>
    </section>

    <section class="content">
      <div class="grid">
        <div class="unit whole center-on-mobiles">
          <div class="option">
            <h5 data-message="optionsURL"></h5>
            <input
              type="text"
              name="url"
              value="https://app.readlater.shikiryu.com"
            />
          </div>

          <div class="option">
            <h5 data-message="optionsToken"></h5>
            <input type="text" name="token" value="" />
          </div>

          <div class="option">
            <h5 data-message="optionsExtract"></h5>
            <input type="checkbox" name="extract" value="1" />
          </div>
        </div>
      </div>
    </section>

    <footer class="main-footer">
      <div class="grid">
        <div class="unit whole center-on-mobiles">
          <p class="text-center text-muted">
            &copy; <a href="https://readlater.shikiryu.com">ReadLaterByEmail</a>
          </p>
        </div>
      </div>
    </footer>
    <script src="scripts/options.js"></script>
  </body>
</html>