{% comment %} skip-auth {% endcomment %}
{% include "header" %}
<div class="page-container">
  {% if current_person.signed_in? %}
    <div class="np-hidden-mobile custom-sub-navigation">
      {% include "sub_navigation" %}
    </div>
  {% endif %}


  <main class="np-main np-subpage-container np-max-width certification-page">
    {% comment %}================================================ REGISTRATION HEADER ============================================={% endcomment %}

    {%- comment -%} <div class="base-state">
        <div class="np-resource-title">Getting Started</div>
        <div class="register-button">Register Now</div>
    </div> {%- endcomment -%}

    {% comment %}=================================================== TEXT HEADER ==================================================={% endcomment %}

    {%- comment -%} <div class="np-resource-title skuid-cert-reg-header">Skuid Certification Registration</div> {%- endcomment -%}

    {% comment %}================================================= HEADER BUBBLES ==================================================={% endcomment %}

    <div class="cert-step-bubbles col-xs-12">
        <div class="cert-bubble col-xs-3">GET STARTED</div>
        <div class="cert-bubble col-xs-3">EXAM PREP</div>
        <div class="cert-bubble col-xs-3">COMPLETION STATUS</div>
        <div class="cert-bubble col-xs-3">RECERTIFICATION</div>
    </div>

    {% comment %}=================================================== IFRAME =========================================================={% endcomment %}

    {%- comment -%} <iframe></iframe> {%- endcomment -%}

    {% comment %}=========================================== CERTIFICATION REGISTRATION =============================================={% endcomment %}

    <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Ready to be Skuid Certified?</div>
        <div class="np-resource-subtitle cert-sub-header registration-sub-header">
            {%- comment -%} <div>The Skuid - Certified Builder Exam assumes knowledge in topics from Levels 1 and 2 of Skuid Skool.</div> {%- endcomment -%}
            <div>The Skuid - Certified Builder Exam assumes knowledge in topics from  <a href="https://www.skuidskool.com/app/learning_paths/46ae5253-8c64-426b-a638-e80c08ce29da" class="registration-sub-header-link" target="_blank">Level 1</a>, <a href="https://www.skuidskool.com/app/learning_paths/e7d6e7ca-39ad-4a40-b75c-83d382715c4a" class="registration-sub-header-link" target="_blank">Level 2</a>, <a href="https://www.skuidskool.com/app/learning_paths/e15cd738-8681-4171-9d09-ba3d31c02005" class="registration-sub-header-link" target="_blank">Deploy and Manage Skuid Apps in Salesforce</a>, and the <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a> learning paths within <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a>.</div>
            <br>
            <div>Click below to register for your exam.</div>
        </div>

        <a class="cert-button-big register-cert-button" href="#">Register Now</a>

        <img src="https://cdn.northpass.io/Skuid/images/cert_registration.svg" alt="exam-registration-image" class="exam-status-image exam-registration-image">
        </img>
    </div>


    {% comment %}================================================ EXAM PREP ==================================================={% endcomment %}

    <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Skuid Certification Exam Prep</div>
        <div class="np-resource-subtitle cert-sub-header">Prep, practice, or schedule you exam.</div>

        <div class="cert-exam-prep-cards col-xs-9 col-sm-12">
            <div class="cert-card col-xs-12 col-md-3">
                <a class="cert-button" href="#">Prep Guide</a>
                <div class="cert-card-blurb">
                    View courses, documentation, and other resources to prep for the certification exam.
                </div>
            </div>
            <div class="cert-card col-xs-12 col-md-3">
                <a class="cert-button" href="#">Practice Exam</a>
                <div class="cert-card-blurb">
                    Take a practice exam to test what you've learned. 
                </div>
            </div>
            <div class="cert-card col-xs-12 col-md-3">
                <a class="cert-button" href="#">Schedule Exam</a>
                <div class="cert-card-blurb">
                    Ready? Schedule your exam to become certified. 
                </div>
            </div>
        </div>
    </div>

    {% comment %}============================================ EXAM NOT STARTED =================================================={% endcomment %}

    <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Exam not started</div>
        <div class="np-resource-subtitle cert-sub-header">See email for instructions or schedule your exam below</div>

        <div class="cert-card col-xs-9 col-sm-5">
            <a class="cert-button completion-status-card-button" href="#">Schedule Exam</a>
            <div class="cert-card-blurb completion-status-card-blurb">
                Ready? Schedule your exam to become certified.
            </div>
        </div>
    </div>

    {% comment %}============================================ EXAM COMPLETE ===================================================={% endcomment %}

    {%- comment -%} <div class="np-resource-title cert-header">Exam complete</div>
    <div class="np-resource-subtitle cert-sub-header">Results are still pending. Check back in 10 business days from your exam date.</div> {%- endcomment -%}

    <div class="cert-content-container col-xs-12 exam-status-container">
        <img src="https://cdn.northpass.io/Skuid/images/exam_complete_background.svg" alt="exam-complete-background" class="exam-status-image">
    </div>

    {% comment %}============================================== PASSED ========================================================{% endcomment %}

    <div class="cert-content-container col-xs-12 exam-status-container">
        <img src="https://cdn.northpass.io/Skuid/images/exam_passed_background.svg" alt="exam-passed-background" class="exam-status-image">
            <a class="cert-button-big share-cert-button" href="#">Share your certification</a>
        </img>
    </div>

    {% comment %}=============================================== FAILED  ======================================================{% endcomment %}

    <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Exam failed.</div>
        <div class="np-resource-subtitle cert-sub-header">If you'd like to try again, register to retake the exam below.</div>

        <a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a>
    </div>

    {% comment %}============================================= CERTIFIED ======================================================{% endcomment %}

    <div class="cert-content-container col-xs-12 exam-status-container">
        <img src="https://cdn.northpass.io/Skuid/images/cert_recert.svg" alt="cert-recert-background" class="exam-status-image">
            <div class="cert-recert-content-container">
                <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
                <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
            </div>
        </img>
    </div>

    {%- comment -%} <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Congratulations you're certified!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
    </div>  {%- endcomment -%}

    {% comment %}============================================ RECERTIFIED ====================================================={% endcomment %}

    <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Time for your recertification!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med re-cert-button" href="#">Get recertified</a> 
    </div>
  </main>
