<!DOCTYPE html>
<html lang="de">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CIN Ajax Suche</title>
  </head>

  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.625;
      color: #435a6b;
      text-align: left;
      background-color: #f5f7fa;
      margin: 0 1rem;
      height: 100vh;
      padding: 2rem;
    }

    .btn {
      display: inline-block;
      font-weight: 400;
      color: #435a6b;
      text-align: center;
      vertical-align: middle;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: 0.375rem 1.5rem;
      font-size: 0.8203125rem;
      line-height: 1.625;
      border-radius: 10rem;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .btn-primary {
      color: #f5f7fa;
      background-color: #5cbcf6;
      border-color: #5cbcf6;
      box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
    }

    .btn:not(:disabled):not(.disabled) {
      cursor: pointer;
    }

    .btn:hover {
      color: #435a6b;
      text-decoration: none;
      box-shadow: none;
    }

    .btn-primary:hover {
      color: #f5f7fa;
      background-color: #5cbcf6;
      border-color: #5cbcf6;
    }

    .btn:not(:disabled):not(.disabled):active,
    .btn:not(:disabled):not(.disabled).active {
      box-shadow: none;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show>.btn-primary.dropdown-toggle,
    #sidebar .navigation .show>.btn-primary[data-toggle=collapse] {
      color: #f5f7fa;
      background-color: #2ca8f3;
      border-color: #20a3f3;
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show>.btn-primary.dropdown-toggle,
    #sidebar .navigation .show>.btn-primary[data-toggle=collapse] {
      background-color: #3098d6;
      border-color: #3098d6;
    }

    button:focus:not(:focus-visible) {
      outline: 0;
    }

    .btn-primary:focus,
    .btn-primary.focus {
      background-color: #5cbcf6;
      border-color: #5cbcf6;
      box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16);
    }

    .btn-primary:focus,
    .btn-primary.focus {
      color: #f5f7fa;
      background-color: #38adf4;
      border-color: #2ca8f3;
      box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(115, 197, 247, 0.5);
    }

    .btn:focus,
    .btn.focus {
      outline: 0;
      box-shadow: none;
    }

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      text-align: center;
    }

    progress {
      height: 2rem;
      width: 50vw;
    }

    .d-none {
      display: none !important;
    }
  </style>

  <body id="body" data-cron="{$ri_url}" data-start="{$i_start}">
    <h1>Ajax Suche</h1>
    <small>Artikelindizierung</small>
    <div class="container">
      <div>
        <progress id="progress" max="100" value="0"></progress>
      </div>
      <button id="restart" class="btn btn-primary d-none">Indizierung Starten</button>
      <div id="info">Sie können die Seite minimieren um Ihre Arbeit fortzusetzen.</div>
    </div>
  </body>
  <script>
    {$reindexjs}
  </script>

</html>
