<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Chrome, Opera, and Firefox OS -->
    <meta name="theme-color" content="#3a3f51" />
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#3a3f51" />
    <!-- Android/Apple Phone -->
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no">

    <meta name="description" content="Readarr">

    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/Content/Images/Icons/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/Content/Images/Icons/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/Content/Images/Icons/favicon-16x16.png"
    />
    <link rel="manifest" href="/Content/Images/Icons/manifest.json" crossorigin="use-credentials" />
    <link
      rel="mask-icon"
      href="/Content/Images/Icons/safari-pinned-tab.svg"
      color="#00ccff"
    />
    <link
      rel="shortcut icon"
      type="image/ico"
      href="/favicon.ico"
      data-no-hash
    />
    <meta
      name="msapplication-config"
      content="/Content/Images/Icons/browserconfig.xml"
    />

    <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css">

    <script>
      window.Readarr = {
        urlBase: '__URL_BASE__'
      };
    </script>

    <% for (key in htmlWebpackPlugin.files.js) { %><script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[key] %>" data-no-hash></script><% } %>
    <% for (key in htmlWebpackPlugin.files.css) { %><link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet"></link><% } %>

    <title>Readarr</title>

    <!--
      The super basic styling for .root  will live here,
      saves fighting with CSS Modules for ~10 lines
    -->
    <style>
      .root {
        overflow: hidden;
        height: 100%; /* needed for proper layout */
      }

      @media only screen and (max-width: 768px) {
        .root {
          display: flex;
          flex-direction: column;
          min-height: 100%;
          height: auto;
        }
      }
    </style>
  </head>

  <body>
    <div id="portal-root"></div>
    <div id="root" class="root"></div>
  </body>
</html>