</div>
{% include "footer" %}

<!-- Hotjar Tracking Code for Skool Staging/test site -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:3393511,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

<style>
    .certification-page{
        height: 100%;
        padding: 40px 15px 20px;
        width: 100%;
    }

    .cert-header,
    .cert-sub-header{
        text-align: center;
    }

    .cert-sub-header{
        font-weight: 500;
    }

    .register-cert-button{
        margin-top: -4px !important;
    }

    .cert-recert-content-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: absolute;
        padding-top: 12%;
        left: -5px;
        font-size: 10px;
    }

    .cert-recert-content-container .cert-sub-header{
        font-size: 8px;
    }

    .registration-sub-header-link{
        text-decoration: none;
    }

    @media screen and (min-width: 450px){
        .cert-recert-content-container{
            padding-top: 13%;
        }
    }

     @media screen and (min-width: 550px){
        .cert-recert-content-container{
            padding-top: 14%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }

    }

    @media screen and (min-width: 768px){
        .certification-page{
            padding: 30px 3% 75px;
        }

        .cert-recert-content-container{
            left: unset; 
            margin-right: 10px;
            padding-top: 8%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 900px){
        .cert-recert-content-container{
            padding-top: 9%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 16px;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 18px;
        }
    }

    @media screen and (min-width: 1280px){
        .cert-recert-content-container .cert-sub-header{
            font-size: 20px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-recert-content-container{
            padding-top: 11%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 22px;
        }
    }

    @media screen and (min-width: 1950px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 24px;
        }
    }

    @media screen and (min-width: 2150px){
        .cert-recert-content-container{
            padding-top: 200px;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 26px;
        }
    }

    /* TOP ELEMENT STYLES */ 

    .base-state{
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .base-state .np-resources-title{
        margin-bottom: 0;
    }
    
    .register-button{
        background: #603DD8;
        color: #FFFFFF;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 500;
        height: 35px;
        padding: 5px;
        text-align: center;
        width: 150px;
    }

    .cert-step-bubbles{
        align-items: center;
        display: flex;
        flex-direction: row;
        height: 73px;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 0;
    }

    .cert-bubble{
        align-items: center;
        background: #B195F4;
        border-radius: 8px;
        color: #FFFFFF;
        display: flex;
        font-size: 9px;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        max-width: 24%;
        text-align: center;
    }

    .current-cert-bubble{
        background: #603DD8;
    }

    @media screen and (min-width: 450px){
        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 650px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 750px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 768px){
        .base-state{
            margin-bottom: 12px;
        }

        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 850px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 1200px){
        .cert-bubble{
            font-size: 12px;
        }
    }


    /* CONTENT STYLES ===================================================================================================================================================== */ 
    iframe,
    .cert-content-container{
        background: #F7F5FD;
        width: 100%;
    }

    .cert-content-container{
        align-items: center;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        padding-bottom: 127px;
        padding-top: 91px;
    }

    .exam-status-container{
        padding: 0;
    }

    .exam-status-image{
        width: 100%;
    }

    .exam-registration-image{
        margin-left: -15%;
    }

    .cert-exam-prep-cards{
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .cert-card{
        align-items: center;
        background: #E7E3F4;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
    }

    .cert-button{
        margin-bottom: 24px;
        margin-top: 40px;
        width: 55%;
    }

    .cert-button-med{
        width: 45%;
    }

    .cert-button-big{
        font-size: 18px;
        height: 40px;
        padding: 5px;
        width: 70%;
    }

    .cert-button,
    .cert-button-med{
        font-size: 14px;
        height: 35px;
        padding: 7px
    }

    .cert-button-med,
    .cert-button-big{
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .cert-button,
    .cert-button-med,
    .cert-button-big{
        background: #603DD8;
        border-radius: 16px;
        color: #FFFFFF;
        font-weight: 500;
        margin-bottom: 24px;
        text-align: center;
        text-decoration: none;
    }

    .retake-cert-button{
        font-size: 16px;
        padding: 7px;
    }

    .cert-button:hover,
    .cert-button-big:hover{
        color: #FFFFFF;
    }

    .cert-card-blurb{
        font-size: 18px;
        font-weight: 500;
        min-height: 100px;
        margin-bottom: 19px;
        padding: 0 25px;
        text-align: center;
    }

    .completion-status-card-blurb{
        min-height: 70px;
    }

    .share-cert-button{
        font-size: 12px !important;
        height: 40px;
        margin-top: -38%;
        margin-bottom: calc(38% + 24px);
        max-width: 275px;
        padding: 11px 0px;
        width: 38% !important;
    }

    .download-cert-button{
        font-size: 12px;
        height: 27px;
        margin-top: -25px;
        max-width: 210px;
        padding-top: 5px;
    }

    @media screen and (min-width: 450px){
        .cert-button{
            font-size: 16px;
            padding: 5px;
        }

        .cert-button-med{
            width: 40%;
        }

        .cert-button-big{
            width: 55%;
        } 

        .download-cert-button{
            font-size: 14px;
            height: unset;
            margin-top: -15px;
            width: 40%;
        }
    }

    @media screen and (min-width: 500px){
        .retake-cert-button{
            font-size: 18px;
            padding: 5px;
        }

        .share-cert-button{
            font-size: 14px;
            padding: 8px;
        }
    }

    @media screen and (min-width: 550px){
        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 
    }

    @media screen and (min-width: 600px){
        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 650px){
        .cert-button-big{
            width: 40%;
        } 
    }

    @media screen and (min-width: 700px){
        .cert-button-med{
            width: 27%;
        }

        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 768px){
        .cert-exam-prep-cards{
            width: 100%;
        }

        .cert-card-blurb{
            min-height: 130px;
        }

        .completion-status-card-button{
            width: 75%;
        }

        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 

        .retake-cert-button{
            font-size: 16px;
            padding: 7px;
        }
    }

    @media screen and (min-width: 850px){
        .completion-status-card-button{
            width: 65%;
        }

        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 900px){
        .completion-status-card-button{
            width: 60%;
        }

        .share-cert-button{
            font-size: 18px !important;
            padding: 5px !important;
        }

       .cert-button-big{
            width: 40%;
        }
    }

    @media screen and (min-width: 950px){
        .cert-button-med{
            width: 25%;
        }

        .completion-status-card-button{
            width: 55%;
        }
    }

    @media screen and (min-width: 1000px){
        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 1024px){
        .cert-exam-prep-cards{
            flex-direction: row;
        }

        .cert-button{
            font-size: 14px;
            padding: 0;
            padding-top: 7px;
            width: 80%;
        }
        
        .cert-card-blurb{
            min-height: 190px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-button{
            font-size: 14px;
            padding: 7px;
            width: 75%;
        }

        .cert-button-med{
            width: 22%;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-button-big{
            width: 30%;
        } 
    }

    @media screen and (min-width: 1200px){
        .cert-button{
            width: 70%;
        }
    }

     @media screen and (min-width: 1300px){
        .cert-button{
            width: 65%;
        }

        .cert-button-med{
            max-width: 170px;
        }

        .cert-button-big{
            max-width: 230px;
            width: 25%;
        } 

        .download-cert-button{
            margin-top: 25px;
        }
    }

    @media screen and (min-width: 1350px){
        .cert-button{
            font-size: 16px;
            padding: 6px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-button{
            width: 55%;
        }

        .cert-card-blurb{
            min-height: 140px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }
</style>