<aura:component >

    <!-- progress indicator variables-->
    <aura:attribute name="progressClassStage1" type="String" />
    <aura:attribute name="progressClassStage2" type="String" />
    <aura:attribute name="progressClassStage3" type="String" />

    <!-- render variables -->
    <aura:attribute name="infoRender" type="Boolean" />

    <!-- call the init method -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- Object variables -->
    <aura:attribute name="contactRec" type="Contact"
                    default="{
                             sobjectType : 'Contact'
                             }"/>

    <br/><br/><br/>

    <div class="slds-progress">
        <ol class="slds-progress__list">
            <li class="{!v.progressClassStage1}">
                <button class="slds-button slds-progress__marker">
                    <span class="slds-assistive-text">Step 1 - Active</span>
                </button>
            </li>
            <li class="{!v.progressClassStage2}">
                <button class="slds-button slds-progress__marker">
                    <span class="slds-assistive-text">Step 2 </span>
                </button>
            </li>
            <li class="{!v.progressClassStage3}">
                <button class="slds-button slds-progress__marker">
                    <span class="slds-assistive-text">Step 3 </span>
                </button>
            </li>
        </ol>
        <div class="slds-progress-bar slds-progress-bar_x-small" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" role="progressbar">
            <span class="slds-progress-bar__value" style="width:0%">
                <span class="slds-assistive-text">Progress: 0%</span>
            </span>
        </div>
    </div>

    <br/><br/><br/>

    <article class="slds-card">
        <aura:renderIf isTrue="{!v.infoRender}">
            <center>
                <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                        <div class="slds-media__body">
                            <h2 class="slds-card__header-title">
                                <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
                                    <span class="slds-text-heading_small">I won't let you take the survey before i get to know you!</span>
                                </a>
                            </h2>
                        </div>
                    </header>
                </div>
            </center>

            <br/><br/><br/>

            <div class="slds-card__body slds-card__body_inner" style="width: 90rem;">
                <div class="slds-grid slds-gutters">
                    <div class="slds-col">
                        <span>
                            <lightning:input aura:id="newSurveyContactForm" label="Can i get your first name?"
                                             name="FirstName"
                                             value="{!v.contactRec.firstname}"
                                             required="false"/>  <br/>
                            <lightning:input aura:id="newSurveyContactForm" label="Oh! I need your last name too ;)"
                                             name="FirstName"
                                             value="{!v.contactRec.lastname}"
                                             required="false"/>  <br/>
                            <lightning:input aura:id="newSurveyContactForm" label="Give me your email address (i will surely spam later)"
                                             name="Email"
                                             value="{!v.contactRec.email}"
                                             required="false"/>  <br/>
                            <lightning:input aura:id="newSurveyContactForm" label="Give me a phone number (mandatory) for me to call you anytime i want"
                                             name="Phone"
                                             value="{!v.contactRec.phone}"
                                             required="false"/>  <br/>
                        </span>
                    </div>
                </div>
                <br/>
                <lightning:button label="Take Survey >>"
                                  class="slds-m-top--medium"
                                  variant="brand"
                                  onclick="{!c.newSurveyContact}"/>
                <br/><br/>
                <footer class="slds-card__footer">Powered by - Rajat Mahajan</footer>
            </div>
        </aura:renderIf>
    </article>

    <br/><br/><br/>

</aura:component>