{% extends 'base.html' %}
{% load static %}

{% block title %} Chat-or-Quiz {% endblock %}

{% block content %}
{% load cloudinary %} 

<main>
<div class="container">  
        <!-- Chat and Quiz Landing page -->
        {% if user.is_authenticated %}
        <div class="container text-center">
            <div class="row col-md-6 mx-auto">
                <div class="col-12 d-none d-md-block mb-2">
                    <img src="" alt="Logo" width="50" class="d-inline-block align-text-top">
                </div>
                <div class="col=12">   
                    <div class="fw-bold">Hey, {{ user | capfirst }}!</div>
                    <div>Welcome to ChatAHOY!</div>
                    <div>
                        You want to chat? <br> Or you want to take a quiz? <br>Let's begin the adventure
                    </div>
                </div>
                <div class="col-12 py-4">
                    <div class="btn-group text-center py-3 col-6 mx-auto">
                        <a class="btn btn-chat me-2" href="" aria-label="Go to account signup page" type="button"> Chat</a>
                        <a class="btn btn-quiz me-2" href="" aria-label="Go to account signup page" type="button"> Quiz</a>  
                    </div>
                    <div class="my-3"><small>Disclaimer: This website was created <br>for educational purposes only.</small></div>
                </div>
            </div> 
        </div> 
        <!-- Chat and Quiz Landing page ends -->
        {% else %}
        <div class="container text-center">
            <div class="row">
                <div class="col-12 mb-2">
                    <img src="" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
                </div>
                <div class="col=12">   
                    <div class="text-uppercase fw-bold">Authentication Required</div>
                    <div>
                        Please login or register. <br>Only logged in users can access <br>Chat-or-Quiz app. Thank You!
                    </div>
                </div>
                <div class="col=12 py-4">   
                    <div class="d-grid gap-2 col-6 mx-auto">
                        <a class="btn btn-primary" href="{% url 'account_signup' %}" aria-label="Go to account signup page" type="button"><i class="fa-solid fa-users" aria-hidden="true"></i> Register</a>
                        <a class="btn btn-secondary" href="{% url 'account_login' %}" aria-label="Go to account login page" type="button"><i class="fa-solid fa-lock" aria-hidden="true"></i> Login</a>
                      </div>
                </div>
                <div class="social-networks">
                    <ul class="navbar-nav mx-auto mt-5">      
                        <li class="nav-item">      
                            <a href="https://twitter.com/ipanzek" target="_blank" rel="noopener" aria-label="Go to Developer's Twitter page (opens new tab on third party site)" title="Twitter">
                                <span style="font-size: 2em; color: black;" class="p-3">
                                    <i class="fa-brands fa-twitter fa-sm" aria-hidden="true"></i>
                                </span>
                                <span class="sr-only">Twitter</span>
                            </a>
                            <a href="https://linkedin.com/in/panzek/" target="_blank" rel="noopener" aria-label="Go to Developer's LinkedIn page (opens new tab on third party site)" title="LinkedIn">
                                <span style="font-size: 2em; color: black;" class="p-3">
                                    <i class="fa-brands fa-linkedin fa-sm" aria-hidden="true"></i>
                                </span>
                                <span class="sr-only">LinkedIn</span>
                            </a>
                            <a href="https://github.com/panzek" target="_blank" rel="noopener" aria-label="Go to Developer's GitHub page (opens new tab on third party site)" title="GitHub">
                                <span style="font-size: 2em; color: black;" class="p-3">
                                    <i class="fab fa-github-square fa-sm" aria-hidden="true"></i>
                                </span>
                                <span class="sr-only">GitHub</span>
                            </a>
                            <div class="social-networks-title mt-1">(c) Panzek 2023. All Rights Reserved.</div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}
    </main>
</div>


{% endblock %}