<ion-content class="slide-container">
    <ion-slides class="slides" pager (ionSlideDidChange)="slideChanged()">
        <ion-slide class="slide">
            <h1 class="title slide-1">Dating on a Public Chat</h1>
            <h3 class="sub-title">LIVE audience viewing the chat</h3>
            <img class="indicator-image logo" src="assets/img/logo.png" alt="Creepy Chat logo" />
        </ion-slide>

        <ion-slide class="slide">
            <h1 class="title slide-2">Chat anonymously</h1>
            <h3 class="sub-title">Be anonymous until you go private</h3>
            <img class="indicator-image anonymous" src="assets/img/anonymous.png" alt="Be anonymous" />
        </ion-slide>

        <ion-slide class="slide">
            <h1 class="title slide-3">Private Share Option</h1>
            <h3 class="sub-title">Share contact and more only to your match</h3>
            <img class="indicator-image attach" src="assets/img/attach.png" alt="Share in private" />
        </ion-slide>

        <ion-slide class="slide">
            <h1 class="title slide-4">Get Onboard</h1>
            <h3 class="sub-title">Register to find your matches</h3>
            <img class="indicator-image chat" src="assets/img/chat.png" alt="Start chatting" />
        </ion-slide>
    </ion-slides>
</ion-content>

<ion-footer class="footer-container">
    <ion-grid>
        <ion-row *ngIf="slideindex < 3">
            <ion-col width-50>
                <button class="skip-button" (click)="goToSlide(3)" full large ion-button>Skip</button>
            </ion-col>
            <ion-col width-50>
                <button class="next-button solid-button" (click)="goToNext()" full large ion-button outline>Next</button>
            </ion-col>
        </ion-row>
        <ion-row *ngIf="slideindex > 2">
            <button class="next-button" (click)="loginWithFacebook()" full large ion-button>Signup with facebook</button>
        </ion-row>
    </ion-grid>
</ion-footer>