<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=Edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta http-equiv="refresh" content="1.4" />

  <title><%= title %></title>
  <style>
    html, body {
      padding: 0;
      margin: 0;
      min-height: 100vh;
    }
    body {
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0 1rem;
      align-items: center;
      background-color: rgb(22, 26, 60);
      color: white;
      font-family: Open Sans, Helvetica Neue, sans-serif;
    }
    .card {
      padding: 1rem;
    }

    .building {
      font-weight: semibold;
      color: white;
      margin-bottom: 1rem;
      text-align: center;
    }

    .duration {
      font-weight: 600;
      color: white;
      font-size: 12px;
      position: absolute;
      bottom: 0.25rem;
      right: 0.25rem;
      z-index: 100;
      text-align: right;
    }

<% for (var i = 0 ; i < progress.length ; i++) { %>
    .c-bolt-progress__circle {
      margin-top: 20px;
      position: relative;
      left: 37%;
    }

    .c-bolt-progress__circle {
      fill: transparent;
      stroke-width: 5px;
      stroke-dasharray: 250;
      stroke-dashoffset: 1000;
    }
    .c-bolt-progress__loader--<%= i %> .c-bolt-progress__progress {
      stroke: #03A9F4; /* Light Blue 500 */
      stroke-dashoffset: -<%= 250 + Math.round(250 * progress[i][0]) %>;
      animation: dash 2s linear forwards infinite;
      transform: rotate(-90deg);
      transform-origin: center;
    }
    .c-bolt-progress__bar {
      stroke: #EEEEEE; /* Grey 200 */
    }
    .c-bolt-progress__text {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      font-family: Open Sans, Helvetica Neue, sans-serif;;
      fill: white;
      color: white;
    }
<% } %>
    .message {
      word-break: break-all;
      text-align: center;
      padding: 0 0 10px;
    }

    progress-indicator {
      display: flex;
      justify-content: center;
    }

    .c-progress-indicators {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .c-progress-indicator {
      display: inline-block;
    }
    .c-progress-indicators > *:not(:last-child){
      margin-right: 1rem;
    }

    @keyframes blink {
      0% {
        opacity: .2;
      }
      20% {
        opacity: 1;
      }
      100% {
        opacity: .2;
      }
    }

    .c-bolt-progress__animated-text {
      animation-name: blink;
      animation-duration: 1.4s;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }

    .c-bolt-progress__animated-text:nth-of-type(2) {
      animation-delay: .2s;
    }

    .c-bolt-progress__animated-text:nth-of-type(3) {
      animation-delay: .4s;
    }

    @keyframes bds-logo-scale-in-out {
      0%, 100% {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
      }
      50% {
        -webkit-transform: translateZ(0) scale(.9);
        transform: translateZ(0) scale(.9);
      }
    }

    .c-bds-logo {
      opacity: 1;
      position: relative;
      overflow: visible;
      margin: 0 auto;
    }

    .c-bds-logo__inner {
      -webkit-animation: bds-logo-scale-in-out 24s ease-in-out infinite;
      animation: bds-logo-scale-in-out 24s ease-in-out infinite;
    }

    @keyframes bds-logo-fade {
      0% {
        opacity: 0;
        -webkit-transform: translateZ(0) scale(.4);
        transform: translateZ(0) scale(.4);
      }

      100% {
        opacity: 1;
        -webkit-transform: translateZ(0) scale(.6);
        transform: translateZ(0) scale(.6);
      }
    }
  </style>
</head>
<body>
<%# <div class="border">Bolt Design System</div> %>

<div class="c-bds-logo">
    <div class="c-bds-logo__inner">
    <svg style="max-width: 200px;" width="100%" viewBox="0 0 666 183" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#FFF"><path d="M515.773 0h42.42c.904 0 1.637.734 1.637 1.64v176.54c0 .905-.733 1.639-1.636 1.639h-42.421a1.638 1.638 0 0 1-1.636-1.64V1.64c0-.905.732-1.639 1.636-1.639zM313.007 46.288c11.865 0 22.647 2.746 32.346 8.24 9.7 5.492 17.396 13.369 23.088 23.628 5.691 10.26 8.537 22.174 8.537 35.745 0 13.572-2.846 25.527-8.537 35.867-5.692 10.34-13.388 18.297-23.088 23.871-9.7 5.574-20.481 8.361-32.346 8.361-17.155 0-29.98-5.09-38.478-15.268v11.447c0 .906-.733 1.64-1.636 1.64h-40.257a1.638 1.638 0 0 1-1.636-1.64V1.64c0-.905.732-1.639 1.636-1.639h42.421c.904 0 1.636.734 1.636 1.64V59.86c8.818-9.048 20.923-13.571 36.314-13.571zm-9.62 99.118c8.017 0 14.59-2.787 19.721-8.36 5.13-5.575 7.696-13.29 7.696-23.145 0-9.693-2.565-17.287-7.696-22.78-5.13-5.493-11.704-8.24-19.72-8.24-8.017 0-14.59 2.747-19.72 8.24-5.131 5.493-7.696 13.087-7.696 22.78 0 9.856 2.565 17.57 7.696 23.144 5.13 5.574 11.703 8.361 19.72 8.361z"/><path d="M439.171 182c-37.72 0-68.3-30.648-68.3-68.455s30.58-68.455 68.3-68.455 68.3 30.648 68.3 68.455S476.89 182 439.17 182zm-.409-36.892c17.166 0 31.083-13.948 31.083-31.153s-13.917-31.153-31.083-31.153c-17.166 0-31.082 13.948-31.082 31.153s13.916 31.153 31.082 31.153zm187.25-87.79l37.621-.113a1.638 1.638 0 0 1 1.641 1.635v37.118c0 .904-.73 1.637-1.63 1.64l-37.632.113v33.494c0 7.245 5.86 13.118 13.088 13.118h24.538c.904 0 1.636.734 1.636 1.64v34.432c0 .905-.732 1.64-1.636 1.64h-37.626c-25.298 0-45.806-20.555-45.806-45.91V46.177a3.28 3.28 0 0 1 1.611-2.825l41.729-24.646a1.634 1.634 0 0 1 2.466 1.413v37.198z"/></g><path d="M72.75 50h52.5c.966 0 1.75.784 1.75 1.75v31.5a1.75 1.75 0 0 1-1.75 1.75h-52.5A1.75 1.75 0 0 1 71 83.25v-31.5c0-.966.784-1.75 1.75-1.75z" fill="#FFCC4C"/><path d="M1.067 79.751l16.659-28.876A1.75 1.75 0 0 1 19.242 50H55.25c.966 0 1.75.784 1.75 1.75v31.5A1.75 1.75 0 0 1 55.25 85H4.098a3.5 3.5 0 0 1-3.031-5.249z" fill="#F63"/><path d="M141 83.25v-31.5c0-.966.784-1.75 1.75-1.75h36.008a1.75 1.75 0 0 1 1.516.875l16.66 28.876A3.5 3.5 0 0 1 193.901 85H142.75a1.75 1.75 0 0 1-1.75-1.75z" fill="#E1E2EB"/><path d="M85 2.75v31.5A1.75 1.75 0 0 1 83.25 36H29.338a1.75 1.75 0 0 1-1.516-2.625L42.459 8.004A14 14 0 0 1 54.586 1H83.25c.966 0 1.75.784 1.75 1.75z" fill="#F63"/><path d="M100.75 1h42.664a14 14 0 0 1 12.127 7.004l14.637 25.371A1.75 1.75 0 0 1 168.662 36H100.75A1.75 1.75 0 0 1 99 34.25V2.75c0-.966.784-1.75 1.75-1.75z" fill="#FFCC4C"/><path d="M42.46 175.996l-14.638-25.371A1.75 1.75 0 0 1 29.338 148H97.25c.966 0 1.75.784 1.75 1.75v31.5a1.75 1.75 0 0 1-1.75 1.75H54.586a14 14 0 0 1-12.127-7.004z" fill="#6C79D9"/><path d="M114.75 148h53.912a1.75 1.75 0 0 1 1.516 2.625l-14.637 25.371A14 14 0 0 1 143.414 183H114.75a1.75 1.75 0 0 1-1.75-1.75v-31.5c0-.966.784-1.75 1.75-1.75z" fill="#12B3B3"/><path d="M71 100.75v31.5a1.75 1.75 0 0 1-1.75 1.75H19.242a1.75 1.75 0 0 1-1.516-.875l-16.66-28.876A3.5 3.5 0 0 1 4.099 99H69.25c.966 0 1.75.784 1.75 1.75z" fill="#6C79D9"/><path d="M86.75 99h107.152a3.5 3.5 0 0 1 3.031 5.249l-16.659 28.876a1.75 1.75 0 0 1-1.516.875H86.75a1.75 1.75 0 0 1-1.75-1.75v-31.5c0-.966.784-1.75 1.75-1.75z" fill="#12B3B3"/></g></svg>
    </div>
  </div>


<div class="card">
  <div class="building">
    <span>Bolt is compiling for the first time.</span><br>
  </div>
  <span class="duration">(running for <%= duration %>)</span>

  <div class="c-progress-indicators">

    <% for (var i = 0 ; i < progress.length ; i++) { %>
      <div class="c-progress-indicator">
      <progress-indicator>
        <svg class="c-bolt-progress__loader c-bolt-progress__loader--<%= i %>" height="100" width="100">
          <circle class="c-bolt-progress__circle c-bolt-progress__bar" cx="50" cy="50" r="40"></circle>
          <circle class="c-bolt-progress__circle c-bolt-progress__progress" cx="50" cy="50" r="40"></circle>
          <text x="53" y="55" text-anchor="middle" class="c-bolt-progress__text"><%= Math.round(100 * progress[i][0]) %>%</text>
        </svg>
      </progress-indicator>

  <%
        const capitalize = (str) => {
          if (typeof str !== 'string') return '';
          return str.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
        }

        const message = progress[i][1] || '';
        const result = message.includes('building') || message.includes('compiling')
          ? 'Compiling'
          : message.includes('optimization')
          ? 'Optimizing'
          : message.includes('emitting') || message.includes('seal')
          ? 'Wrapping up'
          : progress[i][1];
      %>
      <div class="message"><strong><%= capitalize(result) %><span class="c-bolt-progress__animated-text">.</span><span class="c-bolt-progress__animated-text">.</span><span class="c-bolt-progress__animated-text">.</span></strong></div>
      </div>
    <% }  %>
  </div>



</div>
</body>
</html>