{% assign ready = false %}
{% if current_person.signed_in? %}
  {% if current_person.properties.city
    and current_person.properties.state
    and current_person.properties.store_name 
    and current_person.properties.city.size > 0 
    and current_person.properties.state.size > 0
    and current_person.properties.store_name.size > 0 
  %}    
    {% assign ready = true %}
  {% endif %}
{% endif %}

{% if ready == true %}
    <script>
      /* if (window.location.pathname != '/app'){
        window.location.replace('/app');
      } */
      window.location.href = '/app'
    </script>
{% else %}
    <script>
        window.setTimeout(function() {
            window.location.reload(true);
        }, 3000);
    </script>
{% endif %}

<main>
    <div class="waiting-room-container">
        <img class="image" src="https://s3.amazonaws.com/static.northpass.com/Mizuno+Golf/logo.png">
        <div class="text">
            Thank you for entering your Region and Store Name! 
            Please wait while we configure the school for you. 
            You’ll be automatically redirected when it's ready!
        </div>
    </div>
</main>

<style>
    main {
        align-items: center;
        background: #001588;
        display: flex;
        flex-direction: row;
        height: 100%;
        margin: auto;
    }
    .waiting-room-container{
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .image {
        display: flex;
        margin: 30px auto;
        width: 90%;
    }
    .text {
        color: #FFFFFF;
        font-size: 30px;
        margin: 50px auto;
        text-align: center;
    }

    @media screen and (min-width: 1000px){
        .image{
            width: 70%;
        }

        .text{
            margin: 50px;
            margin-top: 0;
        }
    }

    @media screen and (min-width: 1200px){
        .image{
            width: 60%;
        }

        .text{
            margin: 40px 100px;
        }
    }

    @media screen and (min-width: 1700px){
        .image{
            width: 50%;
        }

        .text{
            font-size: 36px;
            margin: 50px 150px;
        }
    }

    @media screen and (min-width: 2200px){
        .image{
            width: 40%;
        }

        .text{
            font-size: 48px;
            margin: 50px 200px;
            margin-top: 0;
        }
    }
</style>