{#if ENGINE === 'webkit'}
  <div class="container simulator-wrapper {$ACTIVE_MODEL} {removeSimulatorPos ? 'force-remove-simulator-pos' : ''}" >
    <div class="main-wrapper">
      <POS ref:POS>
        <Launcher />
      </POS>
      {#if !removeSimulatorPos}
        <Card ref:card />
      {/if}
    </div>
  </div>
{:else}
  <div class="engine-alert">
    Para um rápido desenvolvimento mais fiel ao ambiente do POS, é recomendado o uso do <strong><a href="https://www.google.com/chrome/" target="_blank">Chrome</a></strong> como navegador.
  </div>
  <div id="app-root"></div>
{/if}

<ControlPanel ref:controlPanel />

<script>
  import store from './store.js';

  /**
   * Detect if we're running on a webkit environment.
   * We check for `edge` because it fakes one.
   */
  const ENGINE =
    'WebkitAppearance' in document.documentElement.style && !/edge/i.test(navigator.userAgent)
      ? 'webkit'
      : 'other';

  export default {
    components: {
      POS: './POS.html',
      Card: './Card.html',
      Launcher: './apps/Launcher.html',
      ControlPanel: './ControlPanel.html',
    },
    store: () => store,
    helpers: {
      ENGINE,
    },
    oncreate() {
      /**
       * Remove the 'app-root' id from the body, since
       * its replaced by the 'app-root' inside the <Screen />
       * */
      document.body.removeAttribute('id');
      document.documentElement.setAttribute('virtual-pos', '');

      /**
       * Set the render engine to the html attribute
       * to make our css a bit smarter since we depend heavily on webkit.
       * */
      document.documentElement.setAttribute('engine', ENGINE);
    },
  };
</script>

<style type="text/postcss">

  @import './style.pcss';

  @media (max-width: 400px) {
    :global(body),
    .container,
    .main-wrapper {
      height: 100%;
    }

    :global(body) {
      @extend %hide-scrollbar;
    }
  }

  :global(.force-remove-virtual-pos body) {
    height: 100%;
    @extend %hide-scrollbar;
  }

  @media (min-width: 401px) {
    .container:not(.force-remove-simulator-pos) {
      display: flex;
      height: 100vh;
      width: 100%;
      align-items: center;
      justify-content: center;
      background-image: url(./assets/wood.jpg);
      background-size: cover;
      overflow: hidden;

      &.MP35P {
        align-items: initial;
        padding-top: 32px;
      }

      &.MP35 {
        align-items: initial;
        padding-top: 32px;
      }

      &.D195 {
        align-items: initial;
        padding-top: 32px;
      }

      &.Q60 {
        align-items: initial;
        padding-top: 32px;
      }
    }

    .main-wrapper {
      position: relative;
    }

  }

  .engine-alert {
    position: static;
    z-index: 100000;
    width: 100%;
    padding: 10px 75px;
    background-color: #bf4130;
    color: #fff;
    font-size: 16px;
    text-align: center;
    animation: 2s ease-in-out blink infinite;
    pointer-events: none;

    a {
      text-decoration: underline;
      color: #fff;
      pointer-events: auto;
    }
  }

  @keyframes blink {
    0% {
      opacity: 0.4;
    }

    50% {
      opacity: 0.9;
    }

    100% {
      opacity: 0.4;
    }
  }
</style>