<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
    <title><%= htmlWebpackPlugin.options.productName %></title>
    <base href="<%= htmlWebpackPlugin.options.appBase %>">

    <link rel="icon" href="statics/quasar-logo.png" type="image/x-icon">
    <link rel="icon" type="image/png" sizes="32x32" href="statics/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">

    <% if (htmlWebpackPlugin.options.ctx.mode.pwa) { %>
    <!-- Add to home screen for Android and modern mobile browsers -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="<%= htmlWebpackPlugin.options.pwaManifest.theme_color %>">
    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="<%= htmlWebpackPlugin.options.pwaManifest.background_color %>">
    <meta name="apple-mobile-web-app-title" content="<%= htmlWebpackPlugin.options.pwaManifest.name %>">
    <link rel="apple-touch-icon" href="statics/icons/apple-icon-152x152.png">
    <!-- Add to home screen for Windows -->
    <meta name="msapplication-TileImage" content="statics/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="<%= htmlWebpackPlugin.options.pwaManifest.background_color %>">
    <% } %>

    <%= htmlWebpackPlugin.options.headScripts %>

    <!--
      The following is optional if you DON'T build for PWA.
      Preloads/prefetches chunks/assets.
    -->
    <% if (!['cordova', 'electron'].includes(htmlWebpackPlugin.options.ctx.modeName) && htmlWebpackPlugin.options.ctx.prod) {
        for (var chunk of webpack.chunks) {
          for (var file of chunk.files) {
            if (file.match(/\.(js|css)$/)) { %>
      <link rel="<%= chunk.initial ? 'preload' : 'prefetch' %>" href="<%= file %>" as="<%= file.match(/\.css$/)? 'style' : 'script' %>">
    <% }}}} %>
  </head>
  <body>
    <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %>
      <noscript>
        This is your fallback content in case JavaScript fails to load.
      </noscript>
    <% } %>

    <!-- DO NOT touch the following <div> -->
    <div id="q-app"></div>

    <!-- DO NOT touch the following -->
    <%= htmlWebpackPlugin.options.bodyScripts %>

    <!-- built files will be auto injected here -->
  </body>
</html>
